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


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