MICHELEPISANI.IT
 

Ottenere un testo formato da ciascuna lettera suddivisa in più colori

Come ottenere una lettera divisa in più colori

CSS3 - Creare un testo composto da lettere in multicolore
Agosto 10
07:482014

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).

CSS3 - Lettera divisa in più colori

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:

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

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.

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

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:

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

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":

 

Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele Pisani

Ciao peppe,
che tipo di errore ti dà? Hai verificato se il resto delle caratteristiche è …

peppe

Ciao, perchè non posso unire takeshy kurosawa con takeshy kurosawa shop? non sono nomi simili?

Michele Pisani

Grazie Ottavia, fa sempre piacere ricevere un feedback. Buon proseguimento.

Ottavia Neruda

La tua guida mi è stata utilissima. L'ho trovata semplice, ben fatta ed intuitiva. Grazie.