In diesem Artikel habe ich gezeigt, wie mittels des Grafikallrounders Gimp Bilder und Texte gespiegelt werden können. Wer gespiegelte Bilder im Webdesign oder als Webinhalt einsetzen möchte, kann sich diesen Umweg zukünftig sparen, denn Webkit-Browser können mittels „box-reflect“ ebenfalls Bilder spiegeln. Wir wollen uns den Befehl etwas genauer anschauen.

Syntax

-webkit-box-reflect: below 1px;

Shorthand

Kürzer geht’s nicht.

Browserunterstützung

• Apple Safari 5+
• Google Chrome 10+

Beschreibung

Ergebnis des obigen Beispiels:

Das Bild wird nach unten (below) gespiegelt mit einem Versatz von einem Pixel. Weitere Richtungen:

• above (nach oben gespiegelt)
• left (nach links gespiegelt)
• right (nach rechts gespiegelt)

Coole Sache, oder? Noch interessanter wird „box-reflect“ wenn wir für die Reflektion eine Maske definieren. Als Maske können Farbverläufe in die Transparenz oder transparente Bilddateien genutzt werden.

Hier ein Farbverlauf, bei dem die letzten 25% der Reflektion „verschluckt“ werden

-webkit-box-reflect: below 1px -webkit-linear-gradient(top, rgba(0,0,0,0) 25%,rgba(255,255,255,1) 100%);

Hier ein Beispiel mit einer Bilddatei (transparente PNG-Datei mit schwarzem Kreis) als Maske

-webkit-box-reflect: below 1px url(bild.png);

Angewendet wird daraus

Mit „box-reflect“ können aber nicht nur Bilddateien gespiegelt werden. Das funktioniert auch mit Texten oder Block-Elementen. Schaut euch die Demo-Seite an:

Du suchst noch mehr zum Thema CSS3? Dann wirf einen Blick auf die Übersichtsseite: