Come ottenere una lettera divisa in più colori

In questo articolo vedremo come sarà possibile creare un testo le cui lettere sono in parte di un colore in parte di un altro utilizzando solo ed esclusivamente i CSS, quindi senza bisogno di ricorrere ad alcuno stratagemma in Javascript.
Il punto cardine della questione ruota intorno all'assegnazione di un attributo di tipo data al contenitore di ciscuna lettera per la quale si intenda ottenere l'effetto desiderato.
Nell'esempio in Fig. 1, ciascuna lettera della parola MARGHE (diminutivo di Margherita) è contenuta all'interno di un elemento span con un attributo data-char il cui valore corrisponde alla relativa lettera, per cui per la lettera M l'attributo sarà data-char="M" e così per il resto delle lettere, dopodichè nella classe associata a ciascuna lettera, insieme alle altre proprietà necessarie, assegno un contenuto dinamico per lo pseudo elemento data-char, ossia content: attr(data-char).

Fig. 1 - CSS3 - Esempio di lettera divise in più colori ciscuna

Il risultato di cui sopra è ottenibile utilizzando il seguente codice:

<style type="text/css">
  .css3_esempio_1 .orizzontale, .css3_esempio_1 .verticale, .css3_esempio_1 .vertoriz {
      position:relative;
      display:inline-block;
      font-size:100px;
      color: #ff1d26;
      overflow:hidden;
  }
  .css3_esempio_1 .orizzontale:before, .css3_esempio_1 .verticale:before, .css3_esempio_1 .vertoriz:before {
      display:block;
      z-index:1;
      position:absolute;
      top:0;
      left:0;
      height: 50%;
      content: attr(data-char); /* contenuto dinamico per lo pseudo elemento */
      overflow:hidden;
      color: #3e53d2;
  }
  .css3_esempio_1 .verticale:before {height: 100%;width:50%}
  .css3_esempio_1 .vertoriz:before {width:50%}
  .css3_esempio_1 .orizzontale.lettera {border:solid 1px brown;display: inline-block;}
  .css3_esempio_1 .orizzontale.lettera.fixblock{
    font-size:100px;
    line-height:67.5%;
    position: relative;
    display:inline-block;
    overflow:hidden;
  }
  .clear {clear:both;height:20px}
</style>

<div class="css3_esempio_1">
  <span class="verticale" data-char="M">M</span>
  <span class="verticale" data-char="A">A</span>
  <span class="orizzontale" data-char="R">R</span>
  <span class="orizzontale" data-char="G">G</span>
  <span class="vertoriz" data-char="H">H</span>
  <span class="vertoriz" data-char="E">E</span>
</div>

Da notare che la divisione delle lettere è netta, ossia del 50% in verticale per le prime due lettere, in orizzontale per le successive due e del 75% (il 50% del 50%) per le ultime.
Questo effetto è ottenuto in maniera molto semplice in virtù del fatto che la divisione è appunto 1/2 o 1/4, ma volessimo tentare di frazionare le nostre lettere in modo più particolareggiato, come ad esempio 20% in orizzontale, andremmo sicuramente incontro a dei problemi ed il motivo è evidenziato in Fig. 2:

Fig. 2 - CSS3 - Conseguenza del line-height sullo spazio occupato da una lettera

Come si evince dall'immagine (Fig. 2), la lettera, a cui è stato volutamente applicato un bordo, occupa uno spazio ben maggiore rispetto alla sua effettiva altezza.
La cosa bella è che non c'è niente di anomalo ma è un normale comportamento assegnato dal browser che permette di distanziare le lettere delle parole in testo quando si presentano su più righe evitando che si collassino tra loro senza lasciare spazio compromettendone la leggibilità.
Fortunatamente questa sorta di "contorno" è gestibile tramite una proprietà dei CSS chiamata line-height che controlla l'altezza di ogni riga di un contenuto, va da se che giocando con il suo valore si può arrivare ad ottenere uno spazio occupato dalla lettera di dimensioni identiche (o vicinissime) alla lettere stessa, Fig. 3.

