This week's sponsor


Clean Up Your Inbox Today (and Keep It That Way Forever)

iPhone and iOS Icons Rendered Entirely in CSS

We've seen what it's possible to achieve with CSS before: the Opera logo, a Safari window built inside Safari itself, a Kinetic Type video. What about Apple-related stuff though? Now we have an iPhone and some iOS icons made entirely with CSS.

Jeff Batterton created an iPhone template using CSS3. Take a look here.

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

Louis Harboe took a different approach, and decided to try to render standard iOS icons such as Mail and Weather (the stock iPhone apps) with CSS. The result is stunning and available for your pleasure here.

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


Unlock MacStories Extras

Club MacStories offers exclusive access to extra MacStories content, delivered every week; it's also a way to support us directly.

Club MacStories will help you discover the best apps for your devices and get the most out of your iPhone, iPad, and Mac. Plus, it's made in Italy.

Starting at $5/month, with an annual option available. Join the Club.

A Club MacStories membership includes:

  • MacStories Weekly newsletter, delivered every week on Friday with app collections, tips, iOS workflows, and more;
  • Monthly Log newsletter, delivered once every month with behind-the-scenes stories, app notes, personal journals, and more;
  • Access to occasional giveaways, discounts, and free downloads.