CSS3: Applicare più colori ad una singola lettera in un testo

Come applicare in puro CSS colori diversi ad una singola lettera ottenendo così lettere di due o più colori divise per metà o in più frazioni

by Michele Pisani

HTML

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

<div class="css3_esempio_1">
  <div class="clear"></div>
  <span class="orizzontale lettera" data-char="M">M</span>
  <div class="clear"></div>
  <span class="orizzontale lettera fixblock" data-char="M">M</span>
  <div class="clear"></div>
</div>

<div class="css3_esempio_2">
  <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...

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);
      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}

  .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);
    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: #278bd4;
}