Đang tải dữ liệu...
Thiên đường website
Liên hệ
Chính sách
Khách hàng
Giới thiệu
Trang chủ
 
Dịch vụ
  • Thiết kế website
  • Hosting
  • Thiết kế đồ họa
  • SEO tăng thứ hạng
  • Nâng cấp website
  • Dịch vụ nhập liệu
  • Website cho điện thoại
  • Tích hợp thanh toán trực tuyến
  • Dịch vụ google cloud, ec2 cloud
  • SEO tools
  • Đọc tin Rss
Kiến thức cho bạn
  • Trao đổi - học tập
    • Jquery (2)
    • NoSQL (4)
    • NodeJs (1)
    • Lập trình iOS (3)
    • Thủ thuật - kinh nghiệm (33)
    • Lập trình website (63)
    • Tối ưu hóa (11)
    • Mã nguồn (20)
    • SEO (35)
    • Bảo mật (9)
    • htaccess (5)
    • Ebook - tài liệu (4)
    • WYSIWYG (3)
    • Phần mềm (11)
    • Photoshop (5)
  • Thư giản - giải trí
    • Sáng tạo (5)
    • Địa điểm vui chơi (5)
    • Quà tặng (2)
    • Truyện -hình vui (9)
    • Video clip (9)
    • Game (3)
Hỗ trợ trực tuyến
Kỹ thuật : 098 7277 329
vfa.hoangnn - Mr. Hoàng
Tư vấn : 090 282 4547
vfa.hoangnn - Mr. Hoàng
Đối tác
New day TravalReview CompanyMua sắm cả ngày


Mỹ phẩm The Face Shop
Mã giảm giá - Code khuyến mãi
Ốp lưng, Bao da Đẹp
Giá vàng, giá USD
Ốp lưng tự thiết kế
Aug
12

Thiết kế web thêm sinh động với thuộc tính Filter

00:35 am GMT +7 Hanoi |
Trang chủ ›
Trao đổi - học tập ›
Lập trình website

Thêm vào trang Google +

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
CODE

<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 đoạn mã sau:
CODE

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

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


Để lật một dòng chữ theo chiều ngang ta dùng đoạn mã sau:
CODE

<span 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
</span>


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

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


Để chuyển một bức ảnh thành ảnh âm bản ta dùng đoạn mã sau:
CODE

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


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

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


Đoạn mã để tạo dòng chữ lượn sóng:
CODE

<span 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
</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 độ 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ã:
CODE

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


Tạo bức ảnh mờ, có khung ngoài tròn bằng đoạn mã:
CODE

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


Tạo một bức ảnh có tia sáng chiếu vào với đoạn mã sau:
CODE

<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 đị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 tạo một bức ảnh nhoè dùng đoạn mã sau:
CODE

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


Có thể tạo một dòng chữ nhoè bằng đoạn mã:
CODE

<span 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
</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ỡ
Để tạo dòng chữ có bóng (shadow) ta dùng đoạn mã sau:
CODE

<span 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
</span>


Tạo dòng chữ sáng rực rỡ với đoạn mã sau:
CODE

<span 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
</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) tạ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 bạn có thể liên hệ với tô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.


Thegioiweb.vn (Theo PC World)

Thêm vào trang Google +
Số lần xem : 6038
Đánh giá
Facebook

Bài viết liên quan
  • 06/02/2015 16:16 html to image php script
  • 08/12/2014 11:22 Hướng dẫn cài đặt website php, mysql trên google app engine
  • 16/08/2014 15:41 Top 10 mẫu web đẹp ấn tượng
  • 11/09/2013 08:47 Cách dùng ob start , ob flush(), flush()
  • 30/01/2013 10:23 Tạo dịch vụ API trong PHP, PHP API rest
Bài viết mới hơn

<< Trang trước


Thienduongweb.com - Thiết kế website, tạo gian hàng miễn phí
Địa chỉ trụ sở chính: 241/45 Tân Hòa Đông, F14, Quận 6, TP.HCM
Email: info@thienduong.com
Điện thoại: 098 7277329