Made in CSS: iOS Icons and more ...

Do you like the meme “look at me doing something cool with 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 Harbo celebrated his purchase of iPhone 4 with the creation of a set of iOS icons in pure CSS . Now we can look at his work, and the author talks about the ideas behind the implementation:

In the Contacts icon, I used 5 different shapes for the silhouette icon. The head is a rounded rectangle, 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 at the top 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 by 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 superimposed on top of a rounded rectangle. The wider circle has a gradient that cuts off part of the rectangle.

Take a look at the complete Calendar type example: Great. One great advantage of this approach is scalability. IPhone 4 users have already talked about how ugly applications that are designed for low resolution look. Even Facebook applications ... 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 .

.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;
}