CSS: box riflessi con i CSS3
I CSS3 hanno introdotto la proprietà box-reflect per creare box riflessi.
I CSS3 hanno introdotto la proprietà box-reflect che permette di ottenere una copia speculare del box su cui viene applicata. Al momento l’unica implementazione disponibile è quella di Webkit (Chrome e Safari). Vediamone insieme la sintassi ed un caso d’uso.
Ecco un esempio pratico:
|
1 2 3 4 5 6 7 8 |
h1 {
font: normal 8em Arial, sans-serif;
color: #222;
line-height: 0.9;
margin: 0;
text-transform: uppercase;
-webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.4)));
} |
E questo è il risultato:
Il box riflesso con la proprietà CSS3 box-reflect
Per ottenere questo effetto è stato necessario modificare tutte le proprietà che possono creare uno spazio verticale tra il box originale e quello riflesso. In questo caso sono stati modificati i margini verticali e l’interlinea.
Un commento
Effetto molto interessante :)
I commenti sono chiusi.