Podcast CSS – 023: Bộ lọc
Giả sử bạn cần tạo một phần tử có độ mờ một chút, hiệu ứng kính mờ phủ lên 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 như thế nào?
Kết hợp bộ lọc CSS và backdrop-filter
chúng tôi có thể áp dụng hiệu ứng và làm mờ những nội dung cần thiết theo thời gian thực.
Làm mờ và độ mờ là hai trong số nhiều bộ lọc có sẵn,
Vì vậy, hãy xem nhanh chức năng 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 đây làm giá trị cho
filter
.
Nếu áp dụng sai 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
Thao tác này sẽ áp dụng hiệu ứng làm 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.
Đây phải là một đơn vị chiều 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
Cách 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, nên giá trị trong khoảng từ 0% đến 100% sẽ làm cho hình ảnh kém sáng hơn. Sử dụng các giá trị trên 100% để tăng độ sáng.
.my-element {
filter: brightness(80%);
}
contrast
Đặt giá trị trong khoảng 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 dùng 1
làm giá trị cho grayscale()
,
hoặc 0
để có phần tử bão hoà hoàn toàn.
Bạn cũng có thể 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ố nào, phần tử này sẽ hoàn toàn có thang màu xám.
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
vào hàm invert()
để bật hoặc tắt.
Khi bật, màu của phần tử sẽ đảo ngược 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 đả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ử 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
,
nơi bạn có thể chuyển một số hoặc phần trăm để tăng hoặc giảm độ mờ.
Nếu bạn không truyền đối số nào thì phần tử 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ố:
con số hoặc tỷ lệ phần trăm.
Thay vì tăng hoặc giảm hiệu ứng độ sáng,
saturate
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 hoạt độ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 thành tông màu nâu để tạo cảm giác ấm áp.
Bạn có thể truyền một số hoặc phần trăm làm đối số cho sepia()
để tăng hoặc giảm tác động.
Thao tác truyền không đố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 vượt qua một góc, chẳng hạn như độ hoặc rẽ,
nó làm đổi màu của tất cả màu của các phần tử,
thay đổi phần bánh xe màu tham chiếu. Nếu bạn không truyền đối số nào thì hàm này sẽ không thực hiện thao tác nào.
.my-element {
filter: hue-rotate(120deg);
}
drop-shadow
Bạn có thể áp dụng bóng đổ ôm theo đường cong như cách bạn thực hiện trong 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 nên rất hữu ích trong việc thêm bóng vào hình ảnh cắt bỏ.
Bộ lọc drop-shadow
lấy tham số đổ bóng chứa các giá trị độ lệch-x, độ lệch-y, mờ và màu phân tách theo không gian.
API 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
Bộ lọc phông nền
thuộc tính chấp nhận tất cả các giá trị hàm lọc giống như filter
.
Sự 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 chế độ nền
trong đó thuộc tính filter
áp dụng cho toàn bộ phần tử.
Ví dụ ngay ở đầu bài học này là một ví dụ hoàn hảo, bởi 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 thừa. Chỉ có thể áp dụng bộ lọc cho phông nền sẽ giúp bạn làm được điều đó.
Kiểm tra kiến thức
Kiểm tra kiến thức của bạn về bộ lọc
Mục nào sau đây là chức năng lọc CSS?
blur()
invert()
flip()
multiply()
grayscale()
brightness()
CSS có thể sử dụng bộ lọc SVG không?