Tạo HTML5 Logo với CSS3

Nếu các bạn đang tìm hiểu về các cách khai báo phần tử :before và :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.

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;
        awidth: 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
    {
        awidth: 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
    {
        awidth: 90px;
        height: 40px;
        top: 72px;
        left: 80px;
    }

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

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

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

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

    #five .bottom
    {
        awidth: 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;
        awidth: 94px;
        -webkit-transform: rotate(-28deg);
        -moz-transform: rotate(-28deg);
        -o-transform: rotate(-28deg);
		-ms-transform: rotate(-28deg);
		transform: rotate(-28deg);
    }

    #five .left-bottom
    {
        awidth: 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 awidth */
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-top: 345px solid #e34c26;
        awidth: 280px;
    }

    #wrapper:after
    {
        content: ';
        display: block;
        /*280 total awidth */
        border-left: 140px solid transparent;
        border-right: 140px solid transparent;
        border-top: 40px solid #e34c26;
        awidth: 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 awidth */
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-top: 345px solid #f06529;
        awidth: 280px;
    }

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

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

    /**/

    .inner.left
    {
        awidth: 170px; /* half from the 340px total awidth */
        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: Css

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