Dưới đây là một số cách để thay đổi hình thức TEXT trong trang web của bạn sử dụng CSS. Mình thấy rất nhiều trang web phải chèn những ảnh có kích thước lớn chỉ để có được những TEXT có hiệu ứng nho nhỏ, nếu sử dụng 1 số hiệu ứng lọc sau, bạn có thể giảm thiểu kích thước trang web mà vẫn đẹp:
Để xem các ví dụ này, bạn mở Notepad ra, copy các đoạn mã trong phần tag <span></span>.. Save lại dưới định dạng HTML rỗi mở ra xem = trình duyệt của bạn. Chú ý, có rất nhiều hiệu ứng khác nữa, các bạn có thể tự tìm tòi (ví dụ như hiệu ứng chữ bốc lửa đang được khá ưa chuộng).
Màu sáng dần:
Trích:
|
<span style="width: 357; height: 50; font-size: 36pt; font-family: Arial Black; color: red; Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">Alpha</span>
|
Nhoè:
Trích:
|
<span style="width: 357; height: 50; font-size: 36pt; font-family: Arial Black; color: red; Filter: Blur(Add = 1, Direction = 225, Strength = 10)">Blur</span>
|
Đổ bóng:
Trích:
|
<span style="width: 357; height: 50; font-size: 36pt; font-family: Arial Black; color: blue; Filter: DropShadow(Color=#FF0000, OffX=2, OffY=2, Positive=1)">Shadow</span>
|
Lộn ngược:
Trích:
|
<span style="width: 300; height: 50; font-size: 36pt; font-family: Arial Black; color: red; Filter: FlipV">Flip</span>
|
Nền:
Trích:
|
<span style="width: 357; height: 50; font-size: 18pt; font-family: Arial Black; color: red; Filter: Glow(Color=#00FF00, Strength=20)">Glow</span>
|
Xám:
Trích:
|
<span style="width: 300; height: 50; font-size: 18pt; font-family: Arial Black; color: red; Filter: Gray">Gray</span>
|
MÀu âm bản:
Trích:
|
<span style="width: 387; height: 50; font-size: 18pt; font-family: Arial Black; color: red; Filter: Invert">Invert</span>
|
Mặt nạ
Trích:
|
<span style="width: 357; height: 50; font-size: 18pt; font-family: Arial Black; color: red; Filter: Mask(Color=#00FF00)">Mask</span>
|
Đổ bóng màu khác
Trích:
|
<span style="width: 357; height: 50; font-size: 18pt; font-family: Arial Black; color: red; Filter: Shadow(Color=#0000FF, Direction=225)">Color Shadow</span>
|
Sóng
Trích:
|
<span style="width: 357; height: 50; font-size: 36pt; font-family: Arial Black; color: red; Filter: Wave(Add=0, Freq=2, LightStrength=10, Phase=10, Strength=10)">Wave</span>
|
Tia X:
Trích:
|
<span style="width: 300; height: 30; font-size: 18pt; font-family: Arial Black; color: red; Filter: Xray">X ray </span>
|
Mặt nạ +bóng+chroma:
Trích:
|
<span style="width: 357; height: 20; font-size: 18pt; font-family: Arial Black; Filter: Mask(color=#FF0000) Shadow(Color=#0000FF, Direction=225) Chroma(color=#FF0000)">The truth of a thing is the feel of it, not the think of it.</span>
|
16-08-2007, 18:03
Một số ứng dụng của CSS filter
PeMit#1
Linear Mode
