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 IE4 trở lên, đó 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 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 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, xin giới thiêôu cách sử dụng môôt thuôôc tính được tích hợp 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ụ 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 muốn hiêôn môôt bức ảnh khung viền màu xanh lá thì ta dùng đoạn mã sau: Có rất nhiều thuôôc tính 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 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ị 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 sẽ đưa môôt số hiêôu ứng tiêu biểu. 1. Lâêt ảnh 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ả mẫu filter style=”Filter: FlipV FlipH”. 2. Chuyển ảnh màu thành ảnh đen trắng ả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 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: 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: Ý nghĩa các tham số: Opacity: đôô mờ của ảnh (0-100), là mờ hoàn toàn và 100 là không mờ. FinishOpacity: đôô mờ cuối cùng, có thể ở ngoài biên hay ở tâm điểm tuỳ theo tham số style Style: xác định hướng làm mờ (0-3) 0: Không thực hiêôn 1: Toả theo hướng đường thẳng 2: Toả theo hướng hướng đường tròn 3: Toả theo hướng hình chữ nhâôt 5. Làm nhoè ảnh chữ: Muốn tạo môôt bức ảnh nhoè dùng đoạn mã sau: Có thể tạo môôt dòng chữ nhoè bằng đoạn mã: Xin chao cac ban Ý nghĩa các tham số Add: cho phép vẽ chồng hình hay không (true/false) Direction: hướng nhoè Strength: mức đôô nhoè 6. Làm chữ có bóng, chữ sáng rực rơ Để tạo dòng chữ có bóng (shadow) ta dùng đoạn mã sau: Xin chao cac ban Tạo dòng chữ sáng rực rỡ với đoạn mã sau: Xin chao cac ban Ý nghĩa các tham số OffX: khoảng cách theo chiều X của bóng OffY: khoảng cách theo chiều Y của bóng Positive: (true/false) tạo bóng từ những điểm không suốt hay suốt. Trên là môôt số hiêôu ứng tiêu biểu, chúng có thể dùng được môi trường IE từ 4.0 trở lên, các bạn có thể liên hêô với để lấy file HTML minh họa. Chúng ta có thể kết hợp với mã lêônh JavaScript thay đổi thuôôc tính Style.Filter của đối tượng, tạo những hiêôu ứng “đôôc chiêu” hơn.