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.

  1. The text ‘HTML’;
  2. The wrapper itself, contains the whole logo;
  3. The ’#five’ div mainly defines the color of 5 and puts the 5 above the other divs.
  4. Put the divs ‘top’…’left-bottom’ together to creat the number 5.
  5. The Pseudo-classes ‘wrapper:before’ and ‘wrapper:after’ mainly defines the shape of the shield (The bigger one in deep orange).
  6. 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.
  7. 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 /> }
  8. The class ‘inner left cover’ mainly adjusts the color of 5 in the left.

Fine, that’s all of it.


View the demo.