用纯css实现的html5 logo标志

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

<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: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; } </style>

html代码如下

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

分享到：