Skip to content →

HTML5 logo with CSS3

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 {
    width: 170px;
    overflow: hidden;
    -webkit-transform: scale(1);
    }
  8. The class ‘inner left cover’ mainly adjusts the color of 5 in the left.

Fine, that’s all of it.

以后还是少写点多贴图吧,突然发现Tumblr对代码的支持好糟糕。

View the demo.

html5logo

Published in 作品之类

2 Comments

发表评论

电子邮件地址不会被公开。 必填项已用*标注