Glassmorphism-CSS-Generator

 (ui.glass)
7 Punkte von xguru 2021-08-29 | 2 Kommentare | Auf WhatsApp teilen

  • Ein UI-Design-Trend, der in macOS Big Sur / Windows 11 verwendet wird

  • Der Hintergrund des übergeordneten Elements wird in einer unscharfen Form des darunterliegenden Bildes/der Farbe/des Musters dargestellt

→ Verwendung von backdrop-filter: blur()

  • Hintergrundbild/Farbe/Verlauf festlegbar sowie Blur-Wert, Transparenz und Sättigung anpassbar

Verwandte Beiträge

2 Kommentare

 
galadbran 2021-08-29

Ich fand es seltsam, weil sich selbst dann nichts verändert hat, wenn ich die Werte für blur und saturation beliebig angepasst habe. Aber in Edge funktioniert es gut, in Firefox dagegen nicht … haha
 
joyfui 2021-08-29

Ich nutze auch Firefox und habe mich gefragt, was der Unterschied ist, aber offenbar unterstützt Firefox das bisher noch nicht standardmäßig..

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

Wenn man die Einstellung in about:config ändert, scheint es zu funktionieren.