Use CSS3 to create HTML5 Logo and CSS3 to create HTML5Logo
This article describes how to use the new style attribute of CSS3 to create an HTML5 Logo. Let's take a look at the final effect:
Do not doubt that the logo above is fully implemented by HTML + CSS. We divide the logo into three parts: the shape, the number 5, and the radiation background. Each part is implemented below.
Border shape
The TRIM shape is symmetric between the left and right sides. Therefore, we can complete the left half side first, and copy the right half side before modifying some parameters. The left half side is intended to be implemented using three Divs. two divs need to be skewed to a certain angle to implement the left and bottom sides of the border shape. Here, the skew of transform is used. The Code is as follows (note that only the webkit prefix style is used here, which is only supported by Chrome, Safari, and other Webkit kernel browsers ):
<! -- Left side -->
<Div class = "dark_orange" style = "left: 32px; width: 140px; height: pixel PX;"> </div>
<Div class = "dark_orange" style = "-webkit-transform: skewx (5deg); left: 16px; width: 100px; height: pixel PX;"> </div>
<Div class = "dark_orange" style = "-webkit-transform: skewy (15deg); top: 265px; left: 32px; width: 140px; height: 100px; "> </div>
The CSS style defines that all divs are absolutely positioned. The dark_orange class specifies an orange background:
Div {position: absolute}
. Dark_orange {background: # e15016}
Let's take a look at the effect:
Next we will copy the HTML again and modify some parameters as the right side of the thumbnail:
<! -- Right side -->
<Div class = "dark_orange" style = "left: 172px; width: 140px; height: pixel PX;"> </div>
<Div class = "dark_orange" style = "-webkit-transform: skewx (-5deg); left: 227px; width: 100px; height: pixel PX;"> </div>
<Div class = "dark_orange" style = "-webkit-transform: skewy (-15deg); top: 265px; left: 172px; width: 140px; height: 100px; "> </div>
The effect is as follows:
There is a light area in the right side of the border shape. We need to scale down the copy on the right side of the shield. In addition, we need to adjust some style attributes:
<! -- Inner -->
<Div style = "-webkit-transform: scale (0.82); left: 31px; top: 25px">
<Div class = "light_orange" style = "left: 172px; width: 140px; height: pixel PX;"> </div>
<Div class = "light_orange" style = "-webkit-transform: skewx (-5deg); left: 227px; width: 100px; height: 363px;"> </div>
<Div class = "light_orange" style = "-webkit-transform: skewy (-15deg); top: 282px; left: 172px; width: 138px; height: 100px; "> </div>
</Div>
Light_orange corresponds to a lighter background color:
. Light_orange {background: # ee6812}
Completed the following steps:
Number 5
Number 5 is composed of several Divs, And the skew effect is still controlled by skew:
<! -- 5 -->
<Div class = "light_gray" style = "height: 43px; width: 102px; left: 70px; top: 70px"> </div>
<Div class = "light_gray" style = "width: 46px; height: 216px;-webkit-transform: skewx (5deg); top: 70px; left: 75px; "> </div>
<Div class = "light_gray" style = "height: 43px; width: 95px; left: 77px; top: 156px"> </div>
<Div class = "light_gray" style = "height: 47px; width: 87px; left: 85px; top: 251px;-webkit-transform: skewy (15deg) "> </div>
<Div class = "white" style = "height: 43px; width: 102px; left: 172px; top: 70px"> </div>
<Div class = "white" style = "width: 46px; height: 216px;-webkit-transform: skewx (-5deg); top: 70px; left: 223px; "> </div>
<Div class = "white" style = "height: 43px; width: 95px; left: 172px; top: 156px"> </div>
<Div class = "white" style = "height: 47px; width: 87px; left: 172px; top: 251px;-webkit-transform: skewy (-15deg) "> </div>
The style corresponding to the light_gray class and the white class:
. Light_gray {background: # ebebeb}
. White {background: # fff}
We can see the following results:
To implement the number 5, we need to apply two "patches" in two locations ":
<! -- Patch -->
<Div class = "dark_orange" style = "height: 20px; top: 199px; width: 80px; left: 60px;"> </div>
<Div class = "light_orange" style = "height: 43px; top: 113px; width: 100px; left: 180px;"> </div>
Final effect:
Radiation background
Rotate is mainly used for radiation background. Here I paste the complete code:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Title> HTML5 logo </title>
<Style>
Div {position: absolute}
. Dark_orange {background: # e15016}
. Light_orange {background: # ee6812}
. Light_gray {background: # ebebeb}
. White {background: # fff}
. Beam {width: 1600px; height: 20px;-webkit-transform-origin: 800 10; top: 290px; left:-400px}
</Style>
</Head>
<Body style = "margin: 0; padding: 0">
<Div class = "bg" style = "width: 800px; height: 600px; background: # f2f2f2; overflow: hidden">
<Div class = "white beam" style = "-webkit-transform: rotate (5deg)"> </div>
<Div class = "white beam" style = "-webkit-transform: rotate (15deg)"> </div>
<Div class = "white beam" style = "-webkit-transform: rotate (25deg)"> </div>
<Div class = "white beam" style = "-webkit-transform: rotate (35deg)"> </div>
<Div class = "white beam" style = "-webkit-transform: rotate (45deg)"> </div>
<Div class = "white beam" style = "-webkit-transform: rotate (55deg)"> </div>
<Div class = "white beam" style = "-webkit-transform: rotate (65deg)"> </div>
<Div class = "white beam" style = "-webkit-transform: rotate (75deg)"> </div>
<Div class = "white beam" style = "-webkit-transform: rotate (85deg)"> </div>
<Div class = "white beam" style = "-webkit-transform: rotate (95deg)"> </div>
<Div class = "white beam" style = "-webkit-transform: rotate (105deg)"> </div>
<Div class = "white beam" style = "-webkit-transform: rotate (115deg)"> </div>
<Div class = "white beam" style = "-webkit-transform: rotate (125deg)"> </div>
<Div class = "white beam" style = "-webkit-transform: rotate (135deg)"> </div>
<Div class = "white beam" style = "-webkit-transform: rotate (145deg)"> </div>
<Div class = "white beam" style = "-webkit-transform: rotate (155deg)"> </div>
<Div class = "white beam" style = "-webkit-transform: rotate (165deg)"> </div>
<Div class = "white beam" style = "-webkit-transform: rotate (175deg)"> </div>
<Div class = "logo" style = "top: 120px; left: 229px;">
<! -- Left side -->
<Div class = "dark_orange" style = "left: 32px; width: 140px; height: pixel PX;"> </div>
<Div class = "dark_orange" style = "-webkit-transform: skewx (5deg); left: 16px; width: 100px; height: pixel PX;"> </div>
<Div class = "dark_orange" style = "-webkit-transform: skewy (15deg); top: 265px; left: 32px; width: 140px; height: 100px; "> </div>
<! -- Right side -->
<Div class = "dark_orange" style = "left: 172px; width: 140px; height: pixel PX;"> </div>
<Div class = "dark_orange" style = "-webkit-transform: skewx (-5deg); left: 227px; width: 100px; height: pixel PX;"> </div>
<Div class = "dark_orange" style = "-webkit-transform: skewy (-15deg); top: 265px; left: 172px; width: 140px; height: 100px; "> </div>
<! -- Inner -->
<Div style = "-webkit-transform: scale (0.82); left: 31px; top: 25px">
<Div class = "light_orange" style = "left: 172px; width: 140px; height: pixel PX;"> </div>
<Div class = "light_orange" style = "-webkit-transform: skewx (-5deg); left: 227px; width: 100px; height: 363px;"> </div>
<Div class = "light_orange" style = "-webkit-transform: skewy (-15deg); top: 282px; left: 172px; width: 138px; height: 100px; "> </div>
</Div>
<! -- 5 -->
<Div class = "light_gray" style = "height: 43px; width: 102px; left: 70px; top: 70px"> </div>
<Div class = "light_gray" style = "width: 46px; height: 216px;-webkit-transform: skewx (5deg); top: 70px; left: 75px; "> </div>
<Div class = "light_gray" style = "height: 43px; width: 95px; left: 77px; top: 156px"> </div>
<Div class = "light_gray" style = "height: 47px; width: 87px; left: 85px; top: 251px;-webkit-transform: skewy (15deg) "> </div>
<Div class = "white" style = "height: 43px; width: 102px; left: 172px; top: 70px"> </div>
<Div class = "white" style = "width: 46px; height: 216px;-webkit-transform: skewx (-5deg); top: 70px; left: 223px; "> </div>
<Div class = "white" style = "height: 43px; width: 95px; left: 172px; top: 156px"> </div>
<Div class = "white" style = "height: 47px; width: 87px; left: 172px; top: 251px;-webkit-transform: skewy (-15deg) "> </div>
<! -- Patch -->
<Div class = "dark_orange" style = "height: 20px; top: 199px; width: 80px; left: 60px;"> </div>
<Div class = "light_orange" style = "height: 43px; top: 113px; width: 100px; left: 180px;"> </div>
</Div>
<! -- End of logo -->
</Div>
<! -- End of bg -->
</Body>
</Html>
HTML5 logo is complete!
