Làm trang 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 Ngày nay, Web đã trở nên quen thuô ̣c và viê ̣c tự ta ̣o trang Web riêng cũng không còn là chuyê ̣n quá khó khăn.

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

Ngày nay, Web đã trở nên quen thuô ̣c và viê ̣c tự ta ̣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 cu ̣ có thể ta ̣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 ba ̣n vẫn có thể ta ̣o ra các hiê ̣u ứng tương tự mà không cần dùng các công cu ̣ phức ta ̣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ử du ̣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í du ̣ khi muốn hiê ̣n mô ̣t chữ Hello màu đỏ đâ ̣m, font Tahoma, cỡ chữ 14 thì ta dùng đoa ̣n mã sau:

<p style=”font-family:Tahoma; font-size:14pt; color:#FF0000; font-weight:bold”

>Hello</p>

Hay khi muốn hiê ̣n mô ̣t bức ảnh khung viền màu xanh lá cây thì ta dùng đoa ̣n mã sau:

<img src=”image.jpg” style=”border: 1 solid #00FF00''>

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 la ̣i cho chúng ta nhiều hiê ̣u quả bất ngờ, thú vi ̣ như lâ ̣t ảnh, chữ; chuyển ảnh màu thành đen trắng, âm bản; ta ̣o ảnh uốn lượn, ảnh mờ, ảnh khung tròn, ảnh nhoè, ta ̣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

http://hoanglamcm.net

1 Lâ ̣t ảnh và chữ theo chiều ngang, do ̣c

Để lâ ̣t ảnh theo chiều ngang ta dùng đoa ̣n mã sau:

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

Để lâ ̣t mô ̣t dòng chữ theo chiều ngang ta dùng đoa ̣n mã sau:

<span style=”width:400; height:100; text-align:center; family:Tahoma; font-size:18pt; color:#FF0000; font-weight:bold; Filter:FlipV “> Xin chao cac ban </span>

Nếu muốn lâ ̣t theo chiều do ̣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 đoa ̣n mã sau:

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

Để chuyển mô ̣t bức ảnh thành ảnh âm bản ta dùng đoa ̣n mã sau:

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

3 Ta ̣o ảnh và dòng chữ uốn lượn sóng

Để ta ̣o mô ̣t bức ảnh uốn lượn sóng ta dùng đoa ̣n mã sau:

<img src=”image.jpg” style=”Filter: Wave(Add=false, Freq=5, LightStrength=3, Phase=45, Strength=10">

Đoa ̣n mã để ta ̣o dòng chữ lượn sóng:

<span style=”width:400; height:100; text-align:center; family:Tahoma; font-size:18pt; color:#FF0000; font-weight:bold; Filter:Wave(Add=false, Freq=4,

LightStrength=3, Phase=45, Strength=5"> Xin chao cac ban </span>

Ý 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 đô ̣ lo ̣c

4 Ta ̣o ảnh mờ, ảnh có khung tròn, ảnh có tia sáng chiếu vào

Để làm mờ ảnh ta dùng đoa ̣n mã:

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

Ta ̣o bức ảnh mờ, có khung ngoài tròn bằng đoa ̣n mã:

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

Ta ̣o mô ̣t bức ảnh có tia sáng chiếu vào với đoa ̣n mã sau:

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

Ý nghĩa các tham số:

Opacity: đô ̣ mờ của ảnh (0-100), 0 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 đi ̣nh hướng làm mờ (0-3)

0: Không thực hiê ̣n

1: Toả ra theo hướng đường thẳng

2: Toả ra theo hướng hướng đường tròn

3: Toả ra theo hướng hình chữ nhâ ̣t

5 Làm nhoè ảnh và chữ:

Muốn ta ̣o mô ̣t bức ảnh nhoè dùng đoa ̣n mã sau:

<img src=”image.jpg” style=”Filter: Blur(Add = true, Direction = 45, Strength = 10)”>

Có thể ta ̣o mô ̣t dòng chữ nhoè bằng đoa ̣n mã:

<span style=”width:400; height:40; text-align:center; family:Tahoma;

font-size:18pt; color:#FF0000; font-weight:bold; Filter:Blur(Add = false, Direction = 45, Strength = 3)”> Xin chao cac ban </span>

Ý 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ỡ

Để ta ̣o dòng chữ có bóng (shadow) ta dùng đoa ̣n mã sau:

<span style=”width:400; height:40; text-align:center; family:Tahoma;

font-size:18pt; color:#00FF00; font-weight:bold; Filter:DropShadow (Color=#000080, OffX=3, OffY=3, Positive=true)” > Xin chao cac ban </span>

Ta ̣o dòng chữ sáng rực rỡ với đoa ̣n mã sau:

<span style=”width:400; height:40; text-align:center; family:Tahoma;

font-size:18pt; color:#008000; font-weight:bold; Filter:Glow(Color=#FFFF00,

Strength=6)”>Xin chao cac ban </span>

Ý 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) ta ̣o bóng từ những điểm không trong suốt hay trong suốt

Trên đây là mô ̣t số hiê ̣u ứng tiêu biểu, chúng có thể dùng được trong môi trường IE từ 4.0 trở lên, các ba ̣n có thể liên hê ̣ với tôi để lấy file HTML minh ho ̣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, ta ̣o những hiê ̣u ứng “đô ̣c chiêu” hơn

nguyenthang-tayninh.violet.vn