Then I finished this.
月度归档: 2014年8月
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 {
width: 170px;
overflow: hidden;
-webkit-transform: scale(1);
} - The class ‘inner left cover’ mainly adjusts the color of 5 in the left.
Fine, that’s all of it.
以后还是少写点多贴图吧,突然发现Tumblr对代码的支持好糟糕。
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 ).