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:
- The class ‘inner left cover’ mainly adjusts the color of 5 in the left.
Fine, that’s all of it.