CSS: testo riflesso

Possiamo creare l'effetto del testo riflesso usando le trasformazioni e la proprietà opacity dei CSS3. In realtà sarebbe possibile ottenere lo stesso effetto usando alcune proprietà supportate al momento solo dai browser basati su Webkit (Safari e Chrome), ma per ottenere il maggior supporto possibile si è preferito non usarle. Vediamo insieme i dettagli.

Abbiamo questa marcatura:


<h1>Test <span>tseT</span></h1>

Il testo all'interno dell'elemento span è stato rovesciato perchè verrà ruotato di meno 180 gradi. Ovviamente è consigliabile generare questo elemento presentazionale con JavaScript. Il codice CSS è il seguente:


h1 {
	font: normal 6em Impact, sans-serif;
	width: 400px;
	height: 250px;
	margin: 10px auto 0 auto;
	color: #333;
}

h1 span {
    color: #bbb;
	display: block;
	width: 170px;
	-webkit-transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	transform: rotate(-180deg);
	opacity: 0.3;
	position: relative;
	top: -37px;
	left: -3px;
}

Il posizionamento relativo è stato utilizzato per compensare gli effetti della rotazione del box. Potete visionare l'esempio finale in questa pagina.