Trình tạo CSS Glassmorphism

 (ui.glass)
7 điểm bởi xguru 2021-08-29 | 2 bình luận | Chia sẻ qua WhatsApp

  • Xu hướng thiết kế UI được sử dụng trên macOS Big Sur / Windows 11

  • Hiển thị nền của phần tử phía trên dưới dạng làm mờ từ hình ảnh/màu sắc/hoa văn nằm bên dưới

→ sử dụng backdrop-filter: blur()

  • Có thể chỉ định ảnh nền/màu sắc/gradient và điều chỉnh giá trị blur, độ trong suốt, độ bão hòa

Bài viết liên quan

2 bình luận

 
galadbran 2021-08-29

Tôi cứ thấy lạ vì dù thay đổi giá trị blur và saturation thế nào thì cũng chẳng có gì khác đi, hóa ra trên Edge thì chạy tốt còn trên Firefox thì không.. haha
 
joyfui 2021-08-29

Tôi cũng dùng Firefox nên đã tự hỏi khác biệt là gì, hóa ra Firefox vẫn chưa hỗ trợ mặc định tính năng này..

https://developer.mozilla.org/ko/docs/Web/CSS/backdrop-filter

Có vẻ là nếu thay đổi thiết lập trong about:config thì nó sẽ hoạt động.