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.