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.
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?!
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!
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
If you are visiting with a non-webkit browser, this is what the iPhone CSS3 looks like in Google Chrome.
As expected, IE's interpretation is quite a bit different.
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
NOTE: This project will only work on a webkit browser and has only been tested in Google Chrome.
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.
Manmohanjit Singh
June 27, 2010
http://manmohanjit.com
Found another experiment, this time for iOS icons: http://blog.graphicpeel.com/post/740928981/ios-icons-made-in-pure-css
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).
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!
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!