css做html5logo,用纯css实现的html5 logo标志

一个用css实现的html5 Logo，主要用html和css技术实现，例子如下：

源代码下载地址：

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:385px;

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:#ebebeb;

top:72px;

left:82px;

-webkit-transform:skew(5deg);

-moz-transform:skew(5deg);

}

.html5 .icon .text .left .top {

display:block;

position:absolute;

width:104px;

height:40px;

background:#ebebeb;

top:72px;

left:80px;

}

.html5 .icon .text .left .middle {

display:block;

position:absolute;

width:96px;

height:40px;

background:#ebebeb;

top:162px;

left:88px;

}

.html5 .icon .text .left .bottom {

display:block;

position:absolute;

width:85px;

height:40px;

background:#ebebeb;

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:#ebebeb;

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 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 transparent;

border-style:solid;

border-width:35px 140px 0;

height:0px;

margin:0px 10px;

width:0;

font-size:0;

line-height:0;

}

html代码如下

预览效果如下：

声明：本文原创发布php中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理

相关标签：css