1. Demo:
- So sánh hai ảnh thumbnail trong demo, bạn có thể thấy:
+ Giống: Ảnh đã được tạo khung, bo góc.
+ Khác: quanh ảnh thumbnail của bài Artword phát ra ánh sáng xanh nhạt. Đây là hiệu ứng được tạo ra khi mình rê chuột vào ảnh.
- Bạn cũng có thể rê chuột vào chính bức ảnh bạn đang xem để thấy sự khác biệt trước và sau khi rê chuột vào.
2.
Dạng code:
.comment-link
{margin-$startSide:.6em;}
.post img,
table.tr-caption-container {...}/* Hiệu ứng ảnh khi chưa rê
chuột------------*/
.post
img:hover{...}/* Hiệu ứng ảnh khi rê chuột------------*/
- Một số thuộc tính có thể thêm vào dấu {}:
+ Background: #F8F7F1: màu khung ảnh
+ border:1 px dash: #FFFFFF: đường viền
» 1px: độ dày đường viền.
» Dash: kiểu đường viền, bao gồm các dạng:
dotted, dashed, solid, double, groove, ridge, inset, outset.
» #FFFFFF: màu đường viền
+ box-shadow:2px 2px 2px 3px
#333 inset: bóng đổ
» 2px: bóng đổ về phía phải
(giá trị âm sẽ đổ về phía trái)
» 2px: bóng đổ về phía dưới
(giá trị âm sẽ đổ về phía trên)
» 2px: là độ nhòe của bóng.
» 3px: độ lan tỏa của bóng.
» #333: màu của bóng đổ.
» inset: bóng đổ chìm vào
trong (nếu muốn làm khối nổi thì bỏ cái này)
+ border-radius: 5px 5px 5px 5px;
» 5px: góc trên bên trái.
» 5px: góc trên bên phải
» 5px: góc dưới bên phải
» 5px: góc dưới bên trái
Muốn bo đều 4 góc thì bạn
có thể rút gọn thành border-radius: 5px.
+ padding: 10px: độ dày
khung ảnh.
- NOTE:
+ Các thuộc tính cách nhau bởi dấu ";"
+ Bạn có thể thay đổi các thông số của thuộc tính theo ý thích của bạn.
- Ví dụ: đây là code hiệu ứng ảnh trong blog mình, bạn có thể tham khảo:
.comment-link {margin-$startSide:.6em;}
.post
img, table.tr-caption-container {background: none repeat scroll 0 0
#F8F7F1;border: 1px solid #FFFFFF;box-shadow: 0 0 5px 2px
#DDDDDD;padding: 10px;}
.post
img:hover{background:#FDFDFB;border:1px solid #8DDCEF;-moz-box-shadow:0
0 10px 2px #B9E9F7;-webkit-box-shadow:0 0 10px 4px #B9E9F7;
box-shadow:0 0 10px 4px #B9E9F7;}
3. Cách áp dụng:
Paste đoạn code bạn đã tạo vào phía sau thẻ <b:skin><