iPhone CSS3

A photo-realistic CSS illustration of an iPhone using no images.

On nearly every project, I will use at least one property of CSS3 to enhance the user experience. These typically include drop shadows and round corners. I decided to look deeper into advanced CSS just to see what I could come up with.

Inspiration

It all started when David DeSandro began sharing his experiments with CSS3, including this beautiful all-CSS rendition of the Opera Logo. This really caught my attention and I decided that I'd give it a go. I didn't know exactly what to design and then Alex Giron posted his animated CSS Solar System project. Wowzers, right?!

Evolution

I decided to make an all-CSS clock. I began to work on it and when it was nearly complete, I came across another all-CSS clock. I wanted my idea to be original so I put the project on hold for a while until I could come up with a new approach.

Sometime later, I decided to skin my clock like the iPhone world clock. But that wasn't quite enough. I decided to recreate the entire iPhone world clock app with CSS. I decided to take it one step further and go with the entire iPhone - sans images!

Execution

Most of the methods and properties I used are pretty simple and straightforward (border-radius, box-shadow, gradient), and some of them are a little more complicated (transform, box-reflect). All together, I was/am pretty pleased with the final product. While it's not perfect, I think it's about as close as one can get without using images.

Well, enough talking! Let's get on with the show. Here it is - iPhone CSS3

Screenshot

If you are visiting with a non-webkit browser, this is what the iPhone CSS3 looks like in Google Chrome.

What about Internet Explorer?

As expected, IE's interpretation is quite a bit different.

Look *slightly* familiar?

If you have any questions or comments, please feel free to leave them below.

Also, if you enjoyed this project, go ahead and spread the word.

Later,
Jeff

— What people are saying —

college board February 21, 2011
http://www.collegeboard.org/

That is how the iPhone would have looked if Microsoft designed it. Very impressive work.
Stewart January 31, 2011
http://www.zipbox.co.uk

Really cool idea. About time Firefox released V.4 me thinks!!!
salwar January 26, 2011
http://www.sareez.com/

CSS3 can make an image also.. good to know that...
Mau January 25, 2011

Mozilla people, please have a look! Anyone knows if FF 4 is addressing this issues?
Crystal January 25, 2011

This is absolutely incredible! Well done!
Mika January 25, 2011

Hwwwaaauuuu! Well Done!
Neil Wheatley January 25, 2011
http://www.wheatleycopywriting.co.uk

You're a genius and I take my hat off to you!
DennisJZH January 17, 2011
http://www.gwtmobile.com

Peed in my pants twice: one when I saw the moving clocks and icons, two when I realized the iphone "image" is also created in CSS3! Can you create an Android version, too? :-)
Nessie December 13, 2010

Very nice!
Ethan November 29, 2010
http://www.y8zone.com

Impressive and cool... But love it more if it will work on Opera.
bsides November 4, 2010

Awesome job man, greetings from Brasil!
paul September 30, 2010

That is amazing!!
Guti September 22, 2010
http://guti.bitacoras.com

It is not working in Opera!
Sam September 14, 2010

Very impressive!!
Jeff Batterton September 12, 2010
http://jeffbatterton.com

@Idan - Glad you liked it. This project was setup for webkit browsers only. While you can replicate some of these effects with other browsers (non-webkit), it would have to be setup quite a bit differently.
Idan September 12, 2010
http://www.pilpilon.co.il

Absolutely loved it. I didn't eve imagine that is is possible using only CSS. Now I am confused. Why IE and Firefox don't have support for all CSS3 features??
Lukas September 6, 2010
http://lukasarts.info

Unbelievable! Very impressive work.
Miniclip September 2, 2010
http://www.miniclip360.com/

Very Cool! to all please read the note at the upper right corner. NOTE: This project will only work on a webkit browser and has only been tested in Google Chrome. I think its a great challenge for us make this stuff work with Firefox. Will try creating one for Firefox. :) And I'm gonna use the interface for my website's chat panel. Good job Jeff!
rory September 2, 2010
http://www.webdesignkc.co.uk/

PURE CSS - that has just blown my mind
Tassadar August 28, 2010

Image from IE is completely useless, since you are using only -webkit-* attributes in css file :) but anyway, good job!
Matthew August 13, 2010
http://mattssiteblog.x10.mx/

Add a some Javascript, and you could have a fully functional iPhone!
Auré July 29, 2010
http://all-for-design.com/portfolio

Really, really well done... Congrats man it's impressive.
Polloss July 12, 2010
http://twitter.com/polloss

I've tested it in Safari 5.0 and it works!! Looks exactly like the pic on Chrome.
Dennis K. July 12, 2010
http://www.twitter.com/wottpal

This Kind of iPhone doesn't exist. Border of 3GS and Volume buttons of an iPhone 4. But nice Code!
McBonio July 12, 2010
http://www.tropicaweb.co.uk

