Box-reflect

La proprietà box-reflect offre degli effetti molto interessanti anche se poco utilizzata per via della sola compatibilità con browser WebKit. […]
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. 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:

riflesso1

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.

riflesso2

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 😉

riflesso2metodo

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.

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github