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

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








Giới thiệu cách sử dụng một thuộc tính được tích hợp trong IE4 trở lên, đó là thuộc tính Filter thông qua cách đặt từ khoá Style.







Ngày nay, Web đã trở nên quen thuộc và việc tự tạo trang Web riêng cũng không còn là chuyện quá khó khăn. Có rất nhiều công cụ có thể tạo nên những hiệu ứng sinh động làm cho trang web trở nên hấp dẫn hơn như Photoshop, CorelDraw, Flash, hay các chương trình viết bằng Java, JavaScript v.v...
 
Tuy nhiên bạn vẫn có thể tạo ra các hiệu ứng tương tự mà không cần dùng các công cụ phức tạp nói trên. Trong khuôn khổ bài viết này, tôi xin giới thiệu cách sử dụng một thuộc tính được tích hợp trong IE4 trở lên, đó là thuộc tính Filter thông qua cách đặt từ khoá Style. Trong ngôn ngữ siêu văn bản HTML, chúng ta có thể dùng từ khoá Style để thiết lập các thuộc tính cho đối tượng. Ví dụ khi muốn hiện một chữ Hello màu đỏ đậm, font Tahoma, cỡ chữ 14 thì ta dùng đoạn mã sau:

Hello

  Hay khi muốn hiện một bức ảnh khung viền màu xanh lá cây thì ta dùng đoạn mã sau:   Có rất nhiều thuộc tính đi cùng với từ khoá Style như: color, font, font-family, border, background, height, width, cursor v.v... Thuộc tính Filter cũng là một thuộc tính đi cùng Style, thuộc tính này đem lại cho chúng ta nhiều hiệu quả bất ngờ, thú vị như lật ảnh, chữ; chuyển ảnh màu thành đen trắng, âm bản; tạo ảnh uốn lượn, ảnh mờ, ảnh khung tròn, ảnh nhoè, tạo chữ mờ, chữ có bóng v.v... Sau đây tôi sẽ đưa ra một số hiệu ứng tiêu biểu.   1. Lật ảnh và chữ theo chiều ngang, dọc
Để lật ảnh theo chiều ngang ta dùng đoạn mã sau:

Để lật một dòng chữ theo chiều ngang ta dùng đoạn mã sau:
Xin chao cac ban
 Nếu muốn lật theo chiều dọc thì chỉ việc thay FlipV bằng FlipH, ta cũng có thể dùng kết hợp cả 2 mẫu filter trên  style=”Filter: FlipV FlipH”.   2. Chuyển ảnh màu thành ảnh đen trắng và ảnh âm bản
Để chuyển một bức ảnh mầu thành ảnh đen trắng ta dùng đoạn mã sau:
  Để chuyển một bức ảnh thành ảnh âm bản ta dùng đoạn mã sau:
    3. Tạo ảnh và dòng chữ uốn lượn sóng
Để tạo một bức ảnh uốn lượn sóng ta dùng đoạn mã sau:

Đoạn mã để tạo dòng chữ lượn sóng:
Xin chao cac ban
Ý nghĩa các tham số Add: cho phép vẽ chồng hình hay không (true/false) Freq: Số lần lượn sóng LightStrength: mức tia sáng chiếu ngang Phase: góc pha của sóng Strength: mức độ lọc   4. Tạo ảnh mờ, ảnh có khung tròn, ảnh có tia sáng chiếu vào
Để làm mờ ảnh ta dùng đoạn mã:
  Tạo bức ảnh mờ, có khung ngoài tròn bằng đoạn mã:
  Tạo một bức ảnh có tia sáng chiếu vào với đoạn mã sau: