Podcast CSS – 023: Bộ lọc
Giả sử bạn cần tạo một phần tử có hiệu ứng kính mờ, hơi mờ đục nằm phía trên hình ảnh. Văn bản phải là văn bản trực tiếp chứ không phải hình ảnh. Bạn làm cách nào để thực hiện điều đó?
Sự kết hợp giữa bộ lọc CSS và backdrop-filter cho phép chúng tôi áp dụng các hiệu ứng và làm mờ những gì cần thiết theo thời gian thực.
Độ mờ và độ mờ là hai trong số nhiều bộ lọc có sẵn, vì vậy, hãy cùng xem qua chức năng của tất cả các bộ lọc này và cách sử dụng chúng.
Thuộc tính filter
Bạn có thể áp dụng một hoặc nhiều bộ lọc sau làm giá trị cho filter.
Nếu bạn áp dụng sai một bộ lọc, các bộ lọc còn lại được xác định cho filter sẽ không hoạt động.
blur
Điều này áp dụng độ mờ gaussian và đối số duy nhất bạn có thể truyền là radius,
tức là mức độ mờ được áp dụng.
Đó phải là một đơn vị độ dài, chẳng hạn như 10px. Tỷ lệ phần trăm không được chấp nhận.
.my-element {
filter: blur(0.2em);
}
brightness
Để tăng hoặc giảm độ sáng của một phần tử, hãy sử dụng chức năng độ sáng. Giá trị độ sáng được biểu thị dưới dạng phần trăm, trong đó hình ảnh không thay đổi được biểu thị bằng giá trị 100%. Giá trị 0% sẽ chuyển hình ảnh thành màu đen hoàn toàn, do đó, giá trị từ 0% đến 100% sẽ làm giảm độ sáng của hình ảnh. Sử dụng các giá trị trên 100% để tăng độ sáng.
.my-element {
filter: brightness(80%);
}
contrast
Đặt một giá trị từ 0% đến 100% để giảm hoặc tăng độ tương phản tương ứng.
.my-element {
filter: contrast(160%);
}
grayscale
Bạn có thể áp dụng hiệu ứng thang màu xám hoàn toàn bằng cách sử dụng 1 làm giá trị cho grayscale() hoặc 0 để có một phần tử bão hoà hoàn toàn.
Bạn cũng có thể sử dụng giá trị phần trăm hoặc giá trị thập phân để chỉ áp dụng một phần hiệu ứng thang màu xám.
Nếu bạn không truyền đối số, phần tử sẽ chuyển sang thang màu xám hoàn toàn.
Nếu bạn vượt qua một giá trị lớn hơn 100% thì giá trị đó sẽ bị giới hạn ở mức 100%.
.my-element {
filter: grayscale(80%);
}
invert
Giống như grayscale, bạn có thể truyền 1 hoặc 0 đến hàm invert() để bật hoặc tắt. Khi bật, màu của phần tử sẽ hoàn toàn đảo ngược.
Bạn cũng có thể sử dụng giá trị phần trăm hoặc giá trị thập phân để chỉ áp dụng việc đảo ngược một phần màu.
Nếu bạn không truyền bất kỳ đối số nào vào hàm invert(), phần tử này sẽ bị đảo ngược hoàn toàn.
.my-element {
filter: invert(1);
}
opacity
Bộ lọc opacity() hoạt động giống như thuộc tính opacity, trong đó bạn có thể truyền một số hoặc tỷ lệ phần trăm để tăng hoặc giảm độ mờ.
Nếu bạn không truyền đối số nào, phần tử này sẽ hiển thị đầy đủ.
.my-element {
filter: opacity(0.3);
}
saturate
Bộ lọc độ bão hoà rất giống với bộ lọc brightness và chấp nhận cùng một đối số: số hoặc tỷ lệ phần trăm.
Thay vì tăng hoặc giảm hiệu ứng độ sáng, saturate sẽ tăng hoặc giảm độ rực màu.
.my-element {
filter: saturate(155%);
}
sepia
Bạn có thể thêm hiệu ứng tông màu nâu đỏ bằng bộ lọc này, giống như grayscale().
Tông màu nâu đỏ là một kỹ thuật in ảnh chuyển đổi tông màu đen sang tông màu nâu để làm ấm ảnh.
Bạn có thể truyền một số hoặc tỷ lệ phần trăm làm đối số cho sepia() để tăng hoặc giảm hiệu ứng.
Việc không truyền đối số sẽ thêm hiệu ứng màu nâu đỏ đầy đủ (tương đương với sepia(100%)).
.my-element {
filter: sepia(70%);
}
hue-rotate
Bạn đã tìm hiểu cách màu sắc trong hsl tham chiếu đến chế độ xoay của bánh xe màu trong bài học về màu sắc và bộ lọc này hoạt động theo cách tương tự.
Nếu bạn truyền một góc, chẳng hạn như độ hoặc ngã rẽ, thì màu của tất cả phần tử sẽ thay đổi màu, thay đổi phần bánh xe màu mà nó tham chiếu đến. Nếu bạn không truyền đối số, thì thao tác này sẽ không có tác dụng gì.
.my-element {
filter: hue-rotate(120deg);
}
drop-shadow
Bạn có thể áp dụng hiệu ứng bóng đổ theo đường cong như trong một công cụ thiết kế, chẳng hạn như Photoshop với drop-shadow.
Bóng này được áp dụng cho mặt nạ alpha, rất hữu ích khi thêm bóng vào hình ảnh cắt.
Bộ lọc drop-shadow lấy một tham số đổ bóng chứa các giá trị chênh lệch-x, offset-y, mờ và màu được phân tách bằng khoảng trắng.
Thuộc tính này gần giống với box-shadow, nhưng từ khoá inset và giá trị trải rộng không được hỗ trợ.
.my-element {
filter: drop-shadow(5px 5px 10px orange);
}
Tìm hiểu thêm về các loại bóng trong mô-đun đổ bóng.
url
Bộ lọc url cho phép bạn áp dụng bộ lọc SVG từ một phần tử hoặc tệp SVG được liên kết.
Bạn có thể đọc thêm về bộ lọc SVG tại đây
Bộ lọc phông nền
Thuộc tính backdrop-filter chấp nhận tất cả các giá trị hàm lọc giống như filter.
Điểm khác biệt giữa backdrop-filter và filter là thuộc tính backdrop-filter chỉ áp dụng các bộ lọc cho nền, còn thuộc tính filter sẽ áp dụng cho toàn bộ phần tử.
Ví dụ ngay ở đầu bài này là ví dụ hoàn hảo, vì bạn không muốn văn bản bị mờ và lý tưởng nhất là bạn không muốn phải thêm các phần tử HTML khác. Khả năng chỉ áp dụng các bộ lọc cho phông nền sẽ cho phép điều đó.
Kiểm tra kiến thức
Kiểm tra kiến thức về bộ lọc
Mục nào sau đây là hàm bộ lọc CSS?
grayscale()invert()flip()multiply()blur()brightness()CSS có thể sử dụng bộ lọc SVG không?
url() cho phép