Brainleaf
Web Resources

CSS

In questo articolo vi mostro il modo di inserire un testo in verticale. Questo metodo in sintesi è adatto a "ruotare" come si vuole un qualsiasi div.
Essendo questo un sistema che può essere utilizzato sui soli elementi BLOCK per ruotare del testo è necessario prendere qualche precauzione.

Come sappiamo il testo all'interno di una pagina web è di default un elemento INLINE. Per questa ragione è necessario trasformarlo in un elemento BLOCK inserendolo all'interno di uno span che trasformeremo in block utilizzando l'attributo display:block.

Ecco il codice della pagina HTML

<span class="testo-verticale">Verticale</span>

Nel parte relativa al CSS inseriremo quindi le seguenti righe:

span.testo-verticale { display:block; }

Ora che abbiamo trasformato una parte di testo da elemento inline a block potremo applicare le regole css che ci permetteranno di ruotare l'elemento in questione. La ruotazione degli elementi è però qualcosa di non propriamente validata ed è per questo che ogni browser necessita una sua propria istruzione.

Mozilla: -moz-transform: rotate(-90deg);
Opera: -o-transform: rotate(-90deg);
Chrome/Safari: -webkit-transform: rotate(-90deg);
Explorer (8 o superiore): filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Quindi il CSS sarà ora così composto:

span.testo-verticale { 
-webkit-transform: rotate(-90deg);  
-moz-transform: rotate(-90deg);  
-o-transform: rotate(-90deg); 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
display:block;  }

Va prestata attenzione al fatto che per gestire la posizione del blocco ruotato sarà necessario far ricorso a padding e margini (in maniera poco intuitiva e molto macchinosa), agendo sia sul div stesso che sul parent che lo contiene.

Sotto potete vedere un esempio di testo in verticale.

 

 

Testo Verticale

 

 

 

Joomla SEF URLs by Artio