The heart of tech

This article was published on January 3, 2012


This jaw-dropping rendering of an iPhone 4 was written completely in CSS3

This jaw-dropping rendering of an iPhone 4 was written completely in CSS3
Drew Olanoff
Story by

Drew Olanoff

Drew Olanoff was The Next Web's West Coast Editor. He coined the phrase "Social Good" and invented the "donation by action" model for onlin Drew Olanoff was The Next Web's West Coast Editor. He coined the phrase "Social Good" and invented the "donation by action" model for online charitable movements. He founded #BlameDrewsCancer. You can follow him on Twitter, Google+, Facebook, or email [email protected]

This amazing feat in design comes to us thanks to HTML5 and CSS guru Vasiliy Zubach, also known as TjRus. I’m not sure if Zubach was just bored or someone dared him to do it, but he has rendered an iPhone 4 completely in CSS3. That means there are no images in his design whatsoever.

You can view it in its full glory here, and marvel at the zero image, 3,395 lines of CSS and 335 lines of Javascript version of the iPhone 4.

You can even click the home button, slide to unlock it, and shut it off with the power button.

The fact that all of the features of the phone and design of the icons were done without use of images is astonishing, and impressive. Well done!

Also tagged with