Tuiles scrabble

by ydelmas

HTML

<span class="scrabble">
    <span>S</span>
    <span>C</span>
    <span>R</span>
    <span>A</span>
    <span class="plus">B</span>
    <span>B</span>
    <span>L</span>
    <span>E</span>
</span>
test

CSS

body{background-image: url(http://subtlepatterns.com/patterns/white_plaster.png);}
.scrabble > * {
    display: block; float:left;
    font-weight: bold; text-transform:uppercase;
    font-family: sans-serif;
    padding:12px 10px 11px 10px; margin: 2px;
    width:30px; height:30px; font-size:24px;
    text-align:center;
    border-radius:5px;
    color:#4e3a10;
    background: linear-gradient(120deg, #ebd19a 0%, #e3c083 100%);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
}
.scrabble > .plus {
    background: linear-gradient(120deg, hsl(40, 0%, 75%) 0%, hsl(40, 0%, 67%) 100%);
    color: hsl(40, 0%, 25%);
}
.scrabble::after {
    display: block; content: '\0020';
    width: 0; height: 0; overflow: hidden; visibility: hidden;
    clear: both;
}