[ Bài viết mới · Thành viên · Nội quy diễn đàn · Tìm kiếm · RSS ]
  • Page 1 of 1
  • 1
Diễn đàn Share Info » Công Nghệ Phần mềm - Máy tính » HTML & CSS » Tạo hiệu ứng ánh sáng với CSS (Tạo hiệu ứng ánh sáng với CSS)
Tạo hiệu ứng ánh sáng với CSS
chugatrongchoaiDate: Chủ Nhật, 2013/08/04, 7:27 PM | Message # 1
Tân Binh đạt Huy chương
Nhóm: Sáng lập viên
Bài viết: 220
Huy chương: 9
Hôm nay tôi sẽ hướng dẫn các bạn sử dụng pseduo-class và thuộc tính box-shadow để tạo hiệu ứng ánh sáng cho phần tử.
Demo
Download

Mã HTML
Bài hướng dẫn này tôi sẽ áp dụng hiệu ứng cho thanh menu, ta có mã html cơ bản sau:

Code
<ul class="navigation">
     <li><a href="#">Home</a></li>
     <li><a href="#">Portfolio</a></li>
     <li><a href="#">Work</a></li>
     <li><a href="#">Service</a></li>
     <li><a href="#">Gallery</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Contact</a></li>
     <li><a href="#">Blog</a></li>
</ul>


Mã CSS
Custom thanh menu một chút với mã css sau :

Code
body{
     text-align:center;
     font-family:helvetica,arial,sans-serif;
     font-size:12px;
     background-color:#2d2d2d;
}
   
.navigation{
     background-color:#3f3f3f;
     display:inline-block;
     margin-top:150px;
     border-radius:5px;
     box-shadow:0 0px 5px rgba(0,0,0,0.4);
}
   
.navigation li{
     display:inline;
}
   
.navigation a{
     display:block;
     float:left;
     font-size:12px;
     letter-spacing:0.5px;
     font-weight:bold;
     text-shadow:0 1px 0 rgba(1,1,1,0.6);
     padding:12px 25px;
     color:#b3b3b3;
     border-left:1px solid #4c4c4c;
     border-right:1px solid #323232;
}
   
.navigation li:first-child a{
     border-left:none;
     border-radius:3px 0 0 3px;
}
   
.navigation li:last-child a{
     border-right:none;
     border-radius:0 3px 3px 0;
}


Với mã CSS trên ta được thanh menu như hình dưới:


Sau đây ta sẽ sử dụng pseudo-class của thẻ a và áp dụng cho no thuộc tính box-shadow để tạo hiệu ứng ánh sáng khi hover giống hình dưới:


 
Trước tiên thêm cho thẻ a một vài thuộc tính quan trọng sau:

Code
.navigation a{
     /*---code trước---*/
     position:relative;
     overflow:hidden;
     z-index:1;
}


Tiếp theo là đến pseduo-class của thẻ a khi hover:

Code
.navigation a:hover:after,.navigation a:hover:before{
     content:"";
     position:absolute;
     top:100%;
     left:50%;
     margin-left:-10px;
     width:20px;
     height:20px;
     background-color:rgba(255,255,255,0.3);
     box-shadow:0 0 50px rgba(255,255,255,0.3),0 0 40px rgba(255,255,255,0.3),0 0 30px rgba(255,255,255,0.3),0 0 20px rgba(255,255,255,0.3);


Ta sử dụng thuộc tính box-shadow với một loạt tham số để tạo hiệu ứng ánh sáng,đồng thời các bạn cũng chú ý một số thuộc tính như left,top,width,height… của nó. Còn mục đích khi ta cho thẻ a thuộc tính overfow:hidden để cho khi hover vào thì pseduo-class của nó không bi tràn ra ngoài, mặt khác ta cũng set cho thẻ a z-index:1 và pseduo-class của nó với z-index:-1 để hiệu ứng ánh sáng này không nằm đè lên chữ.

Nguồn: http://zlatanblog.com


Chữ ký: http://windowsworld.ucoz.com/
http://shareinfo.ucoz.org/
https://www.facebook.com/hdoantrannam
 
Diễn đàn Share Info » Công Nghệ Phần mềm - Máy tính » HTML & CSS » Tạo hiệu ứng ánh sáng với CSS (Tạo hiệu ứng ánh sáng với CSS)
  • Page 1 of 1
  • 1
Search:

Chat ()