So erzeugen Sie einen Milchglas-Effekt

Milchglas- und transluzente Effekte sind seit dem Aufkommen von Animation im Webdesign sehr beliebt. In Kombination mit Animation und Parallax-Effekten verleihen sie Seiten mehr Tiefe und eine fast 3D-artige Anmutung. Unten zeigen wir einige Effekte, die sich durch eine Kombination aus Farbe, Deckkraft und Hintergrundfiltern erzielen lassen. Wir haben die Effekte demonstriert, indem wir Kästen mit unterschiedlichen Graden an Deckkraft, Farbe und Filtereffekten über „im Fenster fixierte“ Bilder gelegt haben. Ebenso gut funktionieren sie, wenn die Kästen als animierte Elemente beim Scrollen über andere Seiteninhalte gleiten.

Mehrere im Fenster fixierte Bilder

Im folgenden Beispiel wurden mehrere Elemente zu einem Layoutblock kombiniert, die alle DASSELBE Bild verwenden und sämtlich im Fenster fixiert sind. Der Layoutblock selbst hat ein Hintergrundbild, ist im Fenster fixiert und mit einem Hintergrund-Unschärfefilter auf 4x versehen. Als Nächstes wurde ein Kasten mit Bildfüllung, abgerundeten Ecken und weißem Rahmen hinzugefügt. Auch dieses Bild ist im Fenster fixiert, diesmal jedoch ohne Hintergrundfilter. Danach haben wir den transluzenten Kasten hinzugefügt, der etwa 50% des Rahmenkastens abdeckt. Dieser Kasten hat keine Füllung, aber einen Hintergrund-Unschärfefilter mit 8x. Abschließend wurde der Text ‚Frosted‘ über den transluzenten Kasten gelegt. Auf den Text ist der Effekt „Auf Text beschneiden“ angewendet, unter Verwendung desselben Bildes wie bei allen anderen Elementen. Auch hier ist das Bild auf „im Fenster fixiert“ gesetzt. Der weiße Text ist lediglich ein normaler Textkasten, der über den gesamten Layoutblock gelegt wurde. Das Endergebnis vermittelt den Eindruck eines einzigen Bildes mit unterschiedlichen Unschärfegraden, während das Wort ‚Frosted‘ wie aus einer Milchglasscheibe herausgeätzt wirkt und das darunterliegende Bild in voller Schärfe sichtbar wird.