Tipografia Scrabble CSS

dabblet.css

/* Tipografia Scrabble CSS */
/* Más en:
http://tympanus.net/codrops/2012/09/12/creative-web-typography-styles/
*/

.scrabble {
    text-align: center;
    margin: 0 auto;
    width:90%;
}
.scrabble span[class^="word"] {
    display: inline-block;
    margin: 0 15px;
}
.scrabble span[class^="char"] {
    width: 60px;
    height: 66px;
    display: inline-block;
    background: #e4d095;
    color: #2a1f1b;
    border-radius: 4px;
    font-size: 40px;
    font-weight: 300;
    line-height: 66px;
    margin: 10px 3px;
    text-align: center;
    cursor: default;
    font-family: Arial, sans-serif;
    text-shadow: 
        1px 1px 1px rgba(255, 255, 255, 0.9), 
        0 -1px 1px rgba(255,255,255,0.2);
    text-transform: uppercase;
    box-shadow: 
        1px 4px 8px rgba(0,0,0,0.8),
        inset 3px 0 2px rgba(255,255,255,0.4),
        inset 0 3px 0px rgba(255,255,255,0.5),
        inset -2px -3px 0px rgba(143,128,82,0.6);
}
.scrabble span[class^="char"]:nth-child(odd) {
    transform: rotate(2deg);
}
.scrabble span[class^="char"]:nth-child(3n) {
    transform: rotate(-3deg);
}
.scrabble > span:nth-child(2) span {
    color: #a62a19;
}
.scrabble h4 span[class^="char"] {
    color: darkblue;
    font-size: 28px;
    width: 36px;
    height: 40px;
    line-height: 40px;
}

dabblet.html

<div class="scrabble">
<span class="word">
<span class="char">R</span>
<span class="char">O</span>
<span class="char">T</span>
<span class="char">U</span>
<span class="char">L</span>
<span class="char">O</span>
</span>
<span class="word">
<span class="char">S</span>
<span class="char">C</span>
<span class="char">R</span>
<span class="char">A</span>
<span class="char">B</span>
<span class="char">B</span>
<span class="char">L</span>
<span class="char">E</span>
</span>
<h4>
<span class="word">
<span class="char">C</span>
<span class="char">O</span>
<span class="char">O</span>
<span class="char">R</span>
<span class="char">O</span>
<span class="char">P</span>
<span class="char">S</span>
</span>
</h4>
</div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}