CSS: titoli in verticale

Creare titoli visualizzati in verticale: un compito impossibile fino a qualche tempo fa e oggi reso possibile dalle trasformazioni CSS3. Vediamo insieme come ottenere questo effetto.

Partiamo da questa marcatura HTML:


<div class="post">
	<h2>...</h2>
	<p>...</p>
</div>

Applichiamo i seguenti stili:


div.post {
	width: 100%;
	position: relative;
	margin-bottom: 1em;
}

div.post h2 {

	letter-spacing: 2px; 
    text-transform: uppercase;
    color: #fff;
    background: #000;
    padding: 5px 10px;
    margin: 0;
    position: absolute;
    top: 0;
    left: -0.7em;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin:    0 0;
    -ms-transform-origin:     0 0;
    -o-transform-origin:      0 0;
    transform-origin: 0 0;
        
    -webkit-transform: rotate(90deg); 
    -moz-transform:    rotate(90deg); 
    -ms-transform:     rotate(90deg); 
    -o-transform:      rotate(90deg);
    
    transform: rotate(90deg); 

}

La rotazione è di 90 gradi, ma la cosa da sottolineare nel codice è l'uso della proprietà transform-origin per impostare esattamente il punto da cui devono essere calcolate le coordinate per la rotazione.

Potete visualizzare l'esempio finale in questa pagina.