BoCSSes

by Kriem

HTML

<h1>
    <b class="bocsses logo"></b>
    <b class="bocsses space">&nbsp;</b>
    <b class="bocsses b">b</b>
    <b class="bocsses o">o</b>
    <b class="bocsses c">c</b>
    <b class="bocsses s">s</b>
    <b class="bocsses s">s</b>
    <b class="bocsses e">e</b>
    <b class="bocsses s">s</b>
</h1>

<b class="bocsses a">a</b>
<b class="bocsses b">b</b>
<b class="bocsses c">c</b>
<b class="bocsses d">d</b>
<b class="bocsses e">e</b>
<b class="bocsses f">f</b>
<b class="bocsses g">g</b>
<b class="bocsses h">h</b>
<b class="bocsses i">i</b>
<b class="bocsses j">j</b>
<b class="bocsses k">k</b>
<b class="bocsses l">l</b>
<b class="bocsses m">m</b>
<b class="bocsses n">n</b>
<b class="bocsses o">o</b>
<b class="bocsses p">p</b>
<b class="bocsses q">q</b>
<b class="bocsses r">r</b>
<b class="bocsses s">s</b>
<b class="bocsses t">t</b>
<b class="bocsses u">u</b>
<b class="bocsses v">v</b>
<b class="bocsses w">w</b>
<b class="bocsses x">x</b>
<b class="bocsses y">y</b>
<b class="bocsses z">z</b>
<b class="bocsses zero">0</b>
<b class="bocsses one">1</b>
<b class="bocsses two">2</b>
<b class="bocsses three">3</b>
<b class="bocsses four">4</b>
<b class="bocsses five">5</b>
<b class="bocsses six">6</b>
<b class="bocsses seven">7</b>
<b class="bocsses eight">8</b>
<b class="bocsses nine">9</b>
<b class="bocsses period">.</b>
<b class="bocsses comma">,</b>
<b class="bocsses questionMark">?</b>
<b class="bocsses exclamationMark">!</b>
<b class="bocsses colon">:</b>
<b class="bocsses semicolon">;</b>
<b class="bocsses hyphen">-</b>
<b class="bocsses underscore">_</b>
<b class="bocsses apostrophe">&rsquo;</b>
<b class="bocsses quotationMark">"</b>
<b class="bocsses at">@</b>
<b class="bocsses ellipsis">&hellip;</b>
<b class="bocsses slash">/</b>
<b class="bocsses backslash">\</b>
<b class="bocsses leftParenthesis">(</b>
<b class="bocsses rightParenthesis">)</b>
<b class="bocsses leftBracket">[</b>
<b class="bocsses rightBracket">]</b>
<b class="bocsses leftChevron">&lt;</b>
<b...

CSS

body {
    background-color: #dde;
    background-image: -webkit-linear-gradient(hsla(0,0%,0%,.05) 50%, transparent 50%),
                      -webkit-linear-gradient(left, hsla(0,0%,0%,.05) 50%, transparent 50%);
    background-image:    -moz-linear-gradient(hsla(0,0%,0%,.05) 50%, transparent 50%),
                         -moz-linear-gradient(left, hsla(0,0%,0%,.05) 50%, transparent 50%);
    background-image:     -ms-linear-gradient(hsla(0,0%,0%,.05) 50%, transparent 50%),
                          -ms-linear-gradient(left, hsla(0,0%,0%,.05) 50%, transparent 50%);
    background-image:      -o-linear-gradient(hsla(0,0%,0%,.05) 50%, transparent 50%),
                           -o-linear-gradient(left, hsla(0,0%,0%,.05) 50%, transparent 50%);
    background-image:         linear-gradient(hsla(0,0%,0%,.05) 50%, transparent 50%),
                              linear-gradient(left, hsla(0,0%,0%,.05) 50%, transparent 50%);
    background-position: 50% 0;
    background-size: .25em .25em;
    font-size: 200%; /* Change this if you want to scale everything */
    letter-spacing: .25em;
    line-height: 1.65;
    margin: 0 auto;
    max-width: 26.5em;
    padding: 2.5em;
    text-align: center;
    -webkit-animation: background 25s infinite;
       -moz-animation: background 25s infinite;
        -ms-animation: background 25s infinite;
         -o-animation: background 25s infinite;
            animation: background 25s infinite;
}
h1 {
    margin-bottom: 2.5em;
}
a {
    display: block;
    font-size: 50%;
    margin-top: 5em;
    text-decoration: none;
}
.bocsses {
    background: #111;
    display: inline-block;
    height: .5em;
    margin: 1em;
    text-indent: -9999em;
    width: .5em;
}
/* Template:
.bocsses.foo {
    box-shadow: -1em -1em  0 #111, -.5em -1em  0 #111, 0 -1em  0 #111, .5em -1em  0 #111, 1em -1em  0 #111,
                -1em -.5em 0 #111, -.5em -.5em 0 #111, 0 -.5em 0 #111, .5em -.5em 0 #111, 1em -.5em 0 #111,
                -1em 0     0 #111,...

JavaScript

// Make a generator to spit out the appropriate markup