Web Version of Apple iPhone 4 created with CSS3 Only, No Image used

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.


Other Screenshots

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.

15 Wireframing Tools to design iOS, Android and Web Application Mockups

Wireframes are essential component of the design process for any product. If you are working on the designing of a new Android App, first you should think about designing the whole app in wireframe to visualize the application. This will reduce the complexity of the application as well as lower down the chances of last minute changes. Which mean saving in time and total cost of the development.