Learn How to make a Single Element iPhone in CSS3
cssdeck.com
cssdeck.com
The practical application seems pretty low but as a way of teaching CSS it was great. If someone knows more tutorials like that please tell me about them.
Not only on CSS3 stuff but on JS, Coffee, SASS, Zen Coding, Markdown, etc. too!
Ill just sub to the feed :)
I had no idea those before and after pseudo elements were so powerful, or that box shadows could be that awesome.
That said, this particular instance with it's interactive features is certainly one of the better variants (if you must go with streaming).
Unless I'm seriously mistaken; the webcast is using the (fairly old) linear gradient syntax which was removed in FF16.
Or am I missing something?
Spec:
http://dev.w3.org/csswg/css3-images/#linear-gradient-type
In essence, you can't say linear-gradient(top, ....) but need to say linear-gradient(to bottom, ...).
Also, this is my first time seeing cssdeck, and I must tell you how fantastic it is! The experience was great.
I think it's very cool when an image is created in essence programmatically, this really speaks to me as a developer, and I certainly appreciate the declarative nature of CSS, but I wish for something that is easier to read, and so easier to maintain over time, including source control with branches/merges etc. An added bonus to such language would be ability to compile it down to CSS, or Objective-C/UIKit, or C#/Windows, or simply render it to static bitmaps...
As someone who doesn't know CSS, I see it similar to the way I see PERL - you can do cool things, but I wouldn't know where to start if I had to change anything, except by trying all things at random.
Single element CSS hacks like this are impressive demonstrations of technical knowledge, but it was never meant to be used like this.
Perfection!
Edit: I updated the codecast, check it now..
Edit Edit: The square is ridiculously big in Firefox... :-\
It's really powerful stuff, and the trend of user-interfaces is rapidly shifting away from image-heavy UI's to CSS-based UIs which typically download faster, and can be updated in-code without needing to re-slice up a PSD file to accomodate the desired changes.
Not to mention it's usually a case of "If you're using a bleeding edge browser beta, but not that browser, only this one".
It's unintuitive for building such things, which is why there's such a "gee whiz" factor, that you don't see when someone draws an iPhone in Adobe Illustrator.
I get the hack, I get the fun. But anyone who seriously advocates for a UI built of CSS bastardizations is "doing it wrong", as they say.
Why not invest that energy in SVG support and tools for browsers? Creative tools will be more powerful and flexible. And it'll "just work".
I disagree with your take on UIs moving toward CSS too. Your parent has an excellent point about not needing to recline PSDs. Now, I'm definitely not saying we should all heavily rely on CSS for every UI element we can but I certainly think its great that we begin to use CSS for more UI elements than before like navigation bars and dropdown menus, buttons, and lots more. There's still is and believe there always will be a need for traditional graphics in UI designs for a long time to come. I think only a fool would suggest that CSS, SVG, and other technologies will replace traditional graphics but at the same time less reliance on traditional graphics is a good thing for everyone from designers to developers and even end users.
The trick is to be smart about their application. Some parts of css3 are supported widely enough to be viable for use as a replacement for some graphics. Traditional graphics can look quite ugly depending on your system while css3 replacements look better. The opposite is also true of CSS looking terrible and not being able to compete with traditional graphics. A good front end developer knows when to use each. Bending CSS in ways it wasn't meant to be bent or using features that have terrible support or are overly hackish/complicated is obviously something we shouldn't do ever but we are getting to a point where these new tech oldies are viable replacements. I applaud the people who create such unrealistic (in the sense that they shouldn't be used in production) demos because by pushing the limits of what something CSS can do means that some of their work will become more widely adopted and supported in browsers. It's e demos that push limits like this that get us to the point where we can reasonably start using CSS3 in place of some UI elements. The language will also evolve to make certain techniques better and easier. It was because of many of the ways we used JavaScript for interaction and design that CSS now includes features like transitions and it can only get better.
Finally, your comment seems to me like it's coming from a place of black or white thinking. It feels to me like you're just shy of saying "We should not use CSS for UI elements and only graphics". I agree with some of your sentiment but I think it's better to embrace most of the new features of CSS while still being smart about their application. A lot of designers and developers will go nuts with them and use them when they shouldn't like when the blink tag and other goodies were first introduced into HTML in the 90's. That's just what happens. But there are still many of us who know that with great power comes great responsibility and won't go around replacing every UI element that used to be a graphic just because we can.
Just bear in mind that these effects will incur a huge performance hit compared to bitmaps.
Tiny nitpick: this is more an iPhone 4 than a 4S: the black notch on the top frame is not present with the 4S. (they have one notch at the top of each side) Though to be perfectly accurate, you'll also need two notches at the bottom (one on each side) of the frame as well. ;-)
It took me a solid minute to find the "play" button. It was hidden on the other send of the page in the bottom corner in faint color.