CSS: box riflessi con i CSS3

  • CSS
  • Gabriele Romanato

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.

Torna su