Jaw-dropping image-free rendering of iPhone 4 written completely in CSS3

“This amazing feat in design comes to us thanks to HTML5 and CSS guru Vasiliy Zubach, also known as TjRus,” Drew Olanoff reports for TNW.

“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,” Olanoff reports. “That means there are no images in his design whatsoever.”

Olanoff reports that Zubach used “3,395 lines of CSS and 335 lines of Javascript” to create his iPhone 4. See it here.

Read more in the full article here.


    1. It would have been easy enough to do in Flash, by a Flash expert (as this CSS3 was done by an HTML5/CSS/JS expert). But, this proves that interactive content does not need to rely on that resource-hogging technology.

      However, the question is whether this was hand-coded or built using an HTML5/JS/CSS application builder. I suspect hand-coded, which is impressive, but indicates that building interactive HTML5 is still not as easy as available Flash development tools.

      1. There are quite few utilities which automate/convert designs into code — even from Adobe. So it is not necessary that this was done manually. However, I doubt that any software utility of today would allow to do this on this level, so the guy probably had to do a lot of manual fixing and fine tuning.

        1. The linked article refers to the creator as an “HTML and CSS guru”. Web development is part of my repertoire too, I’ve seen some of the mess that code generation tools produce, and a quick glance at the relevant Javascript and CSS code (and his bio) on the page suggests that except for the jQuery libraries, he wrote most if not all of that code it by hand.

  1. Don’t knock it. This is a good example that its possible to do this without FLASH! We all know that without exploring possibilities, we all go stagnant. Now the next step is to develop tools to allow engineers/coders/developers/designers to take it to the next level. Get rid of FLASH once and for all.

    1. Yeah, I tried opening it in Safari on my 4S and it crashed Safari, taking all my open tabs with it (I tried restarting, but it led me to Bookmarks instead of reopening my previously open tabs). I tried loading the page again when the only open tab had that on it and it crashed again.

Reader Feedback

This site uses Akismet to reduce spam. Learn how your comment data is processed.