Beautiful CSS graphics and HTML5, beautiful CSS graphics HTML5

Beautiful CSS graphics and HTML5, beautiful CSS graphics HTML5
1. HTML5 Basics

Document Type

<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> Transitional: Transition type Strict: Strict type FrameSet: framework type
<! DOCTYPE html>

Use the video and audio tags to play videos and audios

 <video controls>         <source src="video/video.webm" type="video/webm"/>         <source src="video/video.mp4" type="video/mp4"/>     </video>

 

 

2. Elastic box

 

Box-sizing: border-box/content-box (default)

 

 

3. rounded border

 

Border-raduis: top left, top right, bottom right, and bottom left.

 

 

CSS syntax is changing with each passing day, making it easy to do a lot of things that could not be done before. There are several new powerful CSS functions:

• Clip-path
• Shape-outside

Shape refers to a graph, and CSS shapes refers to a CSS image, that is, various shapes (such as circles, rectangles, rectangles, and polygon) are generated using CSS ).

Before CSS3, all we can do is rectangle, square, and box.

CSS3

After CSS3 came out, we had a broader display space.

• border-radius
• border
• transform
• Pseudo-element combination
• Gradient

We can make a lot of geometric figures.

Remove the most common rectangle, circle (border-radius), The following lists some other geometric figures:

