With iOS 7 Apple went for a clean yet minimalistic design with their UI. This has allowed for the creation of certain iOS 7 icons through the use of CSS and CSS only. Images are no longer required to replicate the design and function of an iOS icon. Unfortunately, this tutorial or CSS trick poses no real-world value as it doesn’t really have a use for itself, although the end effect is certainly satisfactory.
What we will be creating
As you can see if you hover over either icon it will start to jiggle about a lot like the classic iPhone app animation that we are all familiar with. You can of course view the code from that embedded preview above, which is fine to copy however I will be explaining it all below. You may notice that the CSS animation goes a little wrong in that embedded CodePen, but I can assure you that it does work when tested locally anyway.
The HTML Layout
We will be using a very simple HTML layout as most of the magic is worked through the CSS for website design, not much really needs explaining here as it is pretty self-explanatory.
Here we essentially have two wrappers, one for the weather icon and one for the notes icon. Inside these two wrappers, we have the various components that make up the whole of the icon.
Weather Icon CSS
Although this isn’t necessary to the CSS trick I suggest you set a background other than white to ensure that certain elements of the icons show up more easily. I used #5fadd3 in this example.
The weather icon is deceptively simple to make. The base consists of a single 100 pixel by 100-pixel tile with a border-radius of 20 pixels, this gives an effect close enough to that of a true iOS icon. The sun is quite obviously a relatively small circle using a border radius of 100 per cent and of course the typical yellow colour of the sun. The cloud is the most complex part of the icon consisting of two oval shapes each of which vary in dimension and a small circle.
We will start with the main icon and the sun:
To simulate the icon of weather icon I simply used a gradient ranging from top to bottom specifying the colours shown above. To help with this step I did use a reference image of an iOS device running iOS 7, however, I of course have already done this for you.
We haven’t quite yet got to implementing the keyframes of the ‘jiggle’ animation so I won’t go into too much detail about that now. The sun is 40 pixels by 40 pixels again this was me trying to get the dimensions right relative to the real icon. We use a 100 per cent border-radius to ensure that we get a perfect circle, next we have to do a little bit of readjustment to get the sun in just the right place.
The reference weather icon image has slight transparency allowing the sun to shine through the cloud. To achieve this effect I applied transparency of 0.9 to the parent object. The following constituents of the cloud could then all have transparencies of 1.0 as they are relative to that of the parent object. Although this part is arguably rather complex there really isn’t too much to explain here as it is all about positioning the objects in just the right place.
Notes Icon CSS
The notes icon is somewhat easier to make as it doesn’t involve any complex shapes, although it can be quite finicky to get the lines in just the right place. For this icon, I set the main background colour as being the golden yellow colour. I then used a second element with a rounded left and right bottom border which overlaps the original gold colour. The lines were mostly made by repeating elements however there were a few exceptions.
The above CSS makes up the top half of the notes icon. Again as before we used a width and height of 100 pixels and a border-radius of 20 pixels. Note that we used the border-box tag on the note element as the border placed at the top of it causes the height of the icon to increase by 3 pixels. However, the border-box tag overrides this.
In the icon, I used three lines to match that of the reference notes icon. However, the final line had to be slightly altered so that it didn’t clip over the edge of the icon and cause it to look a little odd. To fix this we simply specified width of 90 pixels and a border radius of 3 pixels.
The ‘Jiggle’ Animation
The ‘Jiggle’ animation is fairly basic albeit may look slightly complex which is mostly due to the many prefixes that you see such as -WebKit, -mox and -o. Likely there are only really a couple of parts to understand.
The various keyframes are for Internet Explorer, Safari & Chrome, and Mozilla Firefox. As you can see this animation causes the icons to move one degree anti-clockwise and one degree clockwise roughly a couple of times a second. As you saw in the CSS code earlier we simply only have to call this animation. We use the infinite tag to declare that the icon animation should loop when the user has hovered over.