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

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:

Xem Demo | Download

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;
    awidth: 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);
    awidth: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;
    awidth: 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;
    awidth: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 !

Chuyên Mục: Css

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