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!.