[Css] I want to use css to draw images (4) and css to draw images.

[Css] I want to use css to draw images (4) and css to draw images.

Next I used the previous [css] To draw images with css (3). Today I drew two clouds and introduced James to a friend: Quiet.

 

Github: https://github.com/bee0060/Css-Paint, complete code available in pages/sun-house-4.html and related css

Demo: http://bee0060.github.io/Css-Paint/pages/sun-house-4.html

 

The complete html is as follows:

1 <! DOCTYPE html> 2  

This time I made some changes to human.css, mainly adding the following content:

1. the human-pos-1 {2 left: 250px; 3 bottom: 25px; 4} 5 6. the human-pos-2 {7 left: 40px; 8 bottom: 60px; 9} 10 11. human-legs-1 {12 border: 3px solid #000; 13 border-bottom: none; 14 border-right: none; 15 height: 50px; 16 left: 55px; 17 position: absolute; 18 top: 120px; 19 width: 50px; 20 21-webkit-transform: rotate (-2deg); 22-webkit-transform-origin: 1px 1px; 23}Human.css Modification

 

The cloud css is as follows:

1. cloud {2 height: 150px; 3 width: 250px; 4} 5 6. cloud-pos {7 position: absolute; 8} 9 10. cloud-pos-1 {11 left: 35%; 12 top: 25px; 13} 14 15. cloud-pos-2 {16 left: 60%; 17 top: 25px; 18} 19 20. cloud-bg {21 background-color: skyBlue; 22} 23 24. cloud-border {25 border: 2px solid #000; 26} 27 28. cloud-top {29 border-radius: 100%; 30 border-width: 0px; 31 height: 100px; 32 left: 50%; 33 margin-left:-75px; 34 width: 150px; 35} 36 37. cloud-left {38 border-radius: 100%; 39 border-width: 0px; 40 height: 100px; 41 margin-top:-50px; 42 top: 60%; 43 width: 100px; 44} 45 46. cloud-right {47 border-radius: 100%; 48 border-width: 0px; 49 height: 100px; 50 margin-top:-50px; 51 right: 0; 52 top: 60%; 53 width: 100px; 54} 55. cloud-bottom {56 border-radius: 100%; 57 border-width: 0px; 58 height: 100px; 59 left: 53%; 60 margin-left:-75px; 61 margin-top:-50px; 62 top: 65%; 63 width: 150px; 64}Cloud.css

 

No strange css is used here. One discovery is that there is still the skyBlue color.

Here, the cloud is composed of four circles in different shapes, mainly using the rounded corner attributes and location attributes.

 

After the painting, I also checked the detailed introduction of border-radius in the following MDN to further understand it. Here we provide the link to the MDN document (the content is large, and I think it is redundant to repeat it, I am also worried that this may cause misleading information. It may be better to directly read the document ):

Https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius

Very detailed. I found that I used it quite lightly.

 

This is today. Thank you for watching. If any error occurs, please correct it.

 

PS: This demo of code pen is removed, because code pen copies the code in multiple css files one by one each time, which is troublesome. However, if the viewer thinks that code pen looks better, leave a message to tell me, and I will add it back.