![]() To achieve this effect I applied transparency of 0.9 to the parent object. The reference weather icon image has slight transparency allowing the sun to shine through the cloud. 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 sun is 40 pixels by 40 pixels again this was me trying to get the dimensions right relative to the real icon. 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. 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. To simulate the icon of weather icon I simply used a gradient ranging from top to bottom specifying the colours shown above. We will start with the main icon and 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. 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 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 weather icon is deceptively simple to make. Weather Icon CSSĪlthough 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. Inside these two wrappers, we have the various components that make up the whole of the icon. Here we essentially have two wrappers, one for the weather icon and one for the notes icon. 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. 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. 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. What we will be creatingĪs 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. 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. Images are no longer required to replicate the design and function of an iOS icon. This has allowed for the creation of certain iOS 7 icons through the use of CSS and CSS only. With iOS 7 Apple went for a clean yet minimalistic design with their UI.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |