January 04, 2012

iPhone 4 Demo: No Images Used, Just CSS3 and HTML5

A new demonstration of the versatility of modern Web technologies just made a strong appearance through the interactive iPhone (News - Alert) 4 demo, which was created using CSS3, JavaScript, and HTML5 – with no images.

This amazing feat in design comes to us thanks to HTML5 and CSS (News - Alert) guru Vasiliy Zubach, also known as, TjRus. The reason is still unknown, but Zubach spent time working on rendering an iPhone using no images in his design and created an interactive demo available online.

The iPhone 4 rendering not only features the device itself, but also an impressive array of on-screen icons, all of which are made with code rather than images. The demo also includes fully functional features such as: the sleep/wake button, the home button, and the “slide to unlock” screen. All of these features work as expected. Zubach work contains up to 3,395 lines of CSS and 335 lines of jQuery-powered JavaScript code.

Drew Olanoff, Editor for The Next Web, said he couldn’t believe all of the work Zubach put into his demo. “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,” said Olanoff.

Olanoff said he wasn’t sure what sparked the interested in the first place. “I’m not sure if Zubach was just bored or someone dared him to do it,” said Olanoff. Olanoff isn’t setting records though as the first entrepreneur to try this stunt.

Back in November, Microsoft showed off its new Windows Phone (News - Alert) 7.5, which had an HTML5-based demo that the company said could be used on both the iPhone and Android phones. At the time Microsoft did something few other people in the technology world would have done and created a mobile experience that doesn’t attempt to duplicate anything else out in the market.

Microsoft’s (News - Alert) demo also allowed users to tap and swipe their way through a virtual Windows experience no matter which mobile device they were using. Users got to experience the way Windows Phones handle phone calls, photos, messaging, emailing, scheduling, and searching. It gave users a realistic feel for how the system works – similarly to that of what Zubach has done for the iPhone and iOS.

Zubach proved that there are many more possibilities for the iPhone’s future showing that the entire system can be rendered to work using a different platform and different coding. Zubach has convinced some users of the power of CSS3 and HTML5 with his interactive demo.

Edited by Carrie Schmelkin


HTML 5 Demos and Examples

HTML 5 experimentation and demos I've hacked together. Click on the browser support icon or the technology tag to filter the demos.... Learn More

HTML5 GAMES is the largest and most comprehensive directory of HTML5 games on the internet... Learn More

The HTML5 test

How well does your browser support HTML5?... Learn More

Working Draft (WHATWG)

This is the Editor’s Draft from WHATWG. You can use it online or print the available PDF version... Learn More

HTML5 Flip Book

Free jQuery and HTML5 flip book maker for PDF to online page turning book conversion... Learn More