iOS Icons in Pure CSS

Here are the 11 iOS icons made in only CSS, no images whatsoever.
NOTE: This demo will only work correctly on a webkit browser and has only been tested in Safari 5 and Google Chrome 5. Here’s how it will look when rendered correctly.

How was it done?

The following demo was made using a variety of CSS techniques. Rounded corners, shadows, gradients, rgba, pseudo-elements, and transforms are just some of them. A lot of these were generated by helpful tools, such as westciv’s tools and Border Radius. By combining these techniques, you can create rich graphics with just a few lines of code. Here are a few examples.



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.
Lastly, during this process I came up with two big CSS requests. CSS polygons/triangles and CSS noise. Hands anyone?
Of course, to all of those that feel that this is utterly pointless, I agree (kind of). CSS is the wrong tool for creating icons I will admit, we’re better off using images, SVG, or Canvas then bloating CSS documents. So what is the point of this? To show what’s possible with CSS, not necessarily what it should be used for. Also, it’s fun to look at, and interesting to dig into. If this was made in SVG would it have been as popular as it is right now? No. People like these sort of things, no doubt and I do too.

Inspiration

I wouldn’t/couldn’t have done it without some inspiration and help. Tutorials, examples, and blog posts play a big part in the making of the project. If you liked this demo, you’ll love these. If you know any other awesome demos like this, be sure to tell me.