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)

Nguồn : chúng tôi sưu tầm từ nhiều nguồn

Thiết kế web chuyên nghiệp giá rẻ

Chúng tôi tuyên thiết kế web chuyên nghiệp đẳng cấp giá rẻ với 5 năm kinh nghiệm trong lĩnh vực thiết kế website nếu các bạn có nhu cầu có thể liên hệ Hotline: 0962 66 57 57 || Email: cmay.tt@gmail.com || website: cmay.vn