CSS (Cascading Style Sheets) là một trong những phương tiện được sử dụng để tạo ra các hiệu ứng trực quan cho các đối tượng trên webpage. Trong CSS, filter property được sử dụng để áp dụng các hiệu ứng thị giác lên văn bản, hình ảnh và các khía cạnh khác của một webpage. Các hiệu ứng này có thể được sử dụng để thay đổi màu sắc, làm mờ hoặc chỉnh sửa hình dạng của các đối tượng.
Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.
CSS filter là gì ?
CSS filter được sử dụng để thêm các hiệu ứng vào các đối tượng trên webpage. Ví dụ, bạn có thể sử dụng CSS filter để thay đổi màu sắc của một ảnh, làm mờ nó hoặc áp dụng bóng đổ. Filter này sẽ được áp dụng trước khi đối tượng được hiển thị. Các hiệu ứng này được định nghĩa bởi các giá trị thuộc tính filter property.
CSS filter được sử dụng rộng rãi trong lĩnh vực thiết kế web. Những người làm việc với CSS sẽ sử dụng các thuộc tính filter để tạo ra các đối tượng trên webpage trở nên hấp dẫn và thú vị hơn. Ngoài ra, CSS filter cũng có thể được sử dụng bởi những người mới bắt đầu học thiết kế web để tạo ra các hiệu ứng chuyển động mượt mà và thu hút sự chú ý của người dùng.
Hướng dẫn CSS filter
Các hiệu ứng trong CSS filter được xác định bởi các giá trị thuộc tính filter property. Bạn có thể sử dụng các giá trị này để tạo ra các hiệu ứng khác nhau cho các đối tượng trên webpage.
Bên dưới là một ví dụ cụ thể khi dùng hiệu ứng blur:
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: blur(2px);
}
</style>
</head>
<body>
<img src = "tiger.png" > <h2>Original Image </h2>
<img src = "tiger.png" id = "img1"> <h2>blur(2px)</h2>
</body>
</html>Kết Quả:
Dưới đây là tất cả 10 giá trị của thuộc tính filter property:
brightness()
Thuộc tính này được sử dụng để điều chỉnh độ sáng của một đối tượng trên webpage. Giá trị từ 0% đến 100% được sử dụng để kiểm soát độ sáng của đối tượng. Giá trị 0% sẽ biểu thị cho một đối tượng hoàn toàn màu đen, và 100% sẽ biểu thị cho đối tượng gốc ban đầu. Các giá trị lớn hơn 100% cũng có thể được sử dụng để tăng độ sáng của đối tượng.
Ví dụ:
img {
filter: brightness(50%);
}blur()
Thuộc tính này được sử dụng để làm mờ đối tượng trên webpage. Khi giá trị của thuộc tính này không được chỉ định, giá trị mặc định là 0. Giá trị của parameter trong thuộc tính blur() không chấp nhận các giá trị phần trăm. Nếu bạn muốn tạo ra một hiệu ứng mờ hơn thì hãy sử dụng giá trị lớn hơn.
Ví dụ:
img {
filter: blur(5px);
}invert()
Thuộc tính này được sử dụng để đảo ngược các mẫu trong hình ảnh đầu vào. Giá trị 100% biểu thị cho các mẫu hoàn toàn bị đổi, và giá trị 0% để lại hình ảnh đầu vào không thay đổi. Không cho phép sử dụng các giá trị âm.
Ví dụ:
img {
filter: invert(100%);
}saturate()
Thuộc tính này được sử dụng để điều chỉnh độ bão hòa của một đối tượng trên webpage. Giá trị 0% biểu thị cho một đối tượng không có độ bão hòa, trong khi giá trị 100% biểu thị cho đối tượng gốc ban đầu. Các giá trị lớn hơn 100% cũng có thể được sử dụng để tạo ra kết quả với độ bão hòa cao hơn. Không cho phép sử dụng các giá trị âm.
Ví dụ:
img {
filter: saturate(200%);
}drop-shadow()
Thuộc tính này được sử dụng để áp dụng một hiệu ứng bóng trên hình ảnh đầu vào. Giá trị h-shadow, v-shadow, blur, spread và color được sử dụng để xác định chính xác hiệu ứng muốn tạo ra.
Ví dụ:
img {
filter: drop-shadow(3px 3px 10px #888888);
}contrast()
Thuộc tính này được sử dụng để điều chỉnh độ tương phản của một đối tượng trên webpage. Giá trị 0% sẽ tạo ra một hình ảnh hoàn toàn màu đen, trong khi giá trị 100% để lại đối tượng ban đầu, tức là không thay đổi gì. Các giá trị lớn hơn 100% cũng có thể được sử dụng để tạo ra kết quả với độ tương phản thấp hơn.
Ví dụ:
img {
filter: contrast(150%);
}opacity()
Thuộc tính này được sử dụng để áp dụng tính trong suốt cho hình ảnh đầu vào. Giá trị 0% biểu thị cho hình ảnh hoàn toàn trong suốt, trong khi giá trị 100% biểu thị cho hình ảnh gốc ban đầu, tức là không có tính trong suốt gì.
Ví dụ:
img {
filter: opacity(50%);
}hue-rotate()
Thuộc tính này được sử dụng để xoay màu sắc của hình ảnh đầu vào. Giá trị perimeter xác định số độ quanh vòng màu sắc mà hình ảnh sẽ bị xoay. Giá trị mặc định là 0 độ, tương ứng với hình ảnh gốc ban đầu. Giá trị tối đa là 360 độ.
Ví dụ:
img {
filter: hue-rotate(90deg);
}grayscale()
Thuộc tính này được sử dụng để chuyển đổi hình ảnh đầu vào thành màu xám. Giá trị 0% sẽ giữ nguyên hình ảnh gốc ban đầu, trong khi giá trị 100% biểu thị cho một hình ảnh hoàn toàn màu xám. Nó chuyển đổi các màu của đối tượng thành 256 cấp độ màu xám.
Ví dụ:
img {
filter: grayscale(50%);
}sepia()
Thuộc tính này được sử dụng để chuyển đổi hình ảnh đầu vào thành hình ảnh xưa. Giá trị 0% biểu thị cho hình ảnh gốc ban đầu, trong khi giá trị 100% biểu thị cho một hình ảnh hoàn toàn màu xưa.
Ví dụ:
img {
filter: sepia(80%);
}Ưu và Nhược điểm CSS filter
Ưu điểm
- Cho phép người dùng tùy chỉnh các hiệu ứng hình ảnh một cách dễ dàng với CSS filter.
- Tăng tính tương tác của website và thu hút sự chú ý từ người dùng.
- Có thể áp dụng cho bất kỳ loại hình ảnh nào trên website.
Nhược điểm
- Không được hỗ trợ đầy đủ trên mọi trình duyệt web.
- Sử dụng quá nhiều CSS filter có thể làm giảm hiệu suất của website.
- Hiệu ứng có thể không được nhìn rõ trên các hình ảnh với độ phân giải thấp.
Lời khuyên CSS filter
- Chọn các hiệu ứng phù hợp với nội dung hình ảnh trên website, tránh sử dụng quá nhiều hiệu ứng một lúc.
- Kiểm tra tính tương thích của hiệu ứng trên các trình duyệt web khác nhau trước khi áp dụng vào website.
- Sử dụng CSS filter một cách tối ưu để tránh làm giảm hiệu suất của website.
- Áp dụng CSS filter cho các hình ảnh có độ phân giải cao để hiệu ứng được thể hiện rõ ràng.
Kết luận
CSS filter là một công cụ mạnh mẽ để tạo ra các hiệu ứng hình ảnh trên website. Tuy nhiên, chúng ta cần phải sử dụng chúng một cách hợp lý để tránh ảnh hưởng đến tính tương thích và hiệu suất của website. Bằng cách áp dụng các lời khuyên và kiểm tra tính tương thích trước khi sử dụng, chúng ta có thể tận dụng được tất cả những lợi ích của CSS filter trong việc tạo ra các hiệu ứng hình ảnh độc đáo và thu hút người dùng trên website.
CSS filter hoạt động như thế nào?
CSS filter cho phép người dùng tùy chỉnh các hiệu ứng hình ảnh, âm thanh và video bằng cách sử dụng một loạt các thuộc tính CSS.
Có bao nhiêu loại hiệu ứng CSS filter?
CSS filter hiện có 10 loại hiệu ứng khác nhau.
CSS filter có tương thích với tất cả các trình duyệt web không?
Không, một số trình duyệt web không hỗ trợ đầy đủ CSS filter.
Tôi có thể sử dụng CSS filter cho bất kỳ loại hình ảnh nào trên website không?
Có, CSS filter có thể áp dụng cho bất kỳ loại hình ảnh nào trên website.
Sử dụng quá nhiều CSS filter có ảnh hưởng đến hiệu suất của website không?
Có, sử dụng quá nhiều CSS filter có thể làm giảm hiệu suất của website.