I have never learnt more things in css in such a short time. Seeing someone else go through and seeing them write CSS with live results gave me more insight that the constant rehash of "things you can do with CSS3" . Pausing it playing around with it and the continue the tutorial was amazing.<p>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 CSS3... anymore :-)<p>Unless I'm seriously mistaken; the webcast is using the (fairly old) linear gradient syntax which was <i>removed</i> in FF16.<p>Or am I missing something?<p>Spec:<p><a href="http://dev.w3.org/csswg/css3-images/#linear-gradient-type" rel="nofollow">http://dev.w3.org/csswg/css3-images/#linear-gradient-type</a><p>In essence, you can't say linear-gradient(top, ....) but need to say linear-gradient(to bottom, ...).
Awesome tutorial! A nitpick: Your use of "it's" is incorrect. When used to convey possession, you omit the apostrophe.<p>Also, this is my first time seeing cssdeck, and I must tell you how fantastic it is! The experience was great.
Is there a vector-graphics language that similar to CSS in capabilities and expressive power, but with a more approachable syntax?<p>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...<p>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.
about the 'impossible square' on the button, you can use content:'◻'; // <a href="http://www.fileformat.info/info/unicode/char/25fb/index.htm" rel="nofollow">http://www.fileformat.info/info/unicode/char/25fb/index.htm</a>
and then just position it into middle, you ll know the rest
This really is excellent... shows an amazing level of creativity and skill.<p>Just bear in mind that these effects will incur a huge performance hit compared to bitmaps.
Very interesting.<p>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. ;-)
"In this codecast, you'll learn to create a cool single element iPhone 4S using just CSS3. Click on play now :D"<p>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.
It's not a tutorial, but you can see the code for a single-element MacBook Pro here <a href="http://news.ycombinator.com/item?id=4384954" rel="nofollow">http://news.ycombinator.com/item?id=4384954</a>
Very brave considering Apple is very trigger happy with the lawsuit gun whenever they see anyone using rounded corners not to mention a full on iPhone image... :)