Learn How to make a Single Element iPhone in CSS3(cssdeck.com)
cssdeck.com
Learn How to make a Single Element iPhone in CSS3
http://cssdeck.com/labs/creating-single-element-iphone-using-css3
17 comments
I find the recent trend to put all kinds of tutorials, introductions, etc. into videos or similar quite off-putting. It is much harder to skim through, or adjust my reading speed to how fast I can comprehend what's being said, which depends on whether I'm looking at some code or watching him type out boilerplate. There is also a tendency to make 10-minute long videos out of things that could be typed into a couple of paragraphs.
That said, this particular instance with it's interactive features is certainly one of the better variants (if you must go with streaming).
That said, this particular instance with it's interactive features is certainly one of the better variants (if you must go with streaming).
There's a whole bunch of such 'codecasts' coming soon.
Not only on CSS3 stuff but on JS, Coffee, SASS, Zen Coding, Markdown, etc. too!
Not only on CSS3 stuff but on JS, Coffee, SASS, Zen Coding, Markdown, etc. too!
[deleted]
Is there somewhere I can subscribe so I hear about it when that happens? Or could I give you my email address?
You can follow @cssdeck on twitter and also subscribe to RSS http://feeds.feedburner.com/cssdeck
That twitter handle doesn't seem to exist :(
Ill just sub to the feed :)
Ill just sub to the feed :)
Did you remove '@' ?
https://twitter.com/cssdeck
https://twitter.com/cssdeck
Oh wow im an idiot. I kept looking for cssdesk (note the "desk"). All good :)
Definitely. At first I was thinking "okay, another useless CSS trick" then "wait, just one element?" then "why does this read like I'm watching a video?" then I finally found the play button and just sat back and thought "oh my god".
I had no idea those before and after pseudo elements were so powerful, or that box shadows could be that awesome.
I had no idea those before and after pseudo elements were so powerful, or that box shadows could be that awesome.
I believe(?) this was heavily inspired by TheCodePlayer [1], but I don't see any mention of him around here. He has lots of really nice videos like this.
[1]: http://thecodeplayer.com/
[1]: http://thecodeplayer.com/
Not CSS3... anymore :-)
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, ...).
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, ...).
scpécifications the change so quickly, and to adapt to the largest number of users, I think it is preferable to use a wide range of syntaxes..
Isn't it ?
Awesome tutorial! A nitpick: Your use of "it's" is incorrect. When used to convey possession, you omit the apostrophe.
Also, this is my first time seeing cssdeck, and I must tell you how fantastic it is! The experience was great.
Also, this is my first time seeing cssdeck, and I must tell you how fantastic it is! The experience was great.
Thanks :) Will keep it in mind next time. My English starts to suck when I record something...
It was really noticeable in the codecast because you went back and "corrected" it.
Is there a vector-graphics language that similar to CSS in capabilities and expressive power, but with a more approachable syntax?
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.
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.
SVG sounds pretty much like what you're looking for.
Single element CSS hacks like this are impressive demonstrations of technical knowledge, but it was never meant to be used like this.
Single element CSS hacks like this are impressive demonstrations of technical knowledge, but it was never meant to be used like this.
SVG also has "up and coming" full support in most browsers and you can use compatibility wrappers such as http://raphaeljs.com/
Thanks, this might be it. iOS library:
https://github.com/adamgit/SVGKit/tree/transforms
https://github.com/adamgit/SVGKit/tree/transforms
about the 'impossible square' on the button, you can use content:'◻'; // http://www.fileformat.info/info/unicode/char/25fb/index.htm
and then just position it into middle, you ll know the rest
You are awesome, I just tried with '▢' character and made this: http://cssdeck.com/labs/wsuol0ff/0
Perfection!
Edit: I updated the codecast, check it now..
Edit Edit: The square is ridiculously big in Firefox... :-\
Perfection!
Edit: I updated the codecast, check it now..
Edit Edit: The square is ridiculously big in Firefox... :-\
Awesome ending to an awesome tutorial. Great format for learning.
This is ridiculous. I'm trying to think of a practical / smart use of this. Incredibly clever, and remarkable show of skill, I'm just questioning it.
The fact that the end result looks like an iPhone is incidental to the advanced CSS techniques on display in the "codecast."
Yep. I am learning a lot about box-shadow, but I won't be making iPhones with it!
It shows the capabilities of creating resolution-independent imagery using CSS. In other words, you can generate non-photographic imagery using CSS that will display with clarity regardless of the DPI of the device it's being viewed on. Got a Retina MBP? It'll look good. Got a non-retina iPad? It'll look good.
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.
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.
What a horrible trend. CSS = Cascading Style Sheet. A tool explicitly designed to de-couple semantics from presentation.
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".
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".
[deleted]
You're taking this whole thing the wrong way. This was not meant as a display of a practical use for css3. What it is, is a display of the potential power of it. It's implied that although you could create graphics in CSS now, you shouldn't.
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.
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.
Thanks for this.
It's a tutorial in the academic sense--teaching you techniques but not actually showing you practical examples of where you'd use those techniques.
This is a great tutorial. CSSDesck is fantastic I love how simple the idea is, no fluff just code.
This really is excellent... shows an amazing level of creativity and skill.
Just bear in mind that these effects will incur a huge performance hit compared to bitmaps.
Just bear in mind that these effects will incur a huge performance hit compared to bitmaps.
Very interesting.
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. ;-)
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"
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 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.
Stupendous!!! you will be my inspiration to get started with CSS3..:)
Thanks a lot!!
It's not a tutorial, but you can see the code for a single-element MacBook Pro here http://news.ycombinator.com/item?id=4384954
Splendid! I am thinking if there is a way to get wood-grain effect similarly?
Pretty sure you could pull it off using a blended set of CSS linear gradients. Some of the organic swirls you see in wood might be considerably more-difficult to replicate, but you could simulate those to a degree by using sequences of small straight shapes ordered to form a shape that's curved in appearance.
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... :)
[deleted]
simply superb!
Sort of cool, but absolutely useless.
It's to teach you CSS3 techniques, with a whimsical demonstration.
It's a tutorial, I think the point here is in the means, not the end result.
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.