Trong bài viết này chúng ta sẽ thấy rõ được sức mạnh của CSS3 trong việc vẽ các hình phức tạp. Chỉ việc sử dụng HTML và CSS3 mà không cần dùng bất kì hình ảnh nào. Và chúng ta tạo ra các đồ vật trang trí như sau :
Đầu tiên chúng ta sẽ tạo các phần tử HTML, các bạn copy đoạn html sau :
<ul id="bauble-container">
<li>
<div class="bauble red-bauble"></div>
</li>
<li>
<div class="bauble blue-bauble"></div>
</li>
<li>
<div class="bauble yellow-bauble"></div>
</li>
<li>
<div class="bauble green-bauble"></div>
</li>
</ul>
Và đây là cái quan trọng nhất, đoạn CSS để vẽ các hình :
/* General */
html
{
/* màu background này sẽ được sử dụng nếu như thuộc tính gradients không được hỗ trợ */
background: #f2f5f6;
background: -moz-linear-gradient(top, #f2f5f6, #c8d7dc);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #c8d7dc),color-stop(1, #f2f5f6));
height: 100%;
}
#bauble-container
{
list-style: none; /* Remove bullets */
width: 568px;
margin: 150px auto; /* Canh giữa */
padding: 0;
}
#bauble-container li
{
margin: 0 20px; /* chèn thêm vài khoảng trống */
float: left; /* đặt các hình trong một hàng */
}
/* Đây là phần mà các vật trang trí hình tròn được đặt */
#bauble-container li:before
{
content: "";
background: #dadada; /* Dự phòng */
background: -moz-linear-gradient(bottom, #9c9c9c, rgba(255,255,255,0) );
background: -webkit-gradient(linear, left bottom, right top, from(#9c9c9c), color-stop(100%, rgba(255,255,255,0)));
height: 50px;
width: 2px;
display: block;
margin: 0 auto;
}
/* mỗi hình sẽ được xoay nghiêng 1 xíu */
#bauble-container li:nth-child(odd)
{
-moz-transform: rotate(-5deg); /* Firefox */
-webkit-transform: rotate(-5deg); /* Chrome và Safari */
-o-transform: rotate(-5deg); /* Opera */
-ms-transform: rotate(-5deg); /* IE9 */
}
#bauble-container li:nth-child(even)
{
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
}
.bauble
{
-moz-border-radius: 100px;
border-radius: 100px;
-moz-box-shadow: 0 0 5px #777777;
box-shadow: 0 0 5px #777777;
-webkit-box-shadow: 0 0 5px #777777;
border: 1px solid rgba(0,0,0,0.3);
position: relative;
height: 100px;
width: 100px;
}
.bauble:before
{
content: "";
background: #fff; /* Dự phòng */
background: -moz-linear-gradient(left, #fff, #9c9c9c, #fff, #9c9c9c );
background: -webkit-gradient(linear, left center, right center, from(#fff), color-stop(25%, #9c9c9c), color-stop(50%, #fff), color-stop(75%, #9c9c9c));
-moz-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset;
box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset;
border: 1px solid #dadada ;
height: 10px;
width: 20px;
position: absolute;
left: 50%;
top: -12px;
margin-left: -10px;
}
/* Tạo hình ảnh phản chiếu */
.bauble:after
{
content: "";
-moz-border-radius: 100px;
border-radius: 100px;
background: #fff; /* Dự phòng */
background: -moz-linear-gradient(bottom, #fff, rgba(255,255,255,0.1) );
background: -webkit-gradient(linear, left bottom, right top, from(#fff), color-stop(100%, rgba(255,255,255,0.1)));
position: absolute;
top: 0;
left: 50%;
margin-left: -40px;
opacity: 0.15;
height: 80px;
width: 80px;
}
/* Tô màu lên từng cái */
.red-bauble
{
background: #c8171f;
background: -moz-radial-gradient(center 45deg,circle cover, #f9d0be, #c8171f);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#f9d0be), to(#c8171f));
}
.blue-bauble
{
background: #00a1ee; /* Dự phòng */
background: -moz-radial-gradient(center 45deg,circle cover, #cde6f9, #00a1ee);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#cde6f9), to(#00a1ee));
}
.yellow-bauble
{
background: #fcb83d; /* Dự phòng */
background: -moz-radial-gradient(center 45deg,circle cover, #fcf3a6, #fcb83d);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#fcf3a6), to(#fcb83d));
}
.green-bauble
{
background: #4d8d00; /* Dự phòng */
background: -moz-radial-gradient(center 45deg,circle cover, #d1e5b2, #4d8d00);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#d1e5b2), to(#4d8d00));
}
Giờ đây các bạn có thể chiêm ngưỡng thành quả của mình, các bạn cũng nên chú ý là ở mỗi trình duyệt khác nhau sẽ cho ra kết quả khác nhau, do đó nếu bạn thấy không giống như nhau ở các trình duyệt thì cũng không có gì là lạ.