Riflessi css cross browser

• Tweet

• Tweet

Nel mio precedente post abbiamo sperimentato insieme la proprietà box-reflect, su come utilizzarla al meglio per ottenere un’ effetto riflesso che non ha nulla da invidiare ai famosi software di grafica.

Purtroppo la proprietà box-reflect non è compatbilie con la maggior parte dei browser, o meglio è supportata solo da quelli WebKit come Chrome e Safari. Come ti ho anticipato nel post precedente, in questo articolo riprendo l’argomento e ti suggerisco un’escamotage per ottenere un riflesso cross browser.

Codice Html

<div class="box-image">
     <img src="madagascar.jpg" alt="Madagascar" />
     <div class="reflection">
          <img src="madagascar.jpg" alt="Madagascar" />
          <div class="overlay"></div>
     </div>
</div>

Il codice html è composto da un contenitore (box-image) che racchiude l’immagine principale e il contenitore del riflesso (reflection), che a sua volta contiene l’immagine del riflesso e il gradiente della sfumatura (overlay). Molto più facile a fare che a dire.

Codice Css

.reflection {
    position:relative;
}

Il css sarà incentrato sul div reflection a cui ho associato la posizione relativa, che servirà come riferimento per spostare il div overlay con posizione assoluta.

Passiamo ora alla creazione del riflesso:

.reflection img{
    transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    filter: flipv;

    opacity:0.30;
    filter: alpha(opacity='30');
}

In questa porzione di css entra in gioco la proprietà transform che servirà per capovolgere verticalmente l’immagine. Dal codice puoi notare l’aggiunta dei prefissi per la compatibilità dei browser, internet explorer in questo caso utilizza il filtro flipv.
Le ultime due righe, opacity e filter:alpha, aggiungono trasparenza all’immagine.

Con la prossima dichiarazione posizioniamo l’effetto gradiente:

.overlay{
    position:absolute;
    top:50px;
    left:0px;
    width:508px;
    height:351px;

    background-image: -moz-linear-gradient(center bottom, rgb(255,255,255) 60%, rgba(255,255,255,0) 75%);
    background-image:  -o-linear-gradient(rgba(255,255,255,0) 25%, rgb(255,255,255) 40%);
    background-image:  -webkit-gradient(linear, left bottom, left top, color-stop(0.60, rgb(255,255,255)), color-stop(0.75, rgba(255,255,255,0)));
    filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=0, EndColorStr=#ffffff);
}

Come ti ho anticipato all’inizio, il div overlay va in posizione assoluta e posizionato a proprio piacimento, con larghezza e altezza pari all’immagine, dopodichè con la proprietà gradient sovrapponiamo una sfumatura all’immagine. Questo funziona in tutti i browser ad eccezione di Internet Explorer, nonostante abbia associato il prefisso il browser di casa Microsoft non renderizza il colore finale.

Una soluzione potrebbe essere quella di applicare una sfumatura in png trasparente come sfondo, anzichè usare l’effetto gradient. Attenzione però che IE6 non legge le trasparenze e quindi saremo costretti anche ad implementare l’hack.

Fonte: www.xhtml-lab.com