I’ve drawn the HTML logo by following the tutorial HTML5 logo using CSS3 this afternoon. It looks a little complex but actually easy.Let’s put the code into parts.
- The text ‘HTML’;
- The wrapper itself, contains the whole logo;
- The ’#five’ div mainly defines the color of 5 and puts the 5 above the other divs.
- Put the divs ‘top’…’left-bottom’ together to creat the number 5.
- The Pseudo-classes ‘wrapper:before’ and ‘wrapper:after’ mainly defines the shape of the shield (The bigger one in deep orange).
- The Pseudo-classes ‘inner:before’ and ‘inner:after’ defnes the shape of the shield in light orange.This shield is in the same size as the deepper one, but the property ‘transform: scale(0.85)’ of the class inner make this shield smaller.
- The class ‘inner left’ contains all the properties of the class ‘inner’.It shows half of the bigger shield in the left above the div of the smaller shield:
.inner.left {<br /> width: 170px;<br /> overflow: hidden;<br /> -webkit-transform: scale(1);<br /> } - The class ‘inner left cover’ mainly adjusts the color of 5 in the left.
Fine, that’s all of it.
以后还是少写点多贴图吧，突然发现Tumblr对代码的支持好糟糕。
