Hiệu ứng cho Avatar của Friendlist Module !!!

Chắc các bạn vào blog mình cũng thấy các đường viền bao quanh mỗi avatar trong danh sách friendlist của mình nhỉ ? Vậy các bạn có muốn làm giống vậy không ??
Nếu muốn thì chúng ta cùng làm nhé :

---

Sau đây là cách thực hiện :

1> Thêm viền cho mỗi avatar :

Rất đơn giản, các bạn chỉ việc thêm đọan Code này vào nhé :

Code:

#friendlist_module .rc_bd .rc_bc .hd{height:auto;} #friendlist_module .rc_bd .rc_bc .bd ul li{border-top:2px dotted #fff;border-right:2px dotted #fff;border-left:2px dotted#fff;} #friendlist_module .rc_bd .rc_bc .bd ul li:hover{border-top:2px dotted #000;border-right:2px dotted #000;border-left:2px dotted #000;}

Chú ý : 

• #fff là mã màu trắng, #000  là màu đen, các bạn có thể thay đổi cho phù hợp với theme của mình nhé . Nếu không biết cách chọn mã màu có thể tham khảo Software này nhé !
• #friendlist_module .rc_bd .rc_bc .bd ul li là thuộc tính của viền lúc ban đầu
• #friendlist_module .rc_bd .rc_bc .bd ul li:hover là thuộc tính của viền khi rê chuột vào.

2> Thêm ảnh nền cho các avatar :

Các bạn thay link ảnh nền vào nhé :

Code:

#friendlist_module .rc_bd .rc_bc .hd{height:auto;} #friendlist_module .rc_bd .rc_bc .bd ul li{background:transparent url(Link ảnh nền);} #friendlist_module .rc_bd .rc_bc .bd ul li:hover{background:transparent url(Link ảnh nền);}

Có thể sử dụng 2 ảnh nền khác nhau:

• Link màu xanh là ảnh ban đầu
• Link màu đỏ là ảnh xuất hiện khi rê chuột vào.

---

Thế thôi. Như vậy là xong cách thêm các đường viền cùng hiệu ứng khi rê chuột vào mỗi avatar trong danh sách friendlist rồi nhé ! Lưu ý, Code chỉ có hiệu quả đối với Friendlist Module thôi . Hy vọng bài viết có ích cho bạn.

(Bản quyền bài viết thuộc về W.Dephia's Blog, vui lòng ghi rõ nguồn nếu sử dụng)