Html5 logo implemented with pure css

An html5 Logo implemented with css is mainly implemented using html and css technologies. The example is as follows:

Source code:
The css code is as follows:

<Style type = "text/css">
Html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
Margin: 0;
Padding: 0;
Border: 0;
Outline: 0;
Font-weight: inherit;
Font-style: inherit;
Font-size: 100%;
Font-family: inherit;
Vertical-align: baseline;
}
Blockquote: before, blockquote: after, q: before, q: after {
Content :"";
}
Blockquote, q {
Quotes :"""";
}
Body {
Line-height: 1;
Color: black;
Background: white;
}
Caption, th, td {
Text-align: left;
Font-weight: normal;
}
: Focus {
Outline: 0;
}
Table {
Border-collapse: separate;
Border-spacing: 0;
}
Ol, ul {
List-style: none;
}
A {
Font-family: Arial, Helvetica, sans-serif;
Font-size: 14px;
Color: #666;
Text-decoration: none;
Margin: 40px auto 0;
Display: block;
Width: 120px;
Text-align: center;
}
. Html5 {
Width: 345px;
Height: pixel PX;
Display: block;
Margin: 100px auto 0;
Position: relative;
}
. Html5. icon. text. left {
Display: block;
Position: absolute;
Width: 182px;
Height: 400px;
}
. Html5. icon. text. left. left {
Display: block;
Position: absolute;
Width: 40px;
Height: 130px;
Background: # ebeb;
Top: 72px;
Left: 82px;
-Webkit-transform: skew (5deg );
-Moz-transform: skew (5deg );
}
. Html5. icon. text. left. top {
Display: block;
Position: absolute;
Width: pixel PX;
Height: 40px;
Background: # ebeb;
Top: 72px;
Left: 80px;
}
. Html5. icon. text. left. middle {
Display: block;
Position: absolute;
Width: 96px;
Height: 40px;
Background: # ebeb;
Top: 162px;
Left: 88px;
}
. Html5. icon. text. left. bottom {
Display: block;
Position: absolute;
Width: 85px;
Height: 40px;
Background: # ebeb;
Top: 261px;
Left: 102px;
-Webkit-transform: rotate (12deg );
-Moz-transform: rotate (12deg );
}
. Html5. icon. text. left. vert {
Display: block;
Position: absolute;
Width: 40px;
Height: 70px;
Background: # ebeb;
Top: 222px;
Left: 95px;
-Webkit-transform: skew (5deg );
-Moz-transform: skew (5deg );
}
. Html5. icon. text. right {
Height: 400px;
Width: 150px;
Left: 182px;
Display: block;
Position: absolute;
Overflow: hidden;
}
. Html5. icon. text. right. top {
Display: block;
Position: absolute;
Width: 105px;
Height: 40px;
Background: # fff;
Top: 72px;
Left:-3px;
-Webkit-transform: skew (-5deg );
-Moz-transform: skew (-5deg );
}
. Html5. icon. text. right. middle {
Display: block;
Position: absolute;
Width: 80px;
Height: 40px;
Background: # fff;
Top: 162px;
}
. Html5. icon. text. right. right {
Display: block;
Position: absolute;
Width: 40px;
Height: 130px;
Background: # ffffff;
Top: 162px;
Left: 50px;
-Webkit-transform: skew (-5deg );
-Moz-transform: skew (-5deg );
}
. Html5. icon. text. right. bottom {
Display: block;
Position: absolute;
Width: 85px;
Height: 40px;
Background: # ffffff;
Top: 261px;
Left:-5px;
-Webkit-transform: rotate (-12deg );
-Moz-transform: rotate (-12deg );
}
. Html5. icon. overlay {
Height: 400px;
Width: 150px;
Left: 182px;
Position: absolute;
Display: block;
Overflow: hidden;
}
. Html5. icon. overlay. top {
Width: 160px;
Height: 300px;
Top: 28px;
Left:-35px;
Display: block;
Background: # f0652a;
Position: absolute;
-Webkit-transform: skew (-5deg );
-Moz-transform: skew (-5deg );
}
. Html5. icon. overlay. bottom {
Position: absolute;
Top: 328px;
Left:-180px;
Display: block;
Border-color: # f0652a transparent;
Border-style: solid;
Border-width: 35px 140px 0;
Height: 0px;
Margin: 0 10px;
Width: 0;
Font-size: 0;
Line-height: 0;
}
. Html5. icon. bg. middle {
Position: absolute;
Left: 132px;
Background: # e44c27;
Width: 50px;
Height: 355px;
Display: block;
}
. Html5. icon. bg. right {
Position: absolute;
Left: 166px;
Background: # e44c27;
Width: 170px;
Height: 350px;
Display: block;
-Webkit-transform: skew (-5deg );
-Moz-transform: skew (-5deg );
}
. Html5. icon. bg. left {
Position: absolute;
Left: 24px;
Background: # e44c27;
Width: 170px;
Height: 350px;
-Webkit-transform: skew (5deg );
-Moz-transform: skew (5deg );
}
. Html5. icon. bg. bottom {
Position: absolute;
Top: 350px;
Left: 30px;
Display: block;
Border-color: # e44c27 transparent;
Border-style: solid;
Border-width: 35px 140px 0;
Height: 0px;
Margin: 0px 10px;
Width: 0;
Font-size: 0;
Line-height: 0;
}
</Style>

The html code is as follows:

<Div class = "html5">
<Div class = "icon">
<Div class = "bg">
<Div class = "right"> </div>
<Div class = "left"> </div>
<Div class = "bottom"> </div>
<Div class = "middle"> </div>
</Div>
<Div class = "overlay">
<Div class = "top"> </div>
<Div class = "bottom"> </div>
</Div>
<Div class = "text">
<Div class = "left">
<Div class = "top"> </div>
<Div class = "left"> </div>
<Div class = "middle"> </div>
<Div class = "bottom"> </div>
<Div class = "vert"> </div>
</Div>
<Div class = "right">
<Div class = "top"> </div>
<Div class = "right"> </div>
<Div class = "middle"> </div>
<Div class = "bottom"> </div>
</Div>
</Div>
</Div>
</Div>

The preview effect is as follows: