月度归档： 2014年8月

Then I finished this.

View the demo.

2 Comments

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.

2 Comments

I’ve been learning CSS3 recently.This image was finished by following the tutorial Happy Holidays with CSS3.

In this tutorial, I learned:

• How to use the function linear-gradient.
• Something about the Position property, especially ‘position:absolute’.
• How to make circles and triangles in CSS3, and put them into layers like Photoshop.

The turorial was very helpful which let me improve a lot ( Although the image is simple and not very beautiful:D ).

Click here to see my work.

2 Comments