Box-reflect
- La proprietà box-reflect offre degli effetti molto interessanti anche se poco utilizzata per via della sola compatibilità con browser WebKit. I 3 valori della proprietà La proprietà è molto semplice da implementare, è composta da tre valori che specificano: direzione del riflesso (above, below, left, right) 2. distacco tra l’immagine e il suo riflesso 3. [...]
La proprietà box-reflect offre degli effetti molto interessanti anche se poco utilizzata per via della sola compatibilità con browser WebKit.
I 3 valori della proprietà
La proprietà è molto semplice da implementare, è composta da tre valori che specificano:
- direzione del riflesso (above, below, left, right)
- 2. distacco tra l’immagine e il suo riflesso
- 3. sfumatura del riflesso
Quest’ultima può essere sostituita anche da una maschera in png che ne definisce e delimita la forma. Vediamo entrambe le soluzioni:
Primo Metodo:
Questo è il metodo più immediato, inserita l’immagine nel documento html le associamo la seguente proprietà ed il gioco è fatto:
img{
-webkit-box-reflect: below 3px -webkit-gradient(linear,left top,left bottom, from(transparent), color-stop(50%,transparent), to(white));
}
ecco il risultato:
Secondo Metodo
Per ottenere una riflesso più personalizzato dobbiamo ricorrere ad una maschera in formato png. Ho creato una sfumatura radiale su un documento trasparente con dimensione pari a quella dell’immagine, infine l’ho salvata come png-trasparente.
Il css da associare è praticamente identico al precedente, solo che invece della proprietà web-gredient inseriamo l’url dell’immagine appena salvata.
img{
-webkit-box-reflect: below 3px url(bg.png);
}
Come puoi notare dall’immagine il risultato è più notevole 
Una soluzione per Firefox
Come ti ho anticipato sopra, box-reflect è supportato solo da browser WebKit come Safari e Chrome, ciò non toglie che sia impossibile riprodurre lo stesso effetto su altri browser. Ne parlerò nel mio prossimo post ma nel frattempo ti segnalo quest’articolo che suggerisce un’ottima soluzione per Firefox.
Non c'è ancora nessun commento.
Lascia un commento!