In questi giorni è uscita la versione 5.0 di Firefox, che aggiunge supporto alle animazioni CSS e miglioramenti all’interfaccia. Ho quindi deciso di dedicare un’articolo a questo browser, per quanto personalmente continui a ritenere WebKit superiore.
Da oltre 3 anni in WebKit è presente una proprietà CSS che permette di riflettere per intero un elemento del DOM: -webkit-box-reflect.
In firefox questa proprietà non è presente, ma possiamo sfruttare l’interessante -moz-element che permette di impostare come background di un elemento, una copia del contenuto di un’altro elemento, riferendosi ad esso tramite l’id.
Utilizzando -moz-element in accoppiata con -moz-transform possiamo copiare il contenuto dell’elemento da riflettere e ribaltarne l’asse Y.
In Pratica
Nel nostro esempio utilizziamo un tag IMG all’interno di un DIV che servirà a fare da contenitore al riflesso.
[code gutter=”false” language=”html”]
[/code]
Da CSS applichiamo uno stile allo pseudo elemento #box::before, dandogli le stesse dimensioni dell’immagine e posizionandolo subito al di sotto di essa. Quindi a #box assegnamo un’altezza doppia a quella dell’immagine, in modo da lasciare uno spazio libero per il suo riflesso e, per dare un effetto dissolvenza, applichiamo anche un gradiente di sfondo semitrasparente, assicurandoci però di posizionare il riflesso sotto di esso tramite z-index.
Tutto quello che resta da fare è applicare il background con -moz-element e ribaltare l’asse Y con “-moz-transform: scaleY(-1)” o come nell’esempio con la funzione matrix.
[code gutter=”false” language=”css”]
#box {
position: relative;
height: 602px; /* 2x img height */
background: -moz-linear-gradient(top, rgba(255,255,255,0) 50%, rgba(255,255,255,1));
}
#box::before {
content: ”;
width: 601px;
height: 301px;
background: -moz-element(#img) no-repeat;
position: absolute;
top: 301px;
-moz-transform: matrix(1, 0, 0, -1, 0, 0);
z-index: -1;
}
[/code]
Ecco l’esempio all’opera (visualizzare con Firefox):
[iframe src=”//jsfiddle.net/mtorromeo/eUmR9/2/embedded/result,css,html”]
Potenzialità
La cosa veramente interessante di -moz-element è che qualsiasi modifica applicata all’elemento da riflettere si “rifletterà” (scusate il gioco di parole) LIVE sulla copia.
Di seguito lo stesso esempio di prima al quale ho applicato una piccola animazione CSS (visualizzare con Firefox 5 o superiore):
[iframe src=”//jsfiddle.net/mtorromeo/eUmR9/3/embedded/result,css,html”]
