Apple is talking about the retina display and magical experience of iOS products like iPhone and iPad. But the magical experience crafted by Vasiliy Zubach is amazing as he created Apple iPhone 4 display on web by just using CSS3 and HTML code. Believe it or not, the complete display is not having a single image but the screen and the experience is just as smooth as the physical device.
Features and options in iPhone 4 CSS3
‘Slide to Unlock’ animation
Lock/Unlock sound, On/Off sound
iPhone Alert box
Change the color of iPhone, its like having different iPhone cover or sleeve. By changing color, you can see how it looks as White iPhone 4
iPhone icon animation – just amazing
Zoom-in to see the minute details of the icons and as they are made of CSS3, you will see clear icons even on complete zoom
Details related to this project
Total number of hours involved in this project – 35 hours
Software used – Espresso for HTML and CSS3 and Coda for Scripts
Hardware used – Apple MacBook Pro with i7 processor and 8GB RAM
Total Visits on the site in just 30 days – 396,517
Total Pageviews in 30 days – 555,987
When Pingdom team asked Zuback that how he came up with the idea of making iPhone 4 with CSS3 and HTML code, he said
One day at my current job a coworker showed me some cool icons made entirely in CSS3. If you know anything about CSS, you would have been amazed just as I was, so when I saw that, I just said to myself “I can do that too and I can make it even better!” But I couldn’t just do the same thing, that didn’t make any senses. So I decided to go further. I decided to make a whole iPhone with icons and everything in CSS3.
Zubach, also known as TjRus, is very much involved in development works related to Apple iPad and iPhone. We will look forward to see such an amazing products coming out of his inventory.