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

Xem: 969    Tải: 0   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Nghệ thuật - Nhiếp ảnh

0 điểm   ( 3 đánh giá ) File đã được kiểm thử

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 :

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;
    width: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);
    width: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);
    width:101px;
    z-index:12;
}
.nike3 {
    height: 80px;
    left:91px;
    top: 65px;
    width: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);
    width: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é.

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

Hướng dẫn làm Logo Nike đẹp ấn tượng được làm từ CSS3 Đăng ngày 08-08-2014  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. 5/10 969

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+84) 246. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn
File gợi ý cho bạn
File tải nhiều nhất
Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;