wow, VERY impressive.. clever take on it :)
Emerald Ringer July 12, 2010

Awesome. Great job. This inspires me to delve deeper into better understanding the CSS I work with on a daily basis. Maybe I'll start with a lynda tutorial.
Andreas Jacob July 12, 2010
http://cordobo.com/

Good job! I would love to see this working in Firefox as well ;-)
Dan Gayle July 7, 2010
http://www.dangayle.com/

You could still get the gradients in IE, OR rounded corners (perhaps). Alas, can't do both because the dumb browser won't allow that. You should be proud that the IE rendering at least has the elements in the right spots :)
Arlene July 5, 2010
http://arlenewalters.carbonmade.com

Ah, these are the things copywriters like me dream of. Gorgeous in it's simplicity.
Aaron Mc Adam July 2, 2010

Really brilliant! Can you stick this up on GitHub man?
noizee July 1, 2010
http://www.noizee.de

Looks pretty well on the iPad, too :)
Jeff Batterton June 30, 2010
http://jeffbatterton.com

@Ice - It's still -webkit. (Chrome and Safari only) :-)
ice June 30, 2010
http://2ndsky.org/blog/

I tried to view this in Firefox 3.6.6, still squarish~
Jeff Batterton June 30, 2010
http://jeffbatterton.com

@JosephJaber - You're calling all browser-generated bitmaps 'images', which includes shadows, borders, and even background-color. In this opinion, unless you have nothing but text, you wouldn't have an image-free project. And I don't know if you looked under the hood, but this thing certainly wasn't designed for performance.
JosephJaber June 30, 2010

I must say. To be honest this doesn't quite use *no* images. When you use CSS Gradients, Safari simply generates a bitmap that is handled no different from any other image. From that angle, there was no performance benefit to doing so. Only more dynamically easy to generate said images through CSS instead of a graphics editor.
Jeff Batterton June 30, 2010
http://jeffbatterton.com

@Jacob - You're right! lol
Jacob June 30, 2010

The IE version looks like "Windows Phone 7 Series"... edgy
Jeff Batterton June 30, 2010
http://jeffbatterton.com

@Yousef - Thanks! I plan to...
@Christine - Thanks!
Christine Fürst June 30, 2010
http://www.webfabriek-rotterdam.nl/

WOW! Respect
Yousef June 29, 2010
http://www.webtizer.com

Really wow, i liked it .. keep impressing us
Jeff Batterton June 29, 2010
http://jeffbatterton.com

@Yann - You're so welcome! Yeah, this demo was set up specifically for -webkit browsers. Some of the CSS properties would need to be changed in order for it to work on Firefox or Opera.
Yann June 29, 2010
http://www.sleekgear.org

Jeff , Thank for your gift :)) , in Safari 5.0, Chrome 5.0 (Mac) your watch work perfectly but in Opera 10.54, and in Firefox 3.6.6 don’t work at all exactly like in IE ….
Jeff Batterton June 29, 2010
http://jeffbatterton.com

@Yann - Absolutely. However, I suggest that instead of just copying it, you should look into it and understand how it works. But yes, my clock is your clock. :)
@DLG - True. The original plan included a script to update the time. However, I felt that adding a script would take away from the simplistic beauty of "all-CSS".
@Steven - You're exactly right. All Apple product shots of the iPhone (and iPad) display 9:41am PST as the current time.
Steven Don June 29, 2010
http://www.shdon.com/

I assume the time being incorrect is due to Steve Jobs' habit of introducing new products roughly 40 minutes into the keynote, which starts at 9 AM. Hence, Apple product shots tend to have times like 9:40, 9:41 or 9:42 in their mockups.
DLG June 29, 2010

Looks lovely but the time is wrong.
Yann June 29, 2010
http://www.sleekgear.org

can i use your world clock in my website ?
@bnolan June 28, 2010

DO NOT WANT
Jeff Batterton June 28, 2010
http://jeffbatterton.com

@Manmohanjit - Thanks for catching that!
Manmohanjit June 28, 2010
http://manmohanjit.com/

You have a problem in your latest post. The demo doesn't work because you didn't close the title tag. I posted a comment, telling you that. I included the title HTML title tag and everything else after my comment disappeared. Use the strip_tags() or htmlspecialchars() function :)
Jeff Batterton June 28, 2010
http://jeffbatterton.com

@Jason - Thanks so much!
@Eric - I don't. Thanks!
Eric June 28, 2010

Jeff do you make android apps because if you did you would be very successful, due to the wonderful UI
Jason June 28, 2010
http://skileases.com

This is super cool man! Great job.
Jeff Batterton June 28, 2010
http://jeffbatterton.com

@Billso - Anytime! lol
billso June 28, 2010
http://billso.com

Ah, thanks for including Honolulu. :)
Jeff Batterton June 28, 2010
http://jeffbatterton.com

@Paul - HA! It actually would've been quite easy to replicate the iPhone 4 because of it's flat edges and such.
paul June 28, 2010

