So funktioniert dieses Werkzeug
Der Effekt beruht auf einer einzigen Eigenschaft: backdrop-filter wendet einen Filter auf das an, was hinter einem Element liegt, statt auf das Element selbst. Diesen Hintergrund weichzeichnen, eine teiltransparente Tönung darüberlegen, und die Fläche wirkt wie mattiertes Glas. Der Sättigungsschub ist der Teil, der meist weggelassen wird, und der wichtigste — ohne ihn wird der weichgezeichnete Hintergrund matschig und das Ergebnis sieht nach Nebel aus statt nach Glas.
Die Tönung ist eine Farbe und eine Deckkraft, zu einem rgba-Wert zusammengeführt, und ein zarter heller Rahmen verkauft die Kante der Scheibe. Die eine harte Bedingung ist, dass hinter der Fläche etwas sein muss: Über einer einfarbigen Fläche gibt es nichts weichzuzeichnen und der Effekt bleibt unsichtbar — mit Abstand der häufigste Grund, warum eine kopierte Glassmorphism-Regel nichts zu tun scheint.
Die Kosten, und die sind real
- Nichts dahinter heißt nichts zum Weichzeichnen: Das Elternelement braucht ein Bild, einen Verlauf oder überlappenden Inhalt. Auf einfarbigem Grund ist die Fläche nur ein getöntes Rechteck.
- Der Textkontrast misst sich am weichgezeichneten Hintergrund: und dieser Hintergrund ändert sich beim Scrollen, eine oben lesbare Überschrift kann also weiter unten durchfallen. Erhöhen Sie die Deckkraft der Tönung, bis auch der schlechteste Fall besteht.
- Das Zeichnen ist teuer: backdrop-filter wird neu berechnet, sobald sich dahinter etwas bewegt. Ein paar Flächen sind unkritisch; eine scrollende Liste davon ruckelt auf Mittelklasse-Hardware.
- Safari brauchte lange das Präfix: Die präfixierte Eigenschaft wird neben der Standardvariante ausgegeben, und sie wegzulassen ist der andere häufige Grund, warum der Effekt bei manchen funktioniert und bei anderen nicht.