CSS: testo riflesso
Possiamo creare l'effetto del testo riflesso usando le trasformazioni e l'opacità CSS3.
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:
|
1 |
<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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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.
Nessun commento. Aggiungine uno!
I commenti sono chiusi.