Monday, June 28th, 2010

Made In CSS; iOS icons and more

Category: CSS

Do you enjoy the “looks at me build something cool in pure CSS”-meme? It is kinda fun. On the one hand is shows what amazing things people can build, and on the other…. it reminds us that we need some tools to help make life easier. At least the platform is here, and tools can come later.

Louis Harboe has followed up his purchase of an iPhone 4 with iOS 4 icons made with CSS. Now only do we get to see his work, but he talks about the high level ideas behind the implementation:

In the contacts icon, I used 5 different shapes for the silhouette icon. The head is a rectangle with rounded corners, followed by another rectangle for the neck and a distorted semi-circle for the body. In order to get the curve of the shoulders to the neck, I placed two circles on top of the shapes.

The weather icon has several rays of light shooting from behind the sun. Each one of these rays is actually a long rectangle with a gradient that fades to transparent on either end. I used -webkit-transform:rotate to rotate each rectangle to a different angle. The same effect was used for the iTunes icon.

To get the cloud icon on the iDisk icon, I used two circles layered on top of each other, above a rounded rectangle. The larger circle has a gradient that cuts off just before the rectangle.

Take a full example such as calendar:

  1. .calendar {
  2.     background: #9B2424;
  3. }
  5. .calendar .header {
  6.     -webkit-border-top-left-radius: 30px;
  7.     -webkit-border-top-right-radius: 30px;
  8.     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEC4C4), to(#521B1C), color-stop(.92,#da3434),color-stop(.1,#ef9fa5));
  9.     height: 50px;
  10.     width: 176px;
  11.     -webkit-box-shadow: inset 0px 2px 1px rgba(255, 255, 255, 0.4);
  12. }
  14. .calendar p.weekday {
  15.     color: #fff;
  16.     font-weight: bold;
  17.     text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
  18.     width: 176px;
  19.     line-height: 50px;
  20.     font-size: 25px;
  21.     text-align: center;
  22. }
  24. .calendar p.daynumber {
  25.     color: #000;
  26.     font-weight: bold;
  27.     text-shadow: 0px 1px 0px #fff;
  28.     width: 176px;
  29.     line-height: 126px;
  30.     font-size: 130px;
  31.     text-align: center;
  32. }
  34. .calendar .paper {
  35.     -webkit-border-bottom-left-radius: 30px;
  36.     -webkit-border-bottom-right-radius: 30px;
  37.     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7A7A7A), to(#EDEDED), color-stop(.05,#BFBFBF),color-stop(.2,#E3E3E3));
  38.     height: 126px;
  39.     width: 176px;
  40. }

Awesome. One nice thing about this approach is that it can scale. iPhone 4 users are already talking about how glaring it is when apps have low res assets. Even the Facebook applications…. the text looks great, but the icon is blocky.

Also, some other nice CSS gradient examples were put on display.

Posted by Dion Almaer at 6:14 am

3 rating from 1 votes


Comments feed TrackBack URI

Clever, but I do think SVG is going to be the way to go for doing stuff like this.

Comment by BWRic — June 28, 2010

I would have to agree with BWRic

Comment by genericallyloud — June 28, 2010

Why not SVG in css? To use an image in CSS you traditionally use url() which can now be a data uri. You also now have the gradient options. Why not svg? OK, not directly in the CSS file but maybe a url to an svg file. Or how about more functions like gradient that produce images. Simple shapes, etc. I would love to see something like that in CSS but I have no confidence that it will be done right or at all.

Comment by okonomiyaki3000 — June 28, 2010

Android (at least version 2.1) doesn’t support SVG. What a big FAIL for Google.

Comment by GreLI — June 28, 2010

is it just me or the demo works horribly bad in Chrome 5? What’s the point of these demos if they only work in a tiny percentage of the implementations of certain browser engine?
It’s just like if I went out to show how I do ActiveX on IE6 and you can’t on Safari. Does it work? YES. Is is useful? NO.

Comment by gonchuki — June 28, 2010

Surely I’m not the only one finding it odd how separation of concerns gets thrown completely out of the window with these crazy CSS3 demos? I know they’re mainly just for props, but I’d love to see some useful – as in real-world useful – examples of advanced CSS3 that don’t need 50kb+ of markup to show 7 icons in 2 browsers.

Don’t get me wrong, I applaud the effort, but it does get bit weary after a while..

Comment by kissmyawesome — June 28, 2010

You don’t need to throw separation of concerns out the window if you never let it in the house in the first place. Leave that trash out on the street.

Comment by okonomiyaki3000 — June 28, 2010

@gonchuki: Yep, this is a fail on Chrome 5.
@BWRic: Couldn’t agree more.
The cubiq CSS gradient examples are much nicer, but the loading bar doesn’t animate nicely.

Comment by Skilldrick — July 1, 2010

Leave a comment

You must be logged in to post a comment.