Thiết lập nền trong phần tử đầu tiên với độ trong suốt thấp vì vậy chúng ta có thể thêm
element
3 bằng một hàm, ví dụ,
element
0 để chuyển thành nền trắng và đen..filter { -webkit-backdrop-filter: blur[10px]; /* Safari 9+ */ backdrop-filter: blur[10px]; /* Chrome and Opera */ background-color: rgba[255, 255, 255, 0.3]; }
Lưu ý trong demo sau đây các phần tử con của phần tử
element
5 [một nút trong trường hợp này] vẫn còn rõ nét cho dù thêm hàm
element
1. Đây là một điểm mạnh mà
element
3 có so với thuộc tính filter
; nơi mà các phần tử con bị tác động.Lưu ý: hình ảnh ở đây được lấy từ bài hướng dẫn How to Create a Little Red Riding Hood Inspired Fairytale Illustration in Paint Tool SAI.: hình ảnh ở đây được lấy từ bài hướng dẫn How to Create a Little Red Riding Hood Inspired Fairytale Illustration in Paint Tool SAI.
Kết hợp nhiều bộ lọc
Kết hợp hai chức năng lọc trong một định nghĩa cũng được chấp nhận. Ví dụ, giữ
element
1 của chúng ta, nhưng thêm hàm
element
0 để tách phông nền..filter { -webkit-backdrop-filter: grayscale[] blur[10px]; /* Safari 9+ */ backdrop-filter: grayscale[] blur[10px]; /* Chrome and Opera */ background-color: rgba[255, 255, 255, 0.3]; }
Các hàm khác mà bạn có thể thêm vào hỗn hợp bao gồm:
Bộ lọc nâng cao với SVG
Nếu bạn không thể tìm thấy hiệu ứng mong muốn từ các hàm mặc định, bạn luôn có thể thêm một bộ lọc nâng cao hơn thông qua SVG. Tạo một bộ lọc SVG với một ID duy nhất, và lưu nó trong một tập tin
8:
Tham chiếu đến bộ lọc với hàm
9, như sau.
.filter { -webkit-backdrop-filter: url[../images/filter.svg#morph]; /* Safari 9 */ backdrop-filter: url[../images/filter.svg#morph]; /* Chrome and Opera */ }
Thật không may, thêm các bộ lọc với hàm
9 có vẻ như không làm việc trong trình duyệt ở thời điểm hiện tại. Nhưng một khi được cài đặt đúng, hình ảnh sẽ trông như thế này.
Cần xây dựng những gì?
Hiện có một số cài đặt thực tế trên các trang web mà chúng ta có thể áp dụng backdrop filter một cách có ý nghĩa hơn chỉ là một sự trang trí. Một ví dụ hay là Medium, làm mờ ảnh bìa của bài viết cũng như các hình ảnh trong nội dung bài viết trước khi hình ảnh được nạp đầy đủ.
Một ví dụ thực tế khác là Facebook, nó cũng làm mờ các tấm hình người lớn, không phù hợp hoặc nội dung gây rối loạn, trước khi người dùng đồng ý xem đầy đủ hình ảnh.
Kết luận
Trong những năm qua, CSS đã được cải tiến bằng các đặc tả kỹ thuật mới cho phép nhà thiết kế xây dựng giao diện hấp dẫn hơn trên web. Transform, transition, and animation đã được cài đặt đầy đủ, và bây giờ là Backdrop Filter cũng đang hướng đến chúng ta.
Cho dù nó có thể còn quá sớm để sử dụng backdrop-filter trong sản phẩm, thì những demo này chỉ ra rằng chúng ta sẽ sớm có thể áp dụng các hiệu ứng lọc vào các phần tử theo cách đơn giản hơn và cuối cùng ít phụ thuộc hơn vào JavaScript hoặc các thư viện Canvas. Cho đến lúc đó, theo dõi trang Blog của Webkit để cập nhật về điều này và các dự án khác.
Các nguồn tài nguyên khác
- Bản thảo Backdrop Filter: Bản thảo W3C
- Trình duyệt hỗ trợ Backdrop Filter
- Các pen về Backdrop Filter trên CodePen