Pure CSS HTML5 Logo

HTML5 Logo made in Pure CSS by Darcy Clarke.

The original version only had the -moz and -webkit vendor-prefixes for the transform property, but I added the -o, -ms and the non-vendor prefix version (transform).

The demo basically uses the CSS3 transform property to achieve the HTML5 Logo by mostly skewing and rotating different HTML elements.

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>

CSS

/* HTML5 Logo
   ================================================== */

.html5 {
    width: 345px;
    height: 385px;
    display: block;
    margin: 20px auto;
    position: relative;
}

.html5 .icon { }

.html5 .icon .text { }

.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);
    -o-transform: skew(5deg);
    -ms-transform: skew(5deg);
    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);
    -o-transform: rotate(12deg);
    -ms-transform: rotate(12deg);
    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);
    -o-transform: skew(5deg);
    -ms-transform: skew(5deg);
    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: #ffffff;
    top: 72px;
    left: -3px;
    -webkit-transform: skew(-5deg);
    -moz-transform: skew(-5deg);
    -o-transform: skew(-5deg);
    -ms-transform: skew(-5deg);
    transform: skew(-5deg);
}

.html5 .icon .text .right .middle {
    display: block;
    position: absolute;
    width: 80px;
    height: 40px;
    background: #ffffff;
    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);
    -o-transform: skew(-5deg);
    -ms-transform: skew(-5deg);
    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);
    -o-transform: rotate(-12deg);
    -ms-transform: rotate(-12deg);
    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);
    -o-transform: skew(-5deg);
    -ms-transform: skew(-5deg);
    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 0px;
    height: 0px;
    margin: 0px 10px;
    width: 0px;
}

.html5 .icon .bg { }

.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);
    -o-transform: skew(-5deg);
    -ms-transform: skew(-5deg);
    transform: skew(-5deg);
}

.html5 .icon .bg .left {
    position: absolute;
    left: 24px;
    background: #e44c27;
    width: 170px;
    height: 350px;
    display: block;
    -webkit-transform: skew(5deg);
    -moz-transform: skew(5deg);
    -o-transform: skew(5deg);
    -ms-transform: skew(5deg);
    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 0px;
    height: 0px;
    margin: 0px 10px;
    width: 0px;
}

Pure CSS HTML5 Logo

HTML

CSS

Browser Screenshots (1)

More Items

iTunes 10 Storage Bar

CSS Text Line Fade Out...

CSS3 Range Slider...

Golden Text

Captain America's shield...

CSS Only Toggle

Twitter Bootstrap CSS3...

Form Controls From...

Add New Comment

Showing Comments

Submit Your Creation

Share

About

Login with

Recent Posts

Recent Snippets

Tags

Pure CSS HTML5 Logo

HTML

CSS

Browser Screenshots (1)

More Items

iTunes 10 Storage Bar

CSS Text Line Fade Out...

CSS3 Range Slider...

Golden Text

Captain America's shield...

CSS Only Toggle

Twitter Bootstrap CSS3...

Form Controls From...

Add New Comment

Showing Comments

Submit Your Creation

Share

About

Login with

Recent Posts

Recent Snippets

Tags

Share a Feedback