Có lẽ sẽ có nhiều bạn sẽ không tin vào tiêu đề bài viết này, bởi vì từ trước đến nay, việc thiết kế logo chỉ có thể thực hiện trên những phần mềm tạo ảnh chuyên nghiệp như Photoshop hay illustrator … Hôm nay, mình sẽ giúp các bạn thêm một cách tạo logo không kém phần chuyên nghiệp với chỉ bằng CSS3. Để minh chứng cho những gì mình nói, trong bài viết này, chúng ta sẽ tự tay thiết kế logo của hãng Adidas lừng danh.
Đây là kết quả mà chúng ta sẽ có được khi hoàn thành bài viết này :
.jpg "Tự tay thiết kế logo Adidas bằng CSS3")
HTLM
Trước hết , chúng ta sẽ cần khung html chuẩn cho việc thiết kế logo như sau :
<div id="adidas">
<div class="monitor">
<div class="canvas">
<div class="icon">
<div class="leaf1">
<div class="leaf-t1"></div>
<div class="leaf-t2"></div>
</div>
<div class="leaf2">
<div class="leaf-t1"></div>
<div class="leaf-t2"></div>
</div>
<div class="leaf3">
<div class="leaf-t1"></div>
<div class="leaf-t2"></div>
</div>
<div class="stripes">
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
</div>
</div>
</div>
</div>
</div>
CSS
Bây giờ các bạn chỉ việc copy toàn bộ đoạn css bên dưới để thiết kế cho logo là xong :
#adidas .canvas {
background: #017ac3;
}
#adidas .icon {
left: 230px;
position: absolute;
top: 10px;
}
#adidas .leaf-t1,
#adidas .leaf-t2 {
background: #fff;
border-radius:204px/280px;
clip:rect(18px 43px 255px 0px);
height: 280px;
position: absolute;
top:-36px;
width:194px;
}
#adidas .leaf-t2 {
left:-109px;
position: absolute;
-o-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
#adidas .leaf1 .leaf-t1,
#adidas .leaf1 .leaf-t2 {
height:250px;
}
#adidas .leaf2 .leaf-t1,
#adidas .leaf2 .leaf-t2,
#adidas .leaf3 .leaf-t1,
#adidas .leaf3 .leaf-t2 {
clip:rect(20px 38px 220px 0px );
height:240px;
}
#adidas .leaf1 {
position: absolute;
top:50px;
}
#adidas .leaf2 {
left:-130px;
position: absolute;
top: 131px;
-o-transform:rotate(-40deg);
-moz-transform:rotate(-40deg);
-ms-transform:rotate(-40deg);
-webkit-transform:rotate(-40deg);
transform:rotate(-40deg);
}
#adidas .leaf2 .leaf-t1,
#adidas .leaf2 .leaf-t2 {
border-radius:200px/287px;
width:200px;
}
#adidas .leaf2 .leaf-t1 {
left:5px;
}
#adidas .leaf2 .leaf-t2 {
left:-120px;
}
#adidas .leaf3 {
left:151px;
position: absolute;
top:77px;
-o-transform:rotate(40deg);
-moz-transform:rotate(40deg);
-ms-transform:rotate(40deg);
-webkit-transform:rotate(40deg);
transform:rotate(40deg);
}
#adidas .leaf3 .leaf-t1,
#adidas .leaf3 .leaf-t2 {
border-radius:200px/287px;
width:200px;
}
#adidas .leaf3 .leaf-t1 {
left:4px;
}
#adidas .leaf3 .leaf-t2 {
left:-121px;
}
#adidas .stripes {
height: 50px;
left:-19px;
position: absolute;
top:160px;
width: 110px;
z-index:10;
}
#adidas .stripe {
background: #017ac3;
height: 12px;
left: -98px;
margin-bottom:12px;
position: relative;
top:0px;
width:320px;
}
#adidas .header h2 {
text-indent: -57px;
}
/* general styles */
.canvas {
display: block;
overflow: hidden;
position: relative;
top: 0px;
text-indent:-9999px;
z-index: 10;
}
.icon, .icon * {
display: block;
position: absolute;
}
.monitor,
.monitor .canvas {
height: 304px;
width:540px;
}
.monitor {
background: #000;
border:30px solid #000;
border-radius:20px;
float:left;
position:relative;
}
.monitor:before { /* shadow */
box-shadow: 0 360px 10px rgba(0,0,0,0.2);
border-radius:50%;
content: "#";
display: block;
height: 20px;
left: 30px;
position: absolute;
text-indent: -9999px;
width: 540px;
}
.monitor:after { /* shine */
background: -webkit-linear-gradient(top left, rgba(255,255,255,0) 60%, rgba(255,255,255,0.2) 60%, rgba(255,255,255,0) 100%);
border-radius:20px 20px 0 0;
height: 364px;
content: "#";
display: block;
position: absolute;
right: -30px;
text-indent: -9999px;
top:-30px;
width:600px;
z-index: 10;
}
Mình hy vọng là qua bài viết này, các bạn sẽ có thêm kinh nghiệm trong việc sử dụng CSS trong các thiết kế của mình. Và biết đâu các bạn có thể tự tạo riêng cho mình một logo với chỉ CSS, và nhớ là khi làm xong, thì chia sẻ cho mình và mọi người nhé.