Orientare testo su curva del cerchio – css3

In passato risultava impensabile realizzare testi orientati non orizzontalmente, ma su linee curve. Quindi l’unico modo per realizzare testi curvi era quello di creare delle immagini.

Poi si è passati alla tecnologia Flash e JavaScript, e solo oggi risulta possibile creare un orientamento curvo per le lettere utilizzando i CSS3. Vediamo come procedere.

Come orientare testo su cerchio – css3

Anzitutto va trovato il giusto Font, che deve avere tutte le lettere racchiuse in spazi uguali, e non in spazi diversi l’uno dall’altro. Si tratta di font che trovate sotto il nome di “Monospace Font“.

A quel punto estendiamo il box del font in modo da renderlo molto esteso in lunghezza.

Allineiamo tutti i box delle lettere, in modo da sovrapporli.

A questo punto ruotiamo ogni singolo elemento, in modo da ricreare una forma a ventaglio come la seguente.

Infine ruotiamo il contenitore padre, che contiene tutte le lettere, e giungiamo a questo risultato.

Ora vediamo lo stesso procedimento, ma su base tecnica. Anzitutto creiamo un titolo:

<h1>Established 2012</h1>

Poi carichiamo sul nostro sito jQuery e Lettering.js ed inseriamo il seguente codice:

$("h1").lettering();

Che trasformerà il testo come lo abbiamo scritto sotto questa forma:

<h1>
  <span class="char1">E</span>
  <span class="char2">s</span>
  <span class="char3">t</span>
  <span class="char4">a</span>
  <span class="char5">b</span>
  <span class="char1">l</span>
  <span class="char2">i</span>
  <span class="char3">s</span>
  <!-- questo esempio è per renderti conto di come sarebbe il testo -->
</h1>

A questo punto, tramite lo stile CSS3, dobbiamo aumentare l’altezza di ogni singolo box span, proprio come l’esempio posto all’inizio.

Inoltre vanno anche sovrapposti l’uno all’altro, per cui utilizziamo la posizione assoluta.

E siccome tutti gli elementi ruotano sulla loro base, impostiamo anche l’origine della trasformazione.

h1 span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
}

A questo punto, ruotiamo gli elementi in questo modo.

.char1 { transform: rotate(6deg); }
.char2 { transform: rotate(12deg); }
.char3 { transform: rotate(18deg); }
/* e così via */

Stesso codice che è possibile strutturare in modo molto più semplice tramite Sass e Compass:

@for $i from 1 through 100 
  .char#{$i} 
    +transform(rotate(($i*6)+deg))

Se fate caso, al primo rigo viene definito che “ i ” rappresenta numeri da 1 a 100.

Al secondo rigo, viene specificato che questi valori numerici sono accostati alla dicitura .char, a formare la serie .char1, .char2, .char3, e così via…

L’ultimo rigo invece, specifica le proprietà di rotazione di queste classi char, ovvero, che ogni char moltiplica il suo valore per 6deg, che risulteranno come gradi in più di rotazione rispetto al precedente.

Conclusioni

In questo articolo avete visto come realizzare testi curvi utilizzando CSS3 e jQuery, oppure ancora utilizzando Sass e Compass. Tuttavia un occhio attento ha intuito che tutto questo può essere gestito manualmente utilizzando esclusivamente i CSS3, e che jQuery e Sass e Compass, sono serviti unicamente per automatizzare alcune operazioni altrimenti ripetitive. Cosa ne pensate? Vi è piaciuta la guida?