.rack
.tile[data-letter='s']
.tile[data-letter='c']
.tile[data-letter='r']
.tile[data-letter='a']
.tile[data-letter='b']
.tile[data-letter='b']
.tile[data-letter='l']
.tile[data-letter='e']
.all
.tile[data-letter='a']
.tile[data-letter='a']
.tile[data-letter='a']
.tile[data-letter='a']
.tile[data-letter='a']
.tile[data-letter='a']
.tile[data-letter='a']
.tile[data-letter='a']
.tile[data-letter='a']
.tile[data-letter='b']
.tile[data-letter='b']
.tile[data-letter='c']
.tile[data-letter='c']
.tile[data-letter='d']
.tile[data-letter='d']
.tile[data-letter='d']
.tile[data-letter='d']
.tile[data-letter='e']
.tile[data-letter='e']
.tile[data-letter='e']
.tile[data-letter='e']
.tile[data-letter='e']
.tile[data-letter='e']
.tile[data-letter='e']
.tile[data-letter='e']
.tile[data-letter='e']
.tile[data-letter='e']
.tile[data-letter='e']
.tile[data-letter='e']
.tile[data-letter='f']
.tile[data-letter='f']
.tile[data-letter='g']
.tile[data-letter='g']
.tile[data-letter='g']
.tile[data-letter='h']
.tile[data-letter='h']
.tile[data-letter='i']
.tile[data-letter='i']
.tile[data-letter='i']
.tile[data-letter='i']
.tile[data-letter='i']
.tile[data-letter='i']
.tile[data-letter='i']
.tile[data-letter='i']
.tile[data-letter='i']
.tile[data-letter='j']
.tile[data-letter='k']
.tile[data-letter='l']
.tile[data-letter='l']
.tile[data-letter='l']
.tile[data-letter='l']
.tile[data-letter='m']
.tile[data-letter='m']
.tile[data-letter='n']
.tile[data-letter='n']
.tile[data-letter='n']
.tile[data-letter='n']
.tile[data-letter='n']
.tile[data-letter='n']
.tile[data-letter='o']
.tile[data-letter='o']
.tile[data-letter='o']
.tile[data-letter='o']
.tile[data-letter='o']
.tile[data-letter='o']
.tile[data-letter='o']
.tile[data-letter='o']
.tile[data-letter='p']
.tile[data-letter='p']
.tile[data-letter='q']
.tile[data-letter='r']
.tile[data-letter='r']
.tile[data-letter='r']
.tile[data-letter='r']
.tile[data-letter='r']
.tile[data-letter='r']
.tile[data-letter='s']
.tile[data-letter='s']
.tile[data-letter='s']
.tile[data-letter='s']
.tile[data-letter='t']
.tile[data-letter='t']
.tile[data-letter='t']
.tile[data-letter='t']
.tile[data-letter='t']
.tile[data-letter='t']
.tile[data-letter='u']
.tile[data-letter='u']
.tile[data-letter='u']
.tile[data-letter='u']
.tile[data-letter='v']
.tile[data-letter='v']
.tile[data-letter='w']
.tile[data-letter='w']
.tile[data-letter='x']
.tile[data-letter='y']
.tile[data-letter='y']
.tile[data-letter='z']
.tile
.tile
View Compiled
@import url(https://fonts.googleapis.com/css?family=Oswald);
@unit: 1mm;
:root {
@base: desaturate(#F3CC8B, 20%);
@darker: desaturate(darken(@base, 33%), 45%);
padding: 5vh 5vw;
background-color: @base;
background-attachment: fixed;
background-repeat: no-repeat;
background-image:
radial-gradient(center,
@darker,
transparent);
}
:root::before {
position: fixed;
content: "";
top: 0; bottom: 0;
right: 0; left: 0;
opacity: 0.80;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/49914/grit-fs8.png);
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 90vh; width: 90vw;
box-sizing: border-box;
}
.rack {
display: flex;
justify-content: center;
.tile {
margin: @unit / 2;
.tile(@size: 19 * @unit);
}
}
.all {
@small-size: @unit * 9.5;
margin-top: @unit * 12.5;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
width: @small-size * 10.9;
height: @small-size * 10.9;
.tile { .tile(@size: @small-size); }
}
.tile(@size) {
@tile-base: #f5cf90;
@thin: (@size * 0.5/19);
@small: (@size * 0.75/19);
@med: @small * 1.5;
background-color: @tile-base;
background-image:
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/49914/veneer-birch-texture-fs8.png');
position: relative;
width: @size;
height: @size;
box-sizing: border-box;
box-shadow: 0 @med @small -@thin fadeout(black, 60%);
border-style: solid;
border-top-width: @small;
border-left-width: 1px;
border-right-width: 1px;
border-bottom-width: @med;
border-top-color: fadeout(white, 55%);
border-left-color: fadeout(white, 75%);
border-right-color: fadeout(black, 85%);
border-bottom-color: fadeout(black, 70%);
border-radius: @small;
&[data-letter]::before {
content: attr(data-letter);
text-transform: uppercase;
font-family: Oswald, sans-serif;
font-size: @size * .70;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
color: rgba(0,0,0,0.6);
text-shadow:
4px 4px 6px @tile-base,
0 0 0 rgba(0,0,0,0.7),
1px 2px 1px rgba(255,255,255,0.5);
}
&[data-letter]::after {
color: fadeout(black, 30%);
font-family: sans-serif;
font-size: @size * 0.225;
position: absolute;
right: 12.5%;
bottom: 12.5%;
transform: translate(50%,50%);
}
&[data-letter='e'],
&[data-letter='a'],
&[data-letter='i'],
&[data-letter='o'],
&[data-letter='n'],
&[data-letter='r'],
&[data-letter='t'],
&[data-letter='l'],
&[data-letter='s'],
&[data-letter='u'] {
&::after { content: "1"; }
}
&[data-letter='d'],
&[data-letter='g'] {
&::after { content: "2"; }
}
&[data-letter='b'],
&[data-letter='c'],
&[data-letter='m'],
&[data-letter='p'] {
&::after { content: "3"; }
}
&[data-letter='f'],
&[data-letter='h'],
&[data-letter='v'],
&[data-letter='w'],
&[data-letter='y'] {
&::after { content: "4"; }
}
&[data-letter='k'] {
&::after { content: "5"; }
}
&[data-letter='j'],
&[data-letter='x'] {
&::after { content: "8"; }
}
&[data-letter='q'],
&[data-letter='z'] {
&::after { content: "10"; }
}
}
View Compiled
var // format value as pixels
px = function(v) { return v ? (v|0) + "px" : '0'; },
r = Math.random,
// random value [0,m)
rv = function(m) { return m*r(); },
// random value [n,m)
rb = function(n,m) { return rv(m-n)+n; },
// random value centered around 0
rc0 = function(rng) { return (r()*rng)-(rng/2); },
// random pixel value [0,m)
rpx = function(m) { return px(rv(m)) },
// random background position
bkg = function(w,h) { return rpx(w)+" "+rpx(h||w); },
// Prototypes
fp = Function.prototype,
ap = Array.prototype,
dp = Document.prototype,
// callable forEach
forEach = fp.call.bind(ap.forEach),
// jQuery-ish
$ = dp.querySelectorAll.bind(document),
tiles = $(".tile"),
rackTiles = $(".rack>.tile");
// Randomize the wood grain
forEach(tiles, function(el) {
el.style.backgroundPosition = bkg(600);
});
// randomize the rotation of the rack tiles.
forEach(rackTiles, function(el) {
el.style.transform = "rotate("+ rc0(5) +"deg)";
});
// randomize the background-color of the all the tiles
forEach(tiles, function(el) {
var s = el.style, cs = window.getComputedStyle(el), amt = r();
s.backgroundColor = tinycolor(cs.backgroundColor)
.darken(amt*20)
.desaturate(amt*30)
.toHexString();
});
This Pen doesn't use any external CSS resources.