Làm mờ nền giống các thiết kế của các hệ điều hành với backdrop-filter - NLD Blog

Hiệu ứng làm mờ nền là cách phôt biến và hiệu quả để tạo chiều sâu cho nội dung với việc vẫn giữ bối cảnh của nội dung nhưng làm mờ nó đi. Việc làm mờ này các bạn cũng có thể dễ gặp trong 2 hệ điều hành Windows, IOS và MacOS.

Trước đây việc tạo ra nền mờ giống các hệ điều hành là rất khó khăn, những năm gần đây thì các trình duyệt đã dần phát hỗ trợ việc này với thuộc tính backdrop-filter.

Hiện tại thuộc tính backdrop-filter chỉ hỗ trợ Google Chrome từ bản 76 và Saferi 9 trở đi với tiền tố -webkit-. Các bạn cũng có thể kiểm tra việc hỗ trợ thuộc tính backdrop-filter của các trình duyệt tại đây.

Cơ bản về backdrop-filter

• Backdrop Filter được thêm vào như là một phần của đặt tả CSS Filter và vì vậy, cũng giống như thuộc tính filter, nó thừa kế tất cả những chức năng lọc tương tự chẳng hạn như grayscale(), blur(), và sepia(). Sự khác biệt duy nhất ở đây là nó sẽ tác dụng lên các yếu tố bên dưới của các phần tử được lựa chọn.
• Phần tử áp dụng backdrop-filter phải có động trong xuất nhất định.

Phần tử không có độ trong xuốt

.glass-element {
backdrop-filter: blur(2px);
}

Phần tử có độ trong xuốt

.glass-element {
opacity: .9;
backdrop-filter: blur(2px);
}

Sử dụng backdrop-filter

Như đã nói ở trên để áp dụng backdrop-filter thì phần tử chúng ta cần phải cố độ tròn suốt nhất định bằng cách áp dụng thêm thuộc tính opactity hoặc sự dụng background với thuộc tính rgba.

.blur-behind-me {
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(.5rem);
}

Xem ví dụ trên codepen

Áp dụng 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ữ blur() của chúng ta, nhưng thêm hàm grayscale() để 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:

• brightness(): nhận một con số từ 0 tới vô cùng, hoặc phần trăm. Bất kỳ số nào dưới 1, ví dụ như 0.8, sẽ làm tối các phần tử, và thiết lập bất kỳ số nào trên 1 sẽ làm sáng các phần tử.
• contrast(): nhận một con số và tỷ lệ phần trăm, làm việc tương tự như hàm brightness(), ngoại trừ hàm này xác định độ tương phản của phần tử.
• invert(): hàm tạo ra những màu sắc đối ngịch hoặc tiêu cực so với phông nền. Tương tự, các hàm cũng chấp nhận giá trị là một con số và tỷ lệ phần trăm.

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.

Thuộc tính backdrop-filter cũng chưa được hỗ trợ nhiều việc đó có thể thấy thuộc tính url() vẫn chưa được hoạt động trên các trình duyệt hiện tại.

Bài viết có tham khảo nguồn tại: web.dev