Fotopersbureau LDB Prod Logo với thiết kế bằng CSS3

Xem: 480    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ử


Tiếp tục bổ sung vào những mẫu css3 logo, hôm nay chúng ta sẽ thiết kế một logo với độ khó tương đối dễ dàng, và cũng chỉ là dựa vào những tính năng quen thuộc của CSS3 là background gradient và thuộc tính transform.

HTML

<div id="fpldbp">
      <div class="canvas">
        <div class="icon">
          <div class="curve1">
            <div class="curve2">
              <div class="curve3">
                <div class="curve4">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
</div>

CSS

#fpldbp .canvas {
    background-image: -ms-radial-gradient(0 0, #dde4e8, #b1d6e1);
    background-image: -moz-radial-gradient(0 0, #dde4e8, #b1d6e1);
    background-image: -o-radial-gradient(0 0, #dde4e8, #b1d6e1);
    background-image: -webkit-radial-gradient(0 0, #dde4e8, #b1d6e1);
    background-image: radial-gradient(0 0, #dde4e8, #b1d6e1);
}
  #fpldbp .icon {
    height: 198px;
    left: 170px;
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 50px;
    width: 198px;
  }
  #fpldbp .icon * {
    border-radius: 50%;
    height: 138px;
    width: 142px;
  }
  #fpldbp .curve1 {
    left: 54px;
    top: 20px;
    box-shadow: 0 27px 0 yellow;
  }
  #fpldbp .icon .curve1 * {
    left: -15px;
    top: 35px;
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  #fpldbp .curve1,
  #fpldbp .curve3 {
    box-shadow: 0 27px 0 #444;
  }
  #fpldbp .curve2,
  #fpldbp .curve4 {
    box-shadow: 0 27px 0 #009dd3;
 
}
/* 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;
}

Thế là xong, mình mong các bạn sẽ cảm thấy thích với mẫu logo này.

Fotopersbureau LDB Prod Logo với thiết kế bằng CSS3

Fotopersbureau LDB Prod Logo với thiết kế bằng CSS3 Đăng ngày 05-08-2014  Tiếp tục bổ sung vào những mẫu css3 logo, hôm nay chúng ta sẽ thiết kế một logo với độ khó tương đối dễ dàng, và cũng chỉ là dựa vào những tính năng quen thuộc của CSS3 là background gradient và thuộc tính transform. 5/10 480

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

 

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;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+844) 6. 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