Corsi on-line

Text-rotation con i CSS (cross-browser)

In alcuni casi può essere gradevole utilizzare nelle proprie pagine degli effetti per la rotazione dei testi, questa particolare stilizzazione è possibile utilizzando un semplice selettore CSS.
Al fine di garantire la massima compatibilità tra i browser (soprattutto quelli che non supportano CSS3) è necessario prestare la massima attenzione ed utilizzare i giusti hacks.

Vediamo di seguito un selettore, chiamato appunto “rotazione”, che permette di sfruttare l’effetto voluto su Internet Explorer, Moziela Firefox e Apple Safari:

.rotazione {
  /* hack per Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  /* hack per Mozilla Firefox */
  -moz-transform: rotate(-90deg);
  /* hack per Apple Safari */
  -webkit-transform: rotate(-90deg);
}

Il selettore proposto ha il compito di effettuare una rotazione di 90° sul testo in cui viene applicato; ovviamente l’angolo di rotazione può essere modificato a piacimento. Per un approfondimento consiglio di leggere questo ottimo articolo (in inglese).

Post correlati
I più letti del mese
Tematiche