6 ms·
IPhone 4 in pure CSS3
- zyb09 15y agoiPhone4 in CSS3? I predict this to be the highest upvoted submission on HN of all time.
- ajarmoniuk 15y agoIt's funny because it's true.
- jimmyhwang 15y agoWow, this is pretty sick. I wonder how much time it took to create this.
- willwashburn 15y agoPerhaps I'm behind the times, but what tools do people use to make the icons like that in CSS3? Is it simply an art or can you start in photoshop and use some data there to help guide you along the way?
- lukeholder 15y agousually just a text editor.
- willwashburn 15y agoNot that I don't believe you, but really? For example, any website I've built I can surely make with just a text editor but I'll lay it out with ps first. That way I can go back and check what colors / gradients / dimensions I used to speed up the process. I would image this would require something similar but to the nth degree. That is, I count 20 something <b></b> tags to make the clouds in the mail icon. Is that really just guess and check?!
- openbear 15y agoThere's a brief writeup here ... http://blog.graphicpeel.com/post/740928981/ios-icons-made-in-pure-css http://blog.graphicpeel.com/post/740928981/ios-icons-made-in... ... it's not the same guy, but the above blog post is the first time I remember seeing someone do iOS icons in pure CSS. The whole thing is fun more than practical ... kind of like ASCII art for a new generation ;-)
- hendrik-xdest 15y agoInteresting. These icons don't work in the latest Firefox but the ones used for the iPhone Demo do.
- dextorious 15y ago"""For example, any website I've built I can surely make with just a text editor but I'll lay it out with ps first. That way I can go back and check what colors / gradients / dimensions I used to speed up the process.""" You may be a bit behind the times: http://37signals.com/svn/posts/1061-why-we-skip-photoshop http://37signals.com/svn/posts/1061-why-we-skip-photoshop http://24ways.org/2009/make-your-mockup-in-markup http://24ways.org/2009/make-your-mockup-in-markup
- lazugod 15y agoNot Photoshop specifically, but it would be easy to take vector art from something like Illustrator and convert it into CSS's simple shapes.
- quizbiz 15y agoTutorials anywhere?
- naithemilkman 15y agoits cool but the title is misleading --> 335 lines of Javascript code used
- ugh 15y agoIt’s not. It’s pure CSS as defined explicitly on the page, i.e. no images used.
- suhastech 15y agothat's obviously needed for the "slide to unlock" gesture and other interactive components...
- okal 15y agoA little like this - Donatello, a "pure" CSS drawing library, http://news.ycombinator.com/item?id=3090290 http://news.ycombinator.com/item?id=3090290. Not to belittle the effort, but 335 (or even 1) lines of JS is absolutely NOT pure CSS3. It really bothers me when people do that. It wouldn't have been any less impressive with a more honest title. That being said, this is a really cool demo.
- ugh 15y agoIt is pure CSS as explicitly defined on the page, i.e. no images used. Just because you have a different definition doesn’t make it right.
- icebraining 15y agoIt's not his definition. Pure means "Not mixed or adulterated with any other substance or material". Here there is JS mixed, hence it isn't pure.
- ugh 15y agoThe point. You are missing it. He or she uses CSS for a job for which usually images are used. Hence his or her use of CSS is pure in that sense and it’s also written down that way. It’s not misleading in any way, shape or form. HN. A community of whiny know it alls.
- RKearney 15y agoWhy do people keep calling things "pure CSS" when they use JavaScript and HTML?
- baddox 15y agoI think HTML obviously is allowed to call something "pure CSS," since an HTML document is required to even load CSS, and CSS rules can only apply to DOM elements. JavaScript, however, shouldn't be allowed.
- RKearney 15y agoYou could do it with XML and XSLT.
- endianswap 15y agoIt seems like a more accurate term for these demonstrations would be "imageless" rather than "pure CSS".
- JoannaMeiger 15y agosucks, the iMessage and Weather apps don't even work
- kulkarnic 15y agoPerhaps I'm missing the point: besides a cool demonstration for what CSS can do (when aided by JS), why is this a useful idea? For anything practical, would one not be better off not being a purist, and using images etc? After all, image formats were meant to store graphics. I'm sure I'm missing something, since I've lately seen a lot of these "pure CSS" things. But what is it? [Edit: apparently, it is meant exclusively as a demo. And it's pretty slick at that]
- LoveLinux 15y agoYou are not missing anything except how not to be a dick.
- duhoang 15y agoIt is just a cool demo that shows us the extent of possibilities. Like the people who bike/run cross country, when a flight from LAX to JFK is under 6 hours.
- kulkarnic 15y agoGot it. It is a very cool demo. Thanks!
- shn 15y agoI wish they donate some of their effort (and knowledge) in a more usable form like helping jQuery Mobile project for a better realistic UI L&F. edit (after 1st? downvote): All I did mean that since he has now a good command of things, maybe he could help JQM. I did not intend to belittle the effort in anyway.
- sequoia 15y agoI can't help but roll my eyes here: "I wish all those people painting canvases would paint my living room... now THAT would be useful." This seems to come up every time there's an art project featured on HN. It's art people; it's its own point! Besides, the fellow did actually seem to have a use for this (scaling up/down, zooming) tho most of that stuff could be achieved more simply with image. Anyway: Hackers -> use tech for fun, not just utility.
- alexhaefner 15y ago(1) It's not pure CSS3, there's JS involved to handle events. Sure it's small, but it's not. (2) The only real gripe is that the animation is not accurate to an actual iPhone. After the unlock there is a delay between the lock/title moving away and the icons moving in. Both items clear the screen before the other items enter. Also there's a fade on the lock screen items. Demos like these are cool if they are well done, and correct. Otherwise they feel more like a gimmick. Having written webkit animations, all the added effect (the fades and timings) could be done with CSS3. So if you're gonna do it, do it well. Now after the criticism, good job. I like that all the icons and font and screens are all HTML/CSS objects.
- marcusf 15y agoGiving some benefit of the doubt, I really think the author was thinking "Done without images", not "Done without JS" when he was writing pure CSS. That change in perspective makes the title less misleading. I for one think it's a hell of a job. I'm impressed with the work involved, especially in small things like the positioning of the clouds on the Mail.app, and the loudspeaker design.
- alexhaefner 15y agoAh I've done animation work in the past, so that's what I was drawn to. After that I looked at the other details more closely. Funny what we find ourselves focusing on.
- wonderercat 15y ago"Demos like these are cool if they are well done, and correct. Otherwise they feel more like a gimmick." It's pretty obviously a gimmick (and a cool one at that). Looking for pixel perfect accuracy is completely missing the point.
- alexhaefner 15y agoI guess I just look at these things and say, "Yeah doesn't surprise me CSS could do that, but is it done well?" We're at a point where none of this is surprising or amazing to me, it just makes sense. I'm looking for quality.
- deepkut 15y agoDespite the snide comments, this does demonstrate the power of CSS3, which I think was the designer's intention! On that note, NICE.
- zalthor 15y agoAnyone else notice the time displayed as local time? Not that its anywhere as cool as the rest of the demo, but I think its a really nice touch!
- switz 15y agoTry the calendar with the real day on it!
- quizbiz 15y agoThis is a beautiful resume.
- bala79 15y agothis is cool!. Good to know the higher level of possibilities of css3. awesome work!
- harryf 15y agoWorth DOM inspecting, for example, the rays from the sun on the Weather app icon. Insane amounts of work have gone into this...
- TjRus 15y agoHi! I'm developer of this iPhone. The reasons i've made it: 1. Challenge. I saw the icons in pure CSS and deside to make full iPhone with icons. 2. Demonstration of CSS3 posibilities (not all but many af them) 3. Inspiration. Many young developers write me and thanks me for inspire themto learn more, use more... I titled it "..pure CSS3" because this iPhone is actually in pure CSS3, the JS part is for iPhone interaction. Without JS or with it - iPhone is anyway on pure CSS3.
- its_so_on 15y agostick a flash app in there that uses your microphone, camera, speakers, over tha internetz, and kill skype
- fatalerrorx3 15y agoNot to detract from the coolness of this demo, but it looks like garbage in IE 8 (what else is new)
- joshuahedlund 15y agoWould love to see a follow-up post detailing how some of the more challenging aspects were accomplished/derived/realized.
- pothibo 15y agoVery nice work. Love the details and the slider screen is a nice touch. Those iPhones in CSS are becoming more and more popular;) I made this 4 weeks ago, it's pretty much the same thing, but done differently. http://pothibo.github.com/iPhonePerspective/ http://pothibo.github.com/iPhonePerspective/
- code_duck 15y agoIf anyone wants to see an alternative implementation, this one came to mind: http://alexw.me/ipad2/ http://alexw.me/ipad2/