CSS DISTORSIONE TESTO

P.Y.G.

CSS DISTORSIONE TESTO

Fonte: http://css-tricks.com/

Intero processo e logica

Vediamo una frase come esempio:

Poniamo di dividere le lettere e spazi in singoli blocchi.

Assicuriamoci che ogni singolo box abbia le stesse dimensioni.

Ora allunghiamo il box come se fossere i raggi di una bicicletta.

Ora raggruppiamo tutto in una sola colonna

Apriamo a ventaglio ruotando di 90 grandi mantenendo fermo il lato basso della colonna.

Se adesso ruotiamo l'elemento counter-clockwise e rimuoviamo le guide rosse, otteniamo un testo a forma circolare!

Fase tecnica

Per manipolare ogni singola lettera in questo modo, bisogna raggrupparle tutte in un altro elemento.Lettering.js può fare questo in maniera molto semplice.

Otteniamo questo.

<h1>Established 2012</h1>

leggiamo jQuery e Lettering.js e richiamiamo in questo modo:

$("h1").lettering();

e lo carichiamo nel DOM:

<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>
  <!-- you get the idea -->
</h1>

Funziona molto meglio con il  monospaced fonts. Anche se forziamo monospaced-ness assegnando a  ogni span una larghezza fissa, lo spazio tra ogni lettera sarà sbagliato e verra' visualizzato in un modo bizzarro. potrete modificare singolarmente la rotazione di ogni singola lettere ...ma potreste impazzire...

Per ogni span, bisogna settare l'altezza, posizionarli tutti nello stesso posto, e settare l'origine della trasformazione al lato basso del box (cosi' ruoteranno intorno ad esso. ).

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

Ora vi serve un nome univoco della classe selector che ruotera' ogniuno ancora di un po'..

.char1 { transform: rotate(6deg); }
.char2 { transform: rotate(12deg); }
.char3 { transform: rotate(18deg); }
/* and so on */

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

  Download

  Download Files