Aplikace CSS stylů jen na polovinu znaku

Dnes se mi v odběrech objevil odkaz na zajímavý tip zabývající se stylováním přes CSS pouze poloviny znaku písmena. To znamená, že by polovina písmena třeba byla černá a druhá polovina modrá. Kupodivu tohoto lze dosáhnout pouze pomocí CSS a HTML i bez použití JavaScriptu.

Ukázka:

HTML

<span data-char='P'>P</span>
<span data-char='O'>O</span>
<span data-char='K'>K</span>
<span data-char='U'>U</span>
<span data-char='S'>S</span>

CSS

span {
font-size: 100px;
font-family: Helvetica;
color: #00aeb8;
}

span {
position: relative;
}

span:before {
content: attr(data-char);
position: absolute;
width: 50%;
overflow: hidden;
color: #89b338;
}

Více informací o této technice, nebo tipy na zajímavé JS knihovny, jež nám zjednoduší práci najdete na: http://stackoverflow.com/questions/23569441/is-it-possible-to-apply-css-to-half-of-a-character