IPhone 4 in pure CSS3

Perhaps I'm missing the point: besides a cool demonstration for what CSS can do (when aided by JS), why is this a useful idea?<p>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?<p>[Edit: apparently, it is meant exclusively as a demo. And it's pretty slick at that]

Hi! 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...<p>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.

Perhaps 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?

Why do people keep calling things "pure CSS" when they use JavaScript and HTML?

its cool but the title is misleading --&#62; 335 lines of Javascript code used

Despite the snide comments, this does demonstrate the power of CSS3, which I think was the designer's intention! On that note, NICE.

Anyone 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!

Worth DOM inspecting, for example, the rays from the sun on the Weather app icon. Insane amounts of work have gone into this...

Very 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.<p><a href="http://pothibo.github.com/iPhonePerspective/" rel="nofollow">http://pothibo.github.com/iPhonePerspective/</a>

Wow, this is pretty sick. I wonder how much time it took to create this.

If anyone wants to see an alternative implementation, this one came to mind:<p><a href="http://alexw.me/ipad2/" rel="nofollow">http://alexw.me/ipad2/</a>

Would love to see a follow-up post detailing how some of the more challenging aspects were accomplished/derived/realized.

Not to detract from the coolness of this demo, but it looks like garbage in IE 8 (what else is new)

This is a beautiful resume.

this is cool!. Good to know the higher level of possibilities of css3. awesome work!

stick a flash app in there that uses your microphone, camera, speakers, over tha internetz, and kill skype

iPhone4 in CSS3? I predict this to be the highest upvoted submission on HN of all time.

(1) It's not pure CSS3, there's JS involved to handle events. Sure it's small, but it's not.<p>(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.<p>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.<p>Now after the criticism, good job. I like that all the icons and font and screens are all HTML/CSS objects.