tailieunhanh - Bài giảng Thiết kế Web: Chương 18 - Từ Thị Xuân Hiền

Bài giảng Thiết kế Web - Chương 18 giới thiệu về filter và trasition. Đây là hai loại hiệu ứng đặc biệt được áp dụng cho một đối tượng trong trang web. Chúng ta sẽ cùng tìm hiểu thêm về cách sử dụng 2 hiệu ứng này trong bài giảng sau đây. . | CHƯƠNG XVIII FILTER VÀ TRASITION FILTER 1. Khái niệm: Filter là hiệu ứng đặc biệt được áp dụng cho một đối tượng trong trang web để thay đổi sự thể hiện của nó. Hiệu ứng này chỉ được Internet Explorer hỗ trợ. 2. Cách tạo: Dùng CSS Dùng Javascript Sử dụng CSS: Cú pháp: Filter: filter_Name(list parameters) Một số filter thôngdụng Alpha(Opacity : 0-100, Style : 0,1,2,3 ):Bộ lọc trong suốt opacity từ 0 (trong suốt) tới 100 (bình thường). Style là kiểu lọc Blur(Direction:0-360, Strength:1-100, Add :0/1) (cộng hình gốc)Bộ lọc nhoè Direction: chiều làm nhoè tính theo góc, strength chỉ độ nhoè mạnh hay yếu Ví dụ: Chroma(color :#rrggbb):Làm cho màu chỉ định bởi color bị mất đi DropShadow(color : #rrggbb,OffX, OffY): Tạo bóng đổ xuống mặt phẳng phía dưới OffX và OffY tính bằng pixel là . | CHƯƠNG XVIII FILTER VÀ TRASITION FILTER 1. Khái niệm: Filter là hiệu ứng đặc biệt được áp dụng cho một đối tượng trong trang web để thay đổi sự thể hiện của nó. Hiệu ứng này chỉ được Internet Explorer hỗ trợ. 2. Cách tạo: Dùng CSS Dùng Javascript Sử dụng CSS: Cú pháp: Filter: filter_Name(list parameters) Một số filter thôngdụng Alpha(Opacity : 0-100, Style : 0,1,2,3 ):Bộ lọc trong suốt opacity từ 0 (trong suốt) tới 100 (bình thường). Style là kiểu lọc Blur(Direction:0-360, Strength:1-100, Add :0/1) (cộng hình gốc)Bộ lọc nhoè Direction: chiều làm nhoè tính theo góc, strength chỉ độ nhoè mạnh hay yếu Ví dụ: Chroma(color :#rrggbb):Làm cho màu chỉ định bởi color bị mất đi DropShadow(color : #rrggbb,OffX, OffY): Tạo bóng đổ xuống mặt phẳng phía dưới OffX và OffY tính bằng pixel là chênh lệch theo toạ độ x và y của hình gốc và bóng đổ FlipH( ):Lật hình theo chiều ngang FlipV( ):Lật hình theo chiều đứng Glow(color : #rrggbb, Strength : 1-255):Tạo quầng sáng quanh đối tượng Strength: độ rộng quầng sáng tính bằng pixel Color: xác định màu Gray( ): Thể hiện đối tượng theo thang độ xám Invert( ): Đảo ngược màu Light( ) :Tạo các nguồn sáng để chiếu sáng đối tượng Mask(Color : #rrggbb): Tạo mặt nạ với màu xác định bởi Color Shadow (Direction : 0-360, Color= #rrggbb): Tạo bóng đổ cho đối tượng color định màu cho bóng đổ Direction: Góc bóng Wave( ): Biến dạng đối tượng theo dạng sóng sin Xray( ): Làm cho đối tượng có hình ảnh như ảnh của film X quang Sử dụng JavaScript: Cú pháp: = “filter_name(parameters)” object : tên của của đối tượng trong trang. Nếu muốn kết hợp nhiều filter trong trang, ta phải phải phân cách chúng với nhau bằng dấu chấm phẩy Ví dụ: =“shadow(direction :60, color= #ff0000); alpha(opacity=60, Style =1 )" .