HomeGuideCSS: ruotare il testo in una pagina web

CSS: ruotare il testo in una pagina web

CSS3 logoCss3 e HTML5, rappresentano indiscutibilmente evoluzione e futuro del web e basta dare una rapida occhiata in giro per convenire che non si tratta di un’opinione personale ne’ di un parere isolato.

I miglioramenti in termini di accessibilità e organizzazione dei contenuti, l’introduzione di alcuni tag dedicati quali header, footer e navigation, la possibilità di riprodurre nativamente video, la perfezionata interazione con “l’amico di sempre”, JavaScript e con l’evoluto ma trascurato “svg” (formato vettoriale per le immagini), renderanno più fluide la produzione e fruizione delle pagine web.

Grazie all’evoluzione dei fogli di stile, ad esempio, potremmo mettere da parte i vari editor grafici per tutta una serie di operazioni quali gradienti  ed effetti sul testo, quindi poche righe di codice soppianteranno quei macchinosi espedienti per ottenere certi risultati all’interno delle nostre pagine web, che vorremmo più semplici. Ad esempio l’orientamento del testo. Oggi vedremo come fare a dargli l’angolazione che più ci aggrada con poche righe di codice. CSS.

Quante volte volendo (dovendo) ruotare del testo all’interno di una pagina vi siete ritrovati costretti a generare una immagine?

Per ottenere il risultato desiderato con CSS3 basta copiare/incollare questa psudo-classe  e modificarla a proprio piacimento in quanto ad angolazione (nell’esempio si considerano 90 gradi).

.rotate {

/* Safari */

‐webkit‐transform: rotate(‐90deg);

/* Firefox */

‐moz‐transform: rotate(‐90deg);

/* Internet Explorer */

filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);

}

e poi richiamarla dove serve.

Non c’è altro!

Luigi Lacquaniti
Luigi Lacquaniti
Tecnico e Web designer freelance.

Ultime dal Blog