Sự kiện

Thiết kế HTML 5 Logo với CSS

Danh mục: CSS
 

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.

css3, css3 logos, html5, logo, tạo logo

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.



BÀI VIẾT KHÁC
CODE GỢI Ý CHO BẠN
BÌNH LUẬN

BẢN QUYỀN ®
MANGUON.COM đã đăng kí quyền tác giả: AR1682/GP-STTTP
Mọi chia sẻ nội dung thuộc tác quyền của MANGUON.COM phải ghi rõ "Nguồn MANGUON.COM"