How much is the upgrade to iPhone 4? :^p
Jeff Batterton June 28, 2010
http://jeffbatterton.com

@Michel - Yeah, I'm just partial to webkit! ;-) Thanks! It was a lot of fun!
Michel June 28, 2010
http://www.optimiced.com

Looks quite well in Safari 5/Mac. Firefox could be easily supported, too (except for the animations) but even when built for Safari/Chrome only, it looks like this CSS3 task took too much time... :) Great job!
Jeff Batterton June 28, 2010
http://jeffbatterton.com

@Brian - Thanks so much! Let me know when you do. I'd love to see it!
brian June 28, 2010
http://www.creativewhirlwind.com

Amazing and inspiring work. I'm going to have to try to come up with something experimental now. Nice work!
Jeff Batterton June 27, 2010
http://jeffbatterton.com

@Ryan - HAHA! For real...it probably would have a slide keyboard too! I'm not real sure how long it took. I worked on it on spare time and it took about three weeks.
Ryan Evans June 27, 2010
http://www.RandMediaGroup.com

That is how the iPhone would have looked if Microsoft designed it. Very impressive work. How long did that take you?
Jeff Batterton June 27, 2010
http://jeffbatterton.com

@Viraj - You're right. However, I don't think I really dissed MS. The main reason I posted the IE screenshot is because it slightly resembled Windows Mobile 7's layout. And I didn't dis Firefox because I know that everything I did with this project can be closely replicated with Firefox. 'Childishness' certainly wasn't the aim.
@Steven - True. Firefox can. I just prefer using -webkit browsers for projects like this. And yes, I'm making the browser my slave with this project.
@Manmohanjit - That is HOT!
@Joe - That's bomb!
@Dennis - I wasn't sure but since this is just a demo, I didn't research it.
@Lea - Thanks for clearing that up.
Lea Verou June 27, 2010
http://leaverou.me

@Dennis: No, it's not.
Dennis File June 27, 2010

Is it legal to use the Myriad Pro font for @font-face embedding?
Joe June 27, 2010

Works on the new safari browser that comes with iOS 4 on my iPod touch.
Steven Don June 27, 2010
http://www.shdon.com/

Agreed with Viraj. Firefox *can* do most of the stuff you have in there, the gradients and border-radius being the most significant of that, with a few extensions on the CSS. In fact, IE9 shall be capable of those same things. That said, it does look rather impressive. I'm a bit surprised at how CPU heavy it is. At first I thought it was the actual iPhone page, but it appears that Chrome simply uses 100% CPU whenever any page on your site is displayed in the active tab (dropping to near 0 when it is not the active tab).
Viraj June 27, 2010

Great work. Isn't it a little unfair to dis IE though, given that you're using webkit specific css rules? And why'd you not dis Firefox? Such bias/childishness tarnishes an otherwise impressive accomplishment
Jeff Batterton June 26, 2010
http://jeffbatterton.com

@Luke - Thanks!
@Connor - Thanks! Yes this project was a blast!
@Richard - Thanks! Funny thing about that. I started working on this several weeks before the iPhone 4 announcement and I had already completed most of the hardware but I was so tempted to change it!
@Estelle - That is hot! I've thought of doing other apps like calendar and calculator.
@Carlos - Yeah, it's only set up for -webkit browsers. I'm partial that way. ;-)
@Manmohanjit - Thanks! I've been procrastinating setting up RSS, but I'm working on it now. I'll contact you with the details when it's ready.
Manmohanjit Singh June 26, 2010
http://manmohanjit.com

Wait... how do I subscribe to your RSS Feed?
Manmohanjit Singh June 26, 2010
http://manmohanjit.com

That's really impressive, I've subscribed to your site hoping to see more cool stuff :)
Carlos June 26, 2010
http://www.ekosdeux.com

I tried on Firefox, and it was like IE. Safari on the other hand was good.
Estelle June 26, 2010
http://www.standardista.com/css3-native-iphone-app

Oh, what fun. I did a similar project - http://www.standardista.com/css3-native-iphone-app. The native iPhone app with CSS3 only, no image. Background stripes are done with native linear gradients. Now with Safari 5 supporting inset shadows we can make much better looking buttons.
Richard Sweeney June 26, 2010
http://www.richardsweeney.com

fantastic! You'll have to do the iPhone 4 next!
Connor Montgomery June 26, 2010
http://www.connormontgomery.com

This is outstanding. Definitely looks like a fun little project to try out myself!
Luke Dorny June 26, 2010
http://lukedorny.com

Very impressive, Jeff. Love it. Shows up nearly perfect in Safari 5 mac, too.
Jeff Batterton June 25, 2010
http://jeffbatterton.com

@Lea - Thanks so much!
Lea Verou June 25, 2010
http://leaverou.me

Wow, this is really impressive stuff Jeff! Congrats!