quang cao hosting

Khâm phục với logo BP được làm từ CSS3 và HTML

Xem: 1073    Tải: 0   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Máy tính - công nghệ

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

Cùng một loạt các bài viết về CSS3 Logo, hôm nay mình tiếp tục mang đến cho các bạn một logo được thiết kế hết sức phức tạp và có lẽ là khó thực hiện nhất từ trước đến nay. Từ màu sắc được pha trộn cầu kỳ, cũng như những cánh hoa được làm hết sức tỉ mỉ.

Đây là logo mà chúng ta sẽ học để thiết kế trong ngày hôm nay:

HTML

Vì logo có rất nhiều cánh hoa và chi tiết, nên chúng ta sẽ có một khung html để tạo logo hơi dài như sau :

<div id="bp">
            <div class="canvas">
                <div class="icon">
 
                    <div class="circle1">
                        <div class="leaf"><div class="leaf"><div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
                    </div>
 
                    <div class="circle2">
                        <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"></div> </div> </div> </div> </div></div> </div> </div> </div> </div> </div></div> </div></div> </div> </div> </div> </div>
                    </div>
 
                    <div class="circle3">
                        <div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div> </div></div></div>
                    </div>
 
                    <div class="circle4">
                        <div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div> </div></div></div>
                    </div>
 
                </div>
            </div>
</div>

CSS

Và sau đây là đoạn css giúp hình thành nên logo , các bạn chỉ cần copy đoạn css bên dưới :

#bp .canvas {
    background: #ded97e;
}
#bp .icon {
    height: 200px;
    left:170px;
    position: absolute;
    top:52px;
    width: 200px;
}
#bp .circle1 {
    left: 69px;
    position: absolute;
    top:83px;
}
#bp .leaf {
    border-radius:50%;
    bottom:0;
    height: 100px;
    left:24px;
    position: absolute;
    -o-transform:rotate(20deg);
    -moz-transform:rotate(20deg);
    -ms-transform:rotate(20deg);
    -webkit-transform:rotate(20deg);
    transform:rotate(20deg);
    width:40px;
}
#bp .leaf:before,#bp .leaf:after {
    background: rgba(0,158,1,1);
    border-radius:137px/196px;
    clip:rect(15px 21px 127px 0px);
    content: "#";
    display: block;
    height: 141px;
    position: absolute;
    width: 98px;
 
}
#bp .leaf:before {
    left:11px;
    top:5px;
}
#bp .leaf:after {
    left:-47px;
    top:5px;
    -o-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}
#bp .circle2 {
    left: 77px;
    position: absolute;
    top: 82px;
    -o-transform:rotate(10deg) scale(0.82);
    -moz-transform:rotate(10deg) scale(0.82);
    -ms-transform:rotate(10deg) scale(0.82);
    -webkit-transform:rotate(10deg) scale(0.82);
    transform:rotate(10deg) scale(0.82);
}
#bp .circle2 .leaf:before,#bp .circle2 .leaf:after {
    background: rgba(128,195,0,1);
    clip:rect(13px 18px 134px 0px);
}
#bp .circle2 .leaf:before {
    left:14px;
}
#bp .circle2 .leaf:after {
    left:-50px;
}
#bp .circle3 {
    left: 80px;
    position: absolute;
    top: 90px;
    -o-transform: scale(0.63);
    -moz-transform: scale(0.63);
    -ms-transform: scale(0.63);
    -webkit-transform: scale(0.63);
    transform: scale(0.63);
}
#bp .circle3 .leaf:before,#bp .circle3 .leaf:after {
    background:rgba(255,240,1,1);
}
#bp .circle3 .leaf:before {
    clip:rect(13px 14px 133px 0px);
    left:18px;
}
#bp .circle3 .leaf:after {
    clip:rect(14px 14px 134px 0px);
    left:-54px;
}
#bp .circle4 {
    left: 87.5px;
    position: absolute;
    top: 90.5px;
    -o-transform:rotate(10deg) scale(0.47);
    -moz-transform:rotate(10deg) scale(0.47);
    -ms-transform:rotate(10deg) scale(0.47);
    -webkit-transform:rotate(10deg) scale(0.47);
    transform:rotate(10deg) scale(0.47);
}
#bp .circle4 .leaf:before,#bp .circle4 .leaf:after {
    background: rgba(255,255,255,1);
    clip:rect(13px 10px 134px 0px);
}
#bp .circle4 .leaf:before {
    left:22px;
}
#bp .circle4 .leaf:after {
    left:-58px;
}
/* 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;
}

Có lẽ sau khi xem xong đoạn css bên trên thì các bạn cũng sẽ có cảm giác như mình, là khâm phục tính sáng tạo của tác giả khi thiết kế logo này. Còn các bạn thì sao ? Đã sẵn sàng tạo một logo bằng CSS chưa ? Hãy bắt đầu từ những logo đơn giản nhất các bạn nhé.

Chúc các bạn thành công !

Khâm phục với logo BP được làm từ CSS3 và HTML

Khâm phục với logo BP được làm từ CSS3 và HTML Đăng ngày 08-08-2014  Cùng một loạt các bài viết về CSS3 Logo, hôm nay mình tiếp tục mang đến cho các bạn một logo được thiết kế hết sức phức tạp và có lẽ là khó thực hiện nhất từ trước đến nay. Từ màu sắc được pha trộn cầu kỳ, cũng như những cánh hoa được làm hết sức tỉ mỉ. 5/10 1073

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:
Số di động (Hotline): 085.99999.25
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: 085.99999.25;