Làm trang Web thêm sinh động với thuộc tính Filter

(Thứ Ba, 22/06/2010-10:43 AM)

Giới thiệu cách sử dụng một thuộc tính được tích hợp trong IE4 trở lên, đó là thuộc tính Filter thông qua cách đặt từ khoá Style.

Ngày nay, Web đã trở nên quen thuộc và việc tự tạo trang Web riêng cũng không còn là chuyện quá khó khăn. Có rất nhiều công cụ có thể tạo nên những hiệu ứng sinh động làm cho trang web trở nên hấp dẫn hơn như Photoshop, CorelDraw, Flash, hay các chương trình viết bằng Java, JavaScript v.v...

Tuy nhiên bạn vẫn có thể tạo ra các hiệu ứng tương tự mà không cần dùng các công cụ phức tạp nói trên. Trong khuôn khổ bài viết này, tôi xin giới thiệu cách sử dụng một thuộc tính được tích hợp trong IE4 trở lên, đó là thuộc tính Filter thông qua cách đặt từ khoá Style.
Trong ngôn ngữ siêu văn bản HTML, chúng ta có thể dùng từ khoá Style để thiết lập các thuộc tính cho đối tượng. Ví dụ khi muốn hiện một chữ Hello màu đỏ đậm, font Tahoma, cỡ chữ 14 thì ta dùng đoạn mã sau: Hello

Hay khi muốn hiện một bức ảnh khung viền màu xanh lá cây thì ta dùng đoạn mã sau:
<img src=”image.jpg” style=”border: 1 solid #00FF00''>

Có rất nhiều thuộc tính đi cùng với từ khoá Style như: color, font, font-family, border, background, height, width, cursor v.v... Thuộc tính Filter cũng là một thuộc tính đi cùng Style, thuộc tính này đem lại cho chúng ta nhiều hiệu quả bất ngờ, thú vị như lật ảnh, chữ; chuyển ảnh màu thành đen trắng, âm bản; tạo ảnh uốn lượn, ảnh mờ, ảnh khung tròn, ảnh nhoè, tạo chữ mờ, chữ có bóng v.v... Sau đây tôi sẽ đưa ra một số hiệu ứng tiêu biểu.

1. Lật ảnh và chữ theo chiều ngang, dọc

Để lật ảnh theo chiều ngang ta dùng đoạn mã sau:

Để lật một dòng chữ theo chiều ngang ta dùng đoạn mã sau:

Xin chao cac ban

Nếu muốn lật theo chiều dọc thì chỉ việc thay FlipV bằng FlipH, ta cũng có thể dùng kết hợp cả 2 mẫu filter trên style=”Filter: FlipV FlipH”.

2. Chuyển ảnh màu thành ảnh đen trắng và ảnh âm bản

Để chuyển một bức ảnh mầu thành ảnh đen trắng ta dùng đoạn mã sau:

<img src=”image.jpg” style=”Filter: Gray”>

Để chuyển một bức ảnh thành ảnh âm bản ta dùng đoạn mã sau:

<img src=”image.jpg” style=”Filter: Invert”>

3. Tạo ảnh và dòng chữ uốn lượn sóng

Để tạo một bức ảnh uốn lượn sóng ta dùng đoạn mã sau:

Đoạn mã để tạo dòng chữ lượn sóng:

Xin chao cac ban

Ý nghĩa các tham số
Add: cho phép vẽ chồng hình hay không (true/false)
Freq: Số lần lượn sóng
LightStrength: mức tia sáng chiếu ngang
Phase: góc pha của sóng
Strength: mức độ lọc

4. Tạo ảnh mờ, ảnh có khung tròn, ảnh có tia sáng chiếu vào

Để làm mờ ảnh ta dùng đoạn mã:

<img src=”image.jpg” style=”Filter: Alpha(Opacity=30)”>

Tạo bức ảnh mờ, có khung ngoài tròn bằng đoạn mã:

<img src=”image.jpg” style=”Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2)”>

Tạo một bức ảnh có tia sáng chiếu vào với đoạn mã sau:

Ý nghĩa các tham số:
Opacity: độ mờ của ảnh (0-100), 0 là mờ hoàn toàn và 100 là không mờ.
FinishOpacity: độ mờ cuối cùng, có thể ở ngoài biên hay ở tâm điểm tuỳ theo tham số style
Style: xác định hướng làm mờ (0-3)

0: Không thực hiện
1: Toả ra theo hướng đường thẳng
2: Toả ra theo hướng hướng đường tròn
3: Toả ra theo hướng hình chữ nhật

5. Làm nhoè ảnh và chữ:

Muốn tạo một bức ảnh nhoè dùng đoạn mã sau:

Có thể tạo một dòng chữ nhoè bằng đoạn mã:

Xin chao cac ban

Ý nghĩa các tham số
Add: cho phép vẽ chồng hình hay không (true/false)
Direction: hướng nhoè
Strength: mức độ nhoè

6. Làm chữ có bóng, chữ sáng rực rỡ

Để tạo dòng chữ có bóng (shadow) ta dùng đoạn mã sau:

Xin chao cac ban

Tạo dòng chữ sáng rực rỡ với đoạn mã sau:

Xin chao cac ban

Ý nghĩa các tham số
OffX: khoảng cách theo chiều X của bóng
OffY: khoảng cách theo chiều Y của bóng
Positive: (true/false) tạo bóng từ những điểm không trong suốt hay trong suốt.

Trên đây là một số hiệu ứng tiêu biểu, chúng có thể dùng được trong môi trường IE từ 4.0 trở lên, các bạn có thể liên hệ với tôi để lấy file HTML minh họa. Chúng ta có thể kết hợp với mã lệnh JavaScript thay đổi thuộc tính Style.Filter của đối tượng, tạo những hiệu ứng “độc chiêu” hơn.

Theo pcworld