Le nuove specifiche CSS3 sulle trasformazioni introducono il concetto di distorsione (skew) lungo l'asse orizzontale e verticale di un elemento. La distorsione viene specificata in gradi (deg). Tramite questo tipo di trasformazione possiamo ottenere l'effetto visivo del testo distorto. Vediamo come.
Useremo come riferimento un semplice elemento h1. Ecco gli stili:
h1 {
width: 300px;
margin: 2em auto;
font: normal 6em Arial, sans-serif;
color: #c30;
text-transform: uppercase;
-moz-transform: skew(10deg, 20deg);
-webkit-transform: skew(10deg, 20deg);
-o-transform: skew(10deg, 20deg);
-ms-transform: skew(10deg, 20deg);
transform: skew(10deg, 20deg);
}
L'elemento viene distorto di 10 gradi lungo l'asse orizzontale e di 20 gradi lungo quello verticale. Come al solito abbiamo usato prima le estensioni dei browser e in ultimo la proprietà standard per fare in modo che se un browser supporta la proprietà standard userà quella invece che la sua estensione. Per ulteriori dettagli vi rimando a questo tutorial.
Potete visionare l'esempio finale in questa pagina.