iPhone 4 created purely from CSS3 code can slide to unlock and more

HTML5 and CSS expert Vasily Zubach has put together a quite amazing render of an iPhone 4 created solely using CSS3. Because it was created in this manner, it does not include any images at all, it is all done with code.

This rendering of iPhone 4 and its icons was made in pure CSS3. No images, no base64, no SVG, no canvas, just 3395 lines of CSS code and 335 lines of Javascript code (with jQuery, of course).Viewed best with the latest versions of Safari and Chrome in Mac OS X.

You can see what we mean by amazing, when you visit the full render here. It is not just a render but it also offers a certain amount of functionality too. You can slide to unlock, click the home button and even turn it on and off using the power button. Very clever work!

Source: TNW

Have something to say about this story? Leave a comment! Need help with something else? Ask in our forums!


UK editor at iMore, mobile technology lover and air conditioning design engineer.

More Posts



← Previously

iPhone 4S audio issue most likely won't see a fix with iOS 5.1

Next up →

Weekly Mod: How to replace a battery in an iPhone 3G, iPhone 3GS

Reader comments

iPhone 4 created purely from CSS3 code can slide to unlock and more


The thing that I like about objects created with CSS, you can zoom into them like any vector. And, this is no different. Awesome!!

I try to respect the hard work from the developer community and designers out there but I'm really failing to see the point in this. Couldn't his time and talent be used somewhere else?

You just made yourself look like a D Bag. Is this guy doing this to find a more economical way of doing certain things on an iPhone or is it something he wanted to try "just to see if it works?" if he's trying to improve a process then, hey, good job and more power to him. But it looks like he took a simple process and took the long way around. If I'm wrong, fine but don't be a D-Bag.

Oh my god, you really have no clue what you're talking about.
Do you even know what CSS or HTML5 are... or why they are important? Obviously not.
Please, crawl back to your little world if ignorance with all of the other people who don't know how the WWW functions.

Oh, so you really are the biggest D-Bag on here, and there are a lot of them who post useless disrespecting garbage for comments. I was trying to be respectful to the creator of the this CSS/HTML5 iPhone but you are a pompous piece of sh-t.

That's kind of like saying, why did Columbus bother crossing the ocean? Seems like a waste of time when there were already established routes to the East.

Waste of time. I could care less what he does but this "app" has no purpose whatsoever.

Can someone PLEASE explain why this is interesting or important ?
I'm not trolling, I genuinely have no idea what this is about.