Ajax Loader

Single Element iPhone 5 using CSS3

Inspired by Kushagra Agarwal's Single Element iPhone 4S. See his here: http://cssdeck.com/labs/creating-single-element-iphone-using-css3

My edits to his original design here: http://cssdeck.com/labs/w1cxm0nr/469

This only works on Chrome and Safari browsers (Webkit).

I've created this iPhone 5 using Kushagra's structure. I've also made some changes to his code regarding the glass button and added bezels and highlights where it's due for a more realistic rendition. I haven't really did a full measure of exact pixels and basically eyeballed the details and hoped that I came across as accurate. :)

I've also found Matt Boldt's version which was done about a month ago which he used some interesting techniques in creating the speaker and the camera, which looks a bit better in certain areas. http://mattboldt.com/css3-iphone5/

I also have to thank Teehan+Lax for their high resolution image of the iPhone 5 as visual reference and of course for their excellent and hard work with the GUI PSD.

Future project is to create this all with "em" values for scalability. The other thing I tried was using radial gradients for the Home button, but that failed as I couldn't accurately place the ellipse in the center and overlapping over the entire button to get the curved shape. Any ideas?

btw, Looking for a dribbble invite. Anyone want to draft me? Thanks!

Feel free to leave comments!.



Coding Preferences






× New

Sign In to comment

Alfred Lee:

Haven't been around for a while, seems like it's now broken in Chrome after the last update. I need to start working on an em version :) and fix this.


Very well done!!! I'm truly amazed!!! Looking forward to an example using em`s. Really great work. Respect !!!

Rishabh :

You have passed all CSS3 tests. Ready to lead GothamWeb!


Your Default Settings - Preferences



(Errors from your JS or Pre-Processors code)

    CSSDeck G+