Box Reflection mit CSS für Webkit und Fox
Im letzten Blogbeitrag habe ich eine einfache Möglichkeit für die Simulation einer Textreflektion gezeigt. Bisher gelingt aber die Spiegelung eines gesamten Containers nur mit -webkit-box-reflect, wie es im Webstandardblog für die Webkitbrowser beschrieben ist.
Da mein Lieblingsbrowser der Firefox bleibt, habe ich nach einer Möglichkeit gesucht, diesen Effekt auch dort nur mit CSS verfügbar zu machen. Firefox unterstützt zwar die o.g. Eigenschaft nicht, bringt aber mit dem -moz-element eine eigene Eigenschaft mit, jedes beliebige HTML-Element als CSS-Hintergrund verwenden zu können. Erwartet wird lediglich eine id eines Elements.
Ich habe das Beispiel dahingehend verändert, dass es einen zusätzlichen Container enthält, der die Reflektion für den Firefox anzeigt. Der Container vcard wird nun statt mit einer Klasse mit einer id gekennzeichnet.
Die eigentliche Arbeit wird durch folgende CSS-Anweisung geleistet:
background:
-moz-linear-gradient(top, rgba(255,255,255,1) 55%, rgba(255,255,255,0) 80%),
-moz-element(#vcard) no-repeat;
-moz-transform: scale(1,-1);
Es werden mehrere Hintergründe genutzt. Ein Farbverlauf von Transparent zu weiss, die aber aber "umgedacht" werden muss, da transform den gesamten Container und damit auch den Farbverlauf kippt.Der zweite Hintergrund ist der Inhalt von #vcard. Eine Besonderheit gibt es im Unterschied zu den Webkitbrowsern, es wird tatsächlich nur der Inhalt verwendet der innerhalb des Containers steht. Sollen CSS-Anweisungen mit übertragen werden, müssen sie als Inlinestyles geschrieben werden.
Das erweiterete Beispiel für Webkit und Firefox:
Zum Vergleich das Original des Webstandardsblog:
Nachtrag (02.07.2011)
Lea Verou hat sich auch mit dem Thema beschäftigt. Ich habe ihr Beispiel genutzt, um mein Beispiel weiterzuentwickeln.
geschrieben von Pawel