CSS: titoli in verticale

Short link

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.

L'autore

Gabriele Romanato, sviluppatore web full stack specializzato in siti, applicativi web ed e-commerce con Node.js e PHP.