Glassmorphism CSS Oluşturucu

 (ui.glass)
7 puan yazan xguru 2021-08-29 | 2 yorum | WhatsApp'ta paylaş

  • macOS BigSur / Windows 11'de kullanılan bir UI tasarım trendi

  • Üst öğenin arka planını, alttaki görsel/renk/desenin bulanıklaştırılmış hali olarak gösterir

→ backdrop-filter: blur() kullanır

  • Arka plan görseli/renk/gradient belirleme ile blur değeri, saydamlık ve saturation ayarlanabilir

İlgili okumalar

2 yorum

 
galadbran 2021-08-29

blur ve saturation değerlerini ne kadar değiştirsem de hiçbir şeyin değişmemesi garip gelmişti; meğer Edge'de düzgün çalışıyor ama Firefox'ta çalışmıyormuş.. haha
 
joyfui 2021-08-29

Ben de Firefox kullandığım için farkın ne olduğunu merak etmiştim; meğer Firefox bunu hâlâ varsayılan olarak desteklemiyormuş..

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

Görünüşe göre about:config ayarını değiştirince çalışıyor.