Home Guide CSS: 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
Web designer freelance.

LASCIA UN COMMENTO

Please enter your comment!
Please enter your name here

Ultime dal Blog

Netflix: ufficiale l’aumento dei prezzi sui piani Standard (HD) e Premium (UHD)

Era un rumors quasi certo, ed è stato alla fine ufficializzato: Netflix ha aumentato i prezzi su due dei tre piani sottoscrivibili. I piani Standard...

Google Maps: ora visibile anche il tachimetro mentre si guida

Da qualche settimana il famoso navigatore made in Google sta (finalmente) implementando delle funzioni prese in prestito dal suo fratellino Waze. Dopo aver visto...

Mounty: ed i dischi NTFS non sono più un tabù su MacOS

Chi possiede un Mac da diversi anni sa bene quanto sia poco intuitivo ed immediato poter scrivere su un disco esterno in formato NTFS. Il...

Tor Browser: la prima versione stabile è disponibile per Android

Tor, per chi non lo conoscesse, è un sistema di reti che permette di navigare nel web restando completamente anonimi e senza essere tracciati...

Share Mouse: controlla più computer usando un solo mouse

Oggi vi parleremo di Share Mouse, software veramente utile che vi permetterà di poter controllare più computer, usando un solo mouse e una sola...