CSS Filters là một công nghệ cho phép bạn áp dụng các hiệu ứng trực tiếp trên hình ảnh hoặc phần tử HTML của trang web của bạn. Điều này có thể giúp bạn tạo ra những hiệu ứng tuyệt vời để cải thiện trải nghiệm của người dùng trên trang web của bạn. Trong bài viết này, chúng ta sẽ tìm hiểu về CSS Filters và các hiệu ứng mà nó có thể tạo ra.
Cách sử dụng CSS Filters
1. Giới thiệu về CSS Filters
CSS Filters được đưa vào sử dụng trong CSS3. Nó cho phép bạn áp dụng các hiệu ứng trực tiếp trên hình ảnh hoặc phần tử HTML của trang web của bạn. CSS Filters có thể được sử dụng để thay đổi màu sắc, độ sáng, độ tương phản, mờ, xóa bỏ nền, tạo đổ bóng và nhiều hiệu ứng khác.
2. Các hiệu ứng sử dụng CSS Filters
2.1 Đổi màu sắc
Bạn có thể sử dụng CSS Filters để thay đổi màu sắc của một hình ảnh hoặc phần tử HTML. Ví dụ, bạn có thể sử dụng bộ lọc “hue-rotate” để thay đổi màu sắc của hình ảnh:
img {
filter: hue-rotate(90deg);
}Trong đó, “90deg” là số độ xoay của màu sắc của hình ảnh.
2.2 Điều chỉnh độ sáng và độ tương phản
Bạn có thể sử dụng bộ lọc “brightness” và “contrast” để điều chỉnh độ sáng và độ tương phản của hình ảnh hoặc phần tử HTML:
img {
filter: brightness(150%) contrast(200%);
}Trong đó, “150%” là độ sáng và “200%” là độ tương phản của hình ảnh.
2.3 Mờ và xóa bỏ nền
Bạn có thể sử dụng bộ lọc “blur” để làm mờ hình ảnh hoặc phần tử HTML và “opacity” để xóa bỏ nền:
img {
filter: blur(5px) opacity(0.5);
}Trong đó, “5px” là mức độ mờ của hình ảnh và “0.5” là độ trong suốt của nền.
2.4 Tạo đổ bóng
Bạn có thể sử dụng bộ lọc “drop-shadow” để tạo đổ bóng cho hình ảnh hoặc phần tử HTML:
img {
filter: drop-shadow(10px 10px);
}Trong đó, “10px 10px” là tọa độ của đổ bóng, có thể được thay đổi để tạo ra hiệu ứng đổ bóng khác nhau.
3. Cách sử dụng CSS Filters
Để sử dụng CSS Filters, bạn có thể sử dụng thuộc tính “filter” trong CSS. Cú pháp của thuộc tính này là:
selector {
filter: filter-function(value);
}Trong đó, “selector” là phần tử HTML hoặc lớp/ID của phần tử, “filter-function” là tên của bộ lọc mà bạn muốn sử dụng và “value” là giá trị của bộ lọc đó. Ví dụ:
img {
filter: grayscale(100%);
}Trong đó, “grayscale” là bộ lọc và “100%” là giá trị của bộ lọc đó.
4. Danh sách các bộ lọc CSS Filters
Dưới đây là danh sách các bộ lọc mà bạn có thể sử dụng với thuộc tính “filter” trong CSS:
- blur(): Làm mờ một phần tử HTML.
img { filter: blur(5px); } - brightness(): Thay đổi độ sáng của một phần tử HTML.
img { filter: brightness(50%); } - contrast(): Thay đổi độ tương phản của một phần tử HTML.
img { filter: contrast(200%); } - grayscale(): Chuyển đổi một phần tử HTML thành ảnh đen trắng.
img { filter: grayscale(100%); } - hue-rotate(): Quay màu sắc của một phần tử HTML.
img { filter: hue-rotate(90deg); } - invert(): Đảo ngược màu sắc của một phần tử HTML.
img { filter: invert(100%); } - opacity(): Thay đổi độ mờ của một phần tử HTML.
img { filter: opacity(50%); } - saturate(): Thay đổi độ bão hòa màu sắc của một phần tử HTML.
img { filter: saturate(200%); } - sepia(): Chuyển đổi một phần tử HTML thành ảnh có hiệu ứng nâu.
img { filter: sepia(100%); } - drop-shadow(): Tạo ra hiệu ứng đổ bóng cho một phần tử HTML.
img { filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.5)); }
Bạn cũng có thể sử dụng nhiều bộ lọc cùng một lúc bằng cách cách nhau bởi khoảng trắng. Ví dụ:
img { filter: grayscale(100%) contrast(200%); }Trong đó, hình ảnh sẽ được chuyển đổi thành ảnh đen trắng và tăng độ tương phản lên 200%.
5. Kết luận
CSS Filters là một công nghệ mạnh mẽ cho phép bạn tạo ra những hiệu ứng tuyệt vời trên trang web của bạn. Bằng cách sử dụng các bộ lọc khác nhau, bạn có thể thay đổi màu sắc, độ sáng, độ tương phản, mờ, xóa bỏ nền, tạo đổ bóng và nhiều hiệu ứng khác trên hình ảnh hoặc phần tử HTML của trang web của bạn.