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.