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:
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:
[caption id="attachment_2430" align="aligncenter" width="347" caption="Il box riflesso con la proprietà CSS3 box-reflect"]
[/caption]
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.