Logo Nike đẹp ấn tượng được làm từ CSS3

Nhằm tiếp tục mang đến cho các bạn những mẫu logo được làm từ CSS3, hôm nay mình xin chia sẻ cho các bạn thêm một mẫu logo mới. Đó là logo của hãng Nike, với kiểu thiết kế này, các bạn có thể có thêm kinh nghiệm trong việc sử dụng thuộc tính CSS3 transform.

Sau đây là logo mà chúng ta sẽ có được khi hoàn thành bài viết :

Xem Demo | Download

HTML

Trước tiên, chúng ta cần khung html chuẩn sau để tạo logo Nike.

<div id="nike">
      <div class="canvas">
           <div class="icon">
               <div class="nike1"></div>
               <div class="nike2"></div>
               <div class="nike3"></div>
               <div class="nike4"></div>
               <div class="nike5"></div>
            </div>
        </div>
</div>

CSS

Và những đoạn css giúp chúng ta thiết kế logo Nike này :

#nike .canvas, .nike3,.nike5 {
    background: #ef3e1d;
}
/* general styles */
.canvas {
    display: block;
    overflow: hidden;
    position: relative;
    top: 0px;
    text-indent:-9999px;
    z-index: 10;
	height: 304px;
    awidth:540px;
}
.icon, .icon * {
    display: block;
    position: absolute;
}
#nike .icon {
    left: 52px;
    position: absolute;
    top: 105px;
    -o-transform: rotate(-23deg);
    -moz-transform: rotate(-23deg);
    -ms-transform: rotate(-23deg);
    -webkit-transform: rotate(-23deg);
    transform: rotate(-23deg);
}
.nike1,.nike2,.nike3,.nike4,.nike5 {
    position:absolute;
}
.nike1,.nike2 {
    background: #fff;
}
.nike1 {
    border-radius:101px/230px;
    height: 230px;
    left: 57px;
    top:-40px;
    -o-transform:rotate(67deg);
    -moz-transform:rotate(67deg);
    -ms-transform:rotate(67deg);
    -webkit-transform:rotate(67deg);
    transform:rotate(67deg);
    awidth:101px;
    z-index:11;
}
.nike2 {
    border-radius:101px/207px;
    height: 207px;
    left:53px;
    top:1px;
    -o-transform:rotate(84deg);
    -moz-transform:rotate(84deg);
    -ms-transform:rotate(84deg);
    -webkit-transform:rotate(84deg);
    transform:rotate(84deg);
    awidth:101px;
    z-index:12;
}
.nike3 {
    height: 80px;
    left:91px;
    top: 65px;
    awidth:124px;
    z-index:13;
}
.nike4 {
    border-top:39px solid transparent;
    border-right:0 none;
    border-bottom:5px solid transparent;
    border-left: 276px solid #fff;
    left:90px;
    top:112px;
    z-index:14;
}
.nike5 {
    border-radius: 97px/175px;
    height:175px;
    left:88px;
    top:-31px;
    -o-transform:rotate(67deg);
    -moz-transform:rotate(67deg);
    -ms-transform:rotate(67deg);
    -webkit-transform:rotate(67deg);
    transform:rotate(67deg);
    awidth:97px;
    z-index:15;
}

Còn có rất nhiều mẫu logo đang chờ các bạn thiết kế, hãy bắt đầu từ bài viết này, và tự tạo cho riêng mình một logo như ý nhé.

Chuyên Mục: Css

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