// 01 css # circle {width: 300px; height: 300px; border: 1px solid red; border-radius: 10px; box-shadow: 5px 5px 5px green ;} <div id = "circle"> I am the div of the rounded edge </div> // 02 add an image to the circular css # circleshape {width: 300px; height: 300px; border: 1px solid red; border-radius: 150px; background: url ("img/001.jpg") 0px 0px no-repeat; background-size: cover; opacity: 0.7; transition: all 5S;} # circleshape: hover {transform: r Otate (300deg) scale (1.5); transition: all 5S linear ;} <div id = "circleshape"> I am a circular div </div> // 03 semi-circular CSS # halfcircle {width: 300px; height: 150px; border: 1px solid red; border-radius: 150px 150px 0px; background: linear-gradient (to top, pink, palegreen); background: radial-gradient (palegoldenrod, palevioletred );} <div id = "halfcircle"> I am a semi-circular div </div> // 04 1/4 circle # halfcircles {width: 150px; height: 150px; Border: 1px solid red; border-radius: 150px 0px 0px 0px;} <div id = "halfcircles"> I am a div with a 1/4 circle </div> # halfcircless {width: 150px; height: 150px; border: 1px solid red; border-radius: 0px 150px 0px 0px ;} <div id = "halfcircless"> I am a 1/4 circular div </div> # halfcirclesss {width: 150px; height: 150px; border: 1px solid red; border-radius: 0px 0px 0px 150px;} <div id = "halfcirclesss"> I am a div with a 1/4 circle </div> # halfcircl Essss {width: 150px; height: 150px; border: 1px solid red; border-radius: 0px 0px 150px 0px ;} <div id = "halfcirclessss"> I am a 1/4 circular div </div> # halfcircl {width: 300px; height: 150px; border: 1px solid red; border-radius: 0px 0px 150px 150px;} <div id = "halfcircl"> I am a semi-circular div </div> // 05: triangle. traingle {width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bo Ttom: 100px solid yellowgreen;} <div class = "traingle"> my triangle, I am div </div> // 06: corner: Multiple linear gradient to achieve corner cutting.. Notching {width: 40px; height: 40px; padding: 40px; background: linear-gradient (135deg, transparent 15px, yellowgreen 0) top left, linear-gradient (-135deg, transparent 15px, yellowgreen 0) top right, linear-gradient (-45deg, transparent 15px, yellowgreen 0) bottom right, linear-gradient (45deg, transparent 15px, yellowgreen 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat;} <Div class = "notching"> I am a tangent, and I am a div </div> // 07: elliptical. ellipse {width: 120px; height: 160px; background-color: yellowgreen; border-radius: 50% 50% 50% 50%/60% 60% 40% 40% ;} <div class = "ellipse"> I am an elliptical, and I am a div </div> 08: trapezoid: pseudo element plus rotating pivoting to achieve trapezoid. trapezoid {position: relative; width: 60px; padding: 60px ;}. trapezoid: before {content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: perspectiv E (20px) scaleY (1.3) rotateX (5deg); transform-origin: bottom; background: yellowgreen;} <div class = "trapezoid"> I am the short trapezoid above, I am a div </div>. trapezoids {position: relative; width: 60px; border-top: 60px solid yellowgreen; border-left: 40px solid transparent; border-right: 40px solid transparent ;} <div class = "trapezoids"> I am the short trapezoid below, and I am a div </div> // 09. pentagon: A trapezoid with a triangle can easily be combined into a pentagon. here we need to use a pseudo element :. pentagon {position: Relative; width: 60px; border-bottom: 60px solid yellowgreen; border-left: 40px solid transparent; border-right: 40px solid transparent ;}. pentagon: before {content: ""; position: absolute; top: 60px; left:-40px; border-top: 60px solid yellowgreen; border-left: 70px solid transparent; border-right: 70px solid transparent;} // look at the trapezoid above. If there are two trapezoid with the same size as the bottom side in the opposite direction, can we get a hexagonal shape. pentagon {position: Relative; width: 60px; border-bottom: 60px solid yellowgreen; border-left: 40px solid transparent; border-right: 40px solid transparent ;}. pentagon: before {content: ""; position: absolute; width: 60px; height: 0px; top: 60px; left:-40px; border-top: 60px solid yellowgreen; border-left: 40px solid transparent; border-right: 40px solid transparent;} // 11: solved by the octagonal hexagonal structure. The octagonal structure also adds two trapezoid shapes to a rectangle, you can synthesize an octagonal .. Octagon {position: relative; width: 40px; height: 100px; background: yellowgreen ;}. octagon: before {content: ""; height: 60px; position: absolute; top: 0; left: 40px; border-left: 30px solid yellowgreen; border-top: 20px solid transparent; border-bottom: 20px solid transparent ;}. octagon: after {content: ""; height: 60px; position: absolute; top: 0; left:-30px; border-right: 30px solid yellowgre En; border-top: 20px solid transparent; border-bottom: 20px solid transparent;} // 12: five-pointed star. After exploring the polygon, we will continue to explore the X-Angle Star. Let's take a look at how Wuxing can be implemented? Of course, it's just coming out --★☆. Star {margin: 50px 0; position: relative; width: 0; border-right: 100px solid transparent; border-bottom: 70px solid yellowgreen; border-left: 100px solid transparent; transform: rotate (35deg) scale (. 6 );}. star: before {content: ''; position: absolute; border-bottom: 80px solid yellowgreen; border-left: 30px solid transparent; border-right: 30px solid transparent; top: -45px; left:-65px; transfo Rm: rotate (-35deg );}. star: after {content: ''; position: absolute; top: 3px; left:-105px; border-right: 100px solid transparent; border-bottom: 70px solid yellowgreen; border-left: 100px solid transparent; transform: rotate (-70deg);} // 12: What about hexagonal star? Imagine a triangle that is raised to the top, and a triangle that is stacked to the bottom, you can get a hexagonal shape :. sixstar {position: relative; width: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid yellowgreen ;}. sixstar: after {content: ""; position: absolute; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid yellowgreen; top: 30px; left:-50px;} // 13: What about octal star? There are so many eight corners. In fact, we can use two rectangles for rotating and splicing .. Eightstar {position: relative; width: 100px; height: 100px; background-color: yellowgreen; transform: rotate (30deg );}. eightstar: before {content: ""; position: absolute; top: 0; left: 0; width: 100px; height: 100px; transform: rotate (45deg ); background-color: yellowgreen;} // 14:. At last, there will be another twelve-level angular star. On the basis of the star, add a rectangle to get the twelve corners. That is, to pass the first pseudo element .. Twelvestar {position: relative; width: 100px; height: 100px; margin-bottom: 100px! Important; background-color: yellowgreen; transform: rotate (30deg );}. twelvestar: before {content: ""; position: absolute; top: 0; left: 0; width: 100px; height: 100px; transform: rotate (30deg ); background-color: yellowgreen ;}. twelvestar: after {content: ""; position: absolute; top: 0; left: 0; width: 100px; height: 100px; transform: rotate (60deg ); background-color: yellowgreen ;}