Riflessione dell'immagine CSS
In questo capitolo imparerai come riflettere un'immagine.
Riflessioni di immagini CSS
La box-reflect
proprietà viene utilizzata per creare un riflesso dell'immagine.
Il valore della box-reflect
proprietà può essere: below
, above
,
left
, o right
.
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
I numeri seguiti da -webkit- specificano la prima versione che ha funzionato con un prefisso.
Property | |||||
---|---|---|---|---|---|
box-reflect | 4.0 -webkit- | 79.0 -webkit- | Not supported | 4.0 -webkit- | 15.0 -webkit- |
Esempi
Esempio
Qui vogliamo la riflessione sotto l'immagine:
img {
-webkit-box-reflect: below;
}
Esempio
Qui vogliamo il riflesso a destra dell'immagine:
img {
-webkit-box-reflect: right;
}
Offset riflessione CSS
Per specificare lo spazio tra l'immagine e il riflesso, aggiungere la dimensione dello spazio alla box-reflect
proprietà.
Esempio
Qui vogliamo il riflesso sotto l'immagine, con un offset di 20px:
img {
-webkit-box-reflect: below 20px;
}
Riflessione CSS con gradiente
Possiamo anche creare un effetto di dissolvenza sul riflesso.
Esempio
Crea un effetto dissolvenza sul riflesso:
img {
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0),
rgba(0,0,0,0.4));
}