Made in CSS: iOS Icons and Others ...

Do you like the meme “Look at me doing something cool on pure CSS”? It delivers. On the one hand, such memes show how incredible things people can create, but on the other hand ... they remind us that we need tools to make our lives easier. But at least the platform is already here, and tools may appear later.

Lewis Harbaugh noted his purchase of the iPhone 4 with the creation of a set of iOS icons on pure CSS . Now we can look at his work, and the author tells about the 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, and then another neck rectangle and a distorted semicircle for the body. In order to get a curve from the shoulders to the neck, I placed two circles in the upper part of the icon.

The weather icon has several rays of light emitted from the sun. Each of these rays is actually a long rectangle with a gradient that turns into transparency at both ends. I used -webkit-transform: rotate to rotate each rectangle at 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 overlaid each other, on top of a rounded rectangle. A wider circle has a gradient that cuts off part of a rectangle.

Take a look at a complete example of the Calendar type:

.calendar {
background : #9B2424 ;
}
.calendar .header {
-webkit-border-top-left-radius : 30px ;
-webkit-border-top-right-radius : 30px ;
background : -webkit-gradient ( linear , 0 % 0 % , 0 % 100 % , from ( #EEC4C4 ) , to ( #521B1C ) , color-stop ( .92 , #da3434 ) , color-stop ( .1 , #ef9fa5 ) ) ;
height : 50px ;
width : 176px ;
-webkit-box-shadow : inset 0px 2px 1px rgba ( 255 , 255 , 255 , 0.4 ) ;
}

.calendar p .weekday {
color : #fff ;
font-weight : bold ;
text-shadow : 0px 1px 1px rgba ( 0 , 0 , 0 , 0.7 ) ;
width : 176px ;
line-height : 50px ;
font-size : 25px ;
text-align : center ;
}

.calendar p .daynumber {
color : #000 ;
font-weight : bold ;
text-shadow : 0px 1px 0px #fff ;
width : 176px ;
line-height : 126px ;
font-size : 130px ;
text-align : center ;
}

.calendar .paper {
-webkit-border-bottom-left-radius : 30px ;
-webkit-border-bottom-right-radius : 30px ;
background : -webkit-gradient ( linear , 0 % 0 % , 0 % 100 % , from ( #7A7A7A ) , to ( #EDEDED ) , color-stop ( .05 , #BFBFBF ) , color-stop ( .2 , #E3E3E3 ) ) ;
height : 126px ;
width : 176px ;
}

Sumptuously. One remarkable advantage of this approach is scalability. IPhone 4 users have already talked about how disgusting applications that are designed for low resolution look. Even Facebook apps ... the text looks great, but the icons seem to be made up of blocks.

By the way, some other great examples of CSS gradients are also on display .