|
THẾ GIỚI PHẦN
CỨNG |
|
Những chiêu thức
JavaScript
Trang trí cho trang Web của bạn:
hiệu ứng từ các bộ lọc
Nguyễn Xuân Tài (Hà Nội)
|
|
Thỉnh thoảng chúng ta bắt gặp một
số trang Web có hiệu ứng chữ đổ bóng rất đẹp cùng
những hiệu ứng về màu trông "hay hay". Được như thế
là nhờ dùng bộ lọc (filter) đấy! Tôi xin giới thiệu
các bộ lọc giúp cho trang Web của bạn trở nên "ấn
tượng": DropShadow,
Shadow,
Glow và
Gradient. |
|
DropShadow và Shadow |
|
Trong cặp thẻ <body> của tập tin html của bạn, hãy
chèn vào đoạn mã sau: |
|
<table
style="filter:dropshadow(color=green);
font:bold 20px verdana;letter-spacing: 8pt;">
<tr><td>e-CHIP</td></tr></table> |
|
 Bấm nút
Refresh (tải lại trang Web) của trình duyệt,
bạn sẽ thấy dòng chữ e-CHIP như sau: |
|
Thú vị quá phải không? Đó là hiệu ứng DropShadow
(bóng đổ) do ta đã quy định thuộc tính
style="filter:dropshadow(color=green)”. Nếu bây giờ
thay nó bằng: style="filter:shadow(color=green),
đoạn mã trên trở thành: |
|
<table style="filter:shadow(color=green);
font:bold 20px verdana;letter-spacing: 8pt;">
<tr><td>e-CHIP</td></tr></table> |
|
 Lại bấm
Refresh, bạn thấy khác liền: |
|
Glow |
|
Ta hãy cùng thử hiệu ứng Glow (nóng sáng, phát
sáng). Bạn sửa lại đoạn mã trên như sau: |
|
<table style="filter:glow(color=green);
font:bold 20px verdana;letter-spacing: 8pt;">
<tr><td>TIN HỌC NHƯ CƠM BÌNH DÂN</td></tr>
</table> |
|
Kết quả sẽ "nóng hổi" như thế này: |
|
 |
|
Dĩ nhiên, bạn có thể tùy ý đổi kiểu phông, cỡ chữ,
màu chữ,... cho phù hợp với mình. |
|
Gradient |
|
Ngoài hiệu ứng về chữ, nhờ bộ lọc ta dễ dàng điều
chỉnh màu nền của trang Web: |
|
<body
style="filter:progid:DXImageTransform.
Microsoft.Gradient(endColorstr='#ccffcc',
startColorstr='#FFFFFF', gradientType='0');">
</body> |
|
hoặc màu nền của bảng: |
|
<table
style="filter:progid:DXImageTransform.
Microsoft.Gradient(endColorstr='#ffffff',
startColorstr='#ccffcc', gradientType='0');">
<tr><td>TIN HỌC NHƯ CƠM BÌNH DÂN<br><br></td></tr>
</table> |
|
Bộ lọc trên đây tạo nên hiệu ứng Gradient (trượt
màu). Chúc bạn thành công. |
|
|
.