Fig. 3 - CSS3 - Gestione del line-height per azzerare lo spazio in eccesso occupato da una lettera

Con un trick è possibile inoltre far sì che tale altezza sia mantenuta anche aumentando o diminuendo la dimensione in px del font-size del testo. A spiegarne il comportamento è la regola che sta alla base dell'assegnazione che il browser dà di default al font-size ed al relativo line-height, essi sono legati da un rapporto in percentuale per cui all'aumentare o al diminuire dell'uno si incrementa o si riduce il secondo sempre in base ad uno stesso valore percentuale che in teoria è del 62,5% (nel caso del mio esempio ho variato tale valore per una maggiore compatibilità nei browser su cui l'ho testo ossia, Firefox, IE, Chrome e Opera).

Sulla base di questi concetti è possibile giocare con i CSS e le percentuali per ottenere effetti gradevoli come quello mostrato in Fig. 4:

Fig. 4 - CSS3 - Suddivisione di ciascuna lettera in più colori stile arcobaleno

Ottenibile con il seguente codice:

<style type="text/css">
  .css3_esempio_2 span {
    font-size:100px;
    line-height:67.5%;
    position: relative;
    display:inline-block;
    overflow:hidden;
  }    
  .css3_esempio_2 .first_layer:before,
  .css3_esempio_2 .second_layer:before,
  .css3_esempio_2 .third_layer:before,
  .css3_esempio_2 .fourth_layer:before,
  .css3_esempio_2 .fifth_layer:before  {
    display:block;
    z-index:5;
    position:absolute;
    height: 20%;
    content: attr(data-char); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: #ff1d26;
  }
  .css3_esempio_2 .second_layer:before {z-index:4;height: 40%;color: #f8972c;}
  .css3_esempio_2 .third_layer:before {z-index:3;height: 60%;color: #fec92c;}
  .css3_esempio_2 .fourth_layer:before {z-index:2;height: 80%;color: #8bd23e;}
  .css3_esempio_2 .fifth_layer:before {z-index:1;height: 100%;color: #c000b5;}  
</style>

<div class="css3_esempio_2" style="background:#0091c0;padding:20px">
  <span class="fifth_layer" data-char="M"><span class="fourth_layer" data-char="M"><span class="third_layer" data-char="M"><span class="second_layer" data-char="M"><span class="first_layer" data-char="M">M</span></span></span></span></span>
  <span class="fifth_layer" data-char="A"><span class="fourth_layer" data-char="A"><span class="third_layer" data-char="A"><span class="second_layer" data-char="A"><span class="first_layer" data-char="A">A</span></span></span></span></span>
  <span class="fifth_layer" data-char="R"><span class="fourth_layer" data-char="R"><span class="third_layer" data-char="R"><span class="second_layer" data-char="R"><span class="first_layer" data-char="R">R</span></span></span></span></span>
  <span class="fifth_layer" data-char="G"><span class="fourth_layer" data-char="G"><span class="third_layer" data-char="G"><span class="second_layer" data-char="G"><span class="first_layer" data-char="G">G</span></span></span></span></span>
  <span class="fifth_layer" data-char="H"><span class="fourth_layer" data-char="H"><span class="third_layer" data-char="H"><span class="second_layer" data-char="H"><span class="first_layer" data-char="H">H</span></span></span></span></span>
  <span class="fifth_layer" data-char="E"><span class="fourth_layer" data-char="E"><span class="third_layer" data-char="E"><span class="second_layer" data-char="E"><span class="first_layer" data-char="E">E</span></span></span></span></span>
</div>

L'esempio appena descritto è visualizzabile dal vivo su JSFiddle, di seguito l'incorporamento dello stesso con relativa visualizzazione di quanto enunciato osservabile rispettivamente dal tab "Result" e dai tab "HTML" e "CSS":