Podcast CSS – 023: Filter
Giả sử bạn cần tạo một phần tử có hiệu ứng kính mờ, mờ một chút 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 như thế nào?
Sự kết hợp giữa các bộ lọc CSS và backdrop-filter
cho phép chúng ta áp dụng các 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 của chú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 bạn áp dụng sai một bộ lọc, thì 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, đó 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
Để 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 đó, các giá trị trong khoảng từ 0% đến 100% sẽ làm cho hình ảnh ít 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ử hoàn toàn bão hoà.
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
Tương tự 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ử 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 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ố: số hoặc 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 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 tỷ lệ phần trăm làm đối số cho sepia() để tăng hoặc giảm hiệu ứ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 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 góc rẽ, thì màu đó sẽ thay đổi màu sắc của tất cả màu của phần tử, thay đổi phần bánh xe màu mà nó tham chiếu. Nếu bạn không truyền đối số nào, thì hàm này không thực hiện được 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.
Thuộc tính này gần giống với box-shadow, nhưng từ khoá inset và giá trị chênh lệch 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 bộ 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, 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. 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?
grayscale()invert()flip()multiply()blur()brightness()CSS có thể sử dụng bộ lọc SVG không?
url() cho phép điều này