Tạo HTML5 Logo với CSS3

22/03/2014

Nếu các bạn đang tìm hiểu về các cách khai báo phần tử :before:after, hoặc  các thuộc tính CSS3 opacity và transform , CSS borders để vẽ các hình dạng nhất định thì bài viết mà mình giới thiệu hôm nay sẽ giúp các bạn hiểu rõ hơn về những thuộc tính này. Trong bài viết này, chúng ta sẽ vẽ logo HTML5 và logo này sẽ chỉ được thiết kế bằng CSS thuần.

tao-html5-logo-voi-css3

Xem Demo | Download

HTML

Sau đây là khung html chuẩn cho việc tạo logo HTML5

<div id="wrapper">
    <div id="five">
        <div class="top"></div>
        <div class="left-top"></div>
        <div class="middle"></div>
        <div class="right"></div>
        <div class="bottom"></div>
        <div class="left-bottom"></div>
    </div>

    <div class="inner"></div>
    <div class="inner left"></div>
    <div class="inner left cover"></div>
</div>

CSS
Và chi tiết thiết kế logo bằng CSS như sau :

h1
    {
        font: bold 90px 'arial black';
        margin: 20px 0 0 0;
        text-align: center;
    }

    p
    {
        text-align: center;
    }

    /**/

    #wrapper
    {
        position: relative;
        width: 340px;
        margin: 10px auto 30px auto;
    }

    /**/

    #five
    {
        position: absolute;
        z-index: 1;
        top: 0;
    }

    #five div,  #five div:after
    {
        position: absolute;
        background: #fff;
    }

    #five .left-top
    {
        width: 40px;
        height: 130px;
        top: 72px;
        left: 70px;
        -webkit-transform: skew(5deg);
        -moz-transform: skew(5deg);
        -o-transform: skew(5deg);
		-ms-transform: skew(5deg);
		transform: skew(5deg);
    }

    #five .top
    {
        width: 90px;
        height: 40px;
        top: 72px;
        left: 80px;
    }

    #five .top:after
    {
        content: '';
        left: 85px;
        top: 0;
        height: 40px;
        width: 110px;
        -moz-transform: skew(-5deg);
        -webkit-transform: skew(-5deg);
        -o-transform: skew(-5deg);
		-ms-transform: skew(-5deg);
		transform: skew(-5deg);
    }

    #five .middle
    {
        width: 96px;
        height: 40px;
        top: 162px;
        left: 75px;
    }

    #five .middle:after
    {
        content: '';
        top: 0;
        left: 96px;
        width: 80px;
        height: 40px;
    }

    #five .right
    {
        left: 225px;
        top: 162px;
        height: 125px;
        width: 40px;
        -moz-transform: skew(-5deg);
        -webkit-transform: skew(-5deg);
        -o-transform: skew(-5deg);
		-ms-transform: skew(-5deg);
		transform: skew(-5deg);
    }

    #five .bottom
    {
        width: 90px;
        height: 40px;
        top: 260px;
        left: 87px;
        -webkit-transform: rotate(14deg);
        -moz-transform: rotate(14deg);
        -o-transform: rotate(14deg);
		-ms-transform: rotate(14deg);
		transform: rotate(14deg);
    }

    #five .bottom:after
    {
        content: '';
        left: 73px;
        top: -19px;
        height: 40px;
        width: 94px;
        -webkit-transform: rotate(-28deg);
        -moz-transform: rotate(-28deg);
        -o-transform: rotate(-28deg);
		-ms-transform: rotate(-28deg);
		transform: rotate(-28deg);
    }

    #five .left-bottom
    {
        width: 40px;
        height: 65px;
        top: 222px;
        left: 80px;
        -webkit-transform: skew(5deg);
        -moz-transform: skew(5deg);
        -o-transform: skew(5deg);
		-ms-transform: skew(5deg);
		transform: skew(5deg);
    }

     /**/

    #wrapper:before
    {
        content: '';
        display: block;
        /*340 total width */
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-top: 345px solid #e34c26;
        width: 280px;
    }

    #wrapper:after
    {
        content: '';
        display: block;
        /*280 total width */
        border-left: 140px solid transparent;
        border-right: 140px solid transparent;
        border-top: 40px solid #e34c26;
        width: 0;
        margin-left: 30px;
    }

    /**/

    .inner
    {
        position: absolute;
        top: 0;

        -moz-transform: scale(0.85);
        -webkit-transform: scale(0.85);
        -o-transform: scale(0.85);
		-ms-transform: scale(0.85);
		transform: scale(0.85);
    }

    .inner:before
    {
        content: '';
        display: block;
        /*340 total width */
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-top: 345px solid #f06529;
        width: 280px;
    }

    .inner:after
    {
        content: '';
        display: block;
        /*280 total width */
        border-left: 140px solid transparent;
        border-right: 140px solid transparent;
        border-top: 40px solid #f06529;
        width: 0;
        margin-left: 30px;

        position: relative;
        top: -1px; /* Fix spacing */
    }

    /**/

    .inner.left
    {
        width: 170px; /* half from the 340px total width */
        overflow: hidden;
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
    }

    .inner.left:before
    {
        border-top-color: #e34c26;
    }

    .inner.left:after
    {
        border-top-color: #e34c26;
    }

    /**/

    .inner.left.cover
    {
        z-index: 10000;
        opacity: 0.1;
    }

Mình mong là qua bài viết này, các bạn sẽ có thể tự thiết kế thêm nhiều logo mới, còn nếu muốn tìm hiểu thêm, thì có thể xem qua những mẫu thiết kế logo bằng CSS3 mà mình đã giới thiệu trước đây như logo Adidas, McDonalds .

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !