một số lệnh zui cho web

Tìm kiếm

Display results as : Số bài Chủ đề
Advanced Search

KUSHYPRO

LIAR

Posts Posts : 578

Points Points : 503595

Thanked Thanked : 9

Ngày Đăng Kí : 12/08/2010

Đến từ : -* LÃ‚M Äá»’NG

Châm Ngôn Sống : hÃ£y Sá»‘ng nhÆ° ngay mai báº¡n cháº¿t? :))

Sat Dec 18, 2010 12:36 pm

Chỉ hiển thị đc cho ie

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:

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:
style=”width:400; height:100; text-align:center; font-family:Tahoma;
font-size:18pt; color:#FF0000; font-weight:bold; Filter:FlipV “> 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:

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

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:
style=”width:400; height:100; text-align:center; font-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

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̃:

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

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̃:
style=”width:400; height:40; text-align:center; font-family:Tahoma;
font-size:18pt; color:#FF0000; font-weight:bold; Filter:Blur(Add =
false, Direction = 45, Strength = 3)”> 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:

style=”width:400; height:40; text-align:center; font-family:Tahoma;
font-size:18pt; color:#00FF00; font-weight:bold; Filter:DropShadow
(Color=#000080, OffX=3, OffY=3, Positive=true)” > Xin chao cac ban

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

style=”width:400; height:40; text-align:center; font-family:Tahoma;
font-size:18pt; color:#008000; font-weight:bold;
Filter:Glow(Color=#FFFF00, Strength=6)”>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.

ҳ̸Ҳ̸ҳ 12a2tanha ҳ̸Ҳ̸ҳ

ҳ̸Ҳ̸ҳ 12a2tanha ҳ̸Ҳ̸ҳ

Đăng Nhập

Đăng Ký

một số lệnh zui cho web

Similar topics

Similar topics