Frosted-Glass-Technik vom Spiel ins Web erweitert

Frosted Glass vom Spiel ins Web

• Einführung

  • Als UI-Entwickler für Forza Horizon 3 und Forza Motorsport 7 kam er mit schönen Design-Elementen aus frosted acrylic in Berührung.
  • Er wollte einen ähnlichen Effekt mit HTML umsetzen und teilt auf dieser Seite diesen Versuch.

• Die Rolle von backdrop-filter

  • Der Kern des Frosted-Glass-Effekts besteht darin, den Hintergrund mit Gaussian Blur weichzuzeichnen.
  • In CSS lässt sich Gaussian Blur mit backdrop-filter und der Funktion blur anwenden.
  • Internet Explorer unterstützt diese Funktion nicht.

• Tiefe hinzufügen

  • Mit backdrop-filter: blur(10px) wurde ein grundlegender Glaseffekt erstellt, doch für mehr Tiefenwirkung wurde mit box-shadow: inset an den Rändern zusätzliche Tiefe erzeugt.

• Echter Schatten

  • Um das Gefühl zu vermeiden, als sei ein 3D-Objekt in einem 2D-Raum gefangen, wurde ein dunkler box-shadow hinzugefügt, damit das Glas physisch vom Hintergrund abgehoben wirkt.

• Interaktion mit Licht

  • Um die Interaktion von Glas und Licht zu verbessern, wurde einfaches Subsurface Scattering eingeführt.
  • Mit box-shadow: inset wird simuliert, dass sich das Licht an den Glasrändern leicht ausbreitet.

• Interessanteres Licht

  • Um die reflektierenden Eigenschaften des Glases hervorzuheben, wurden Lichtstrahlen als Hintergrundbild verwendet.
  • Mit ::before wird das Hintergrundbild auf das Glaselement angewendet.

• Dynamisches Licht

  • Mit CSS und JavaScript wurde auf allen Plattformen ein dynamischer Reflexionseffekt umgesetzt.
  • Per JavaScript wird background-position dynamisch angepasst, um den Effekt von background-attachment: fixed zu simulieren.

• Abschluss

  • Um den Glaseffekt zu vervollständigen, wurden abgerundete Ecken sowie Farben und Text hinzugefügt.
  • Mit border-radius werden die Ecken abgerundet, und mit overflow: hidden wird verhindert, dass Kindelemente über die Glasoberfläche hinausragen.

• Fazit

  • Vielen Dank, dass Sie den Entstehungsprozess des Frosted-Glass-Effekts verfolgt haben.
  • Wie sich alle Assets und der gesamte Code schnell kopieren lassen, wird im Abschnitt "Final Recipe Lookahead" am Anfang des Dokuments erklärt.

[GN⁺]

Hacker-News-Kommentare

• Ein Nutzer erwähnt, dass ihm die ästhetischen Elemente zwar gefallen, er es aber als Verschwendung empfindet, wenn der Client wiederholt teure Blur-Filter berechnet, und dass der allgemeine Trend in der Webentwicklung scheinbar zu viel Last verursacht

  • Es sei zwar für die GPU optimiert, aber in der Praxis werde das wohl keinen großen Unterschied machen

• Ein anderer Nutzer erklärt, dass er die Textur der „Lichtstrahlen“ aus Windows 7 extrahiert habe, um auf Android einen ähnlichen Effekt umzusetzen, und die Sättigung des verschwommenen Hintergrunds leicht erhöht habe

• Ein weiterer Nutzer findet die interaktive Demo großartig, hasst aber den Einsatz von Frosted Glass im UI-Design und meint, die Einführung in Mac OS sei ein Rückschritt gewesen

  • Besonders wenn die Inhalte hinter dem Panel dynamisch oder nutzergeneriert seien, halte er das nicht für ideal

• Ein Nutzer erklärt, dass er 2008 über ein CSS-Experiment einen ähnlichen Effekt umgesetzt habe, indem er ein vorab weichgezeichnetes Hintergrundbild mit fester Position verwendet habe

  • Das habe eine bessere Performance als ein Gaussian Blur in Echtzeit, habe aber den Nachteil, keine dynamischen Hintergrundbilder zuzulassen

• Ein anderer Nutzer meint, dass sich hier 10 Effekte überlagern und dass bis auf den am meisten geforderten ästhetischen Aspekt etwa 7 davon zu viel seien

  • Er schlägt vor, nur Hintergrundfarbe, Blur, Box-Shadow oder Rahmen zu verwenden

• Ein Nutzer erklärt, dass er es mag, eine Noise-Textur hinzuzufügen, um ein raueres Ergebnis zu erzielen

• Ein anderer Nutzer erwähnt, dass die technische Leistung zwar cool sei, die UX aber schlecht sei

  • Er erklärt, dass Inhalte innerhalb halbtransparenter Panels schwerer zu lesen oder zu verstehen seien, weil der Kontrast zum Hintergrund gering und inkonsistent sei

• Ein Nutzer erwähnt, dass eine der ursprünglichen CSS-Demos für den Frosted-Glass-Effekt gedacht gewesen sei, und findet das interessant

• Ein weiterer Nutzer findet es zwar immer beeindruckend, die kreative und leistungsstarke Seite von CSS zu sehen, erklärt aber, dass er ein gewisses Maß an Verständnis für HTML/CSS wohl nie ganz nachvollziehen werde

• Abschließend wird erwähnt, dass das interaktive Beispiel gut sei, es aber noch besser gewesen wäre, wenn es eine Vergleichs- oder Umschaltfunktion zur vorherigen Version gegeben hätte

  • In den meisten Fällen seien die Verbesserungen in jeder Iteration so subtil gewesen, dass man die Unterschiede kaum erkennen konnte