cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <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 class="bocsses rightChevron">&gt;</b>

<a href="https://twitter.com/_joshnh">
    <b class="bocsses at">@</b>
    <b class="bocsses underscore">_</b>
    <b class="bocsses j">j</b>
    <b class="bocsses o">o</b>
    <b class="bocsses s">s</b>
    <b class="bocsses h">h</b>
    <b class="bocsses n">n</b>
    <b class="bocsses h">h</b>
</a>​
            
          
!
            
              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, -.5em 0     0 #111,                 .5em 0     0 #111, 1em 0     0 #111,
                -1em .5em  0 #111, -.5em .5em  0 #111, 0 .5em  0 #111, .5em .5em  0 #111, 1em .5em  0 #111,
                -1em 1em   0 #111, -.5em 1em   0 #111, 0 1em   0 #111, .5em 1em   0 #111, 1em 1em   0 #111;
}
*/
.bocsses.logo {
    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,                                                        1em -.5em 0 #111,
                -1em 0     0 #111,                                                        1em 0     0 #111,
                -1em .5em  0 #111,                                                        1em .5em  0 #111,
                -1em 1em   0 #111, -.5em 1em   0 #111, 0 1em   0 #111, .5em 1em   0 #111, 1em 1em   0 #111;
}
.bocsses.space {
    background: transparent;
}
.bocsses.a {
    box-shadow:                    -.5em -1em  0 #111, 0 -1em  0 #111, .5em -1em  0 #111,
                -1em -.5em 0 #111,                                                        1em -.5em 0 #111,
                -1em 0     0 #111, -.5em 0     0 #111,                 .5em 0     0 #111, 1em 0     0 #111,
                -1em .5em  0 #111,                                                        1em .5em  0 #111,
                -1em 1em   0 #111,                                                        1em 1em   0 #111;
}
.bocsses.b {
    box-shadow: -1em -1em  0 #111, -.5em -1em  0 #111, 0 -1em  0 #111, .5em -1em  0 #111,
                -1em -.5em 0 #111,                                                        1em -.5em 0 #111,
                -1em 0     0 #111, -.5em 0     0 #111,                 .5em 0     0 #111,
                -1em .5em  0 #111,                                                        1em .5em  0 #111,
                -1em 1em   0 #111, -.5em 1em   0 #111, 0 1em   0 #111, .5em 1em   0 #111;
}
.bocsses.c {
    background: transparent;
    box-shadow:                    -.5em -1em  0 #111, 0 -1em  0 #111, .5em -1em  0 #111, 1em -1em  0 #111,
                -1em -.5em 0 #111,
                -1em 0     0 #111,
                -1em .5em  0 #111,
                                   -.5em 1em   0 #111, 0 1em   0 #111, .5em 1em   0 #111, 1em 1em   0 #111;
}
.bocsses.d {
    background: transparent;
    box-shadow: -1em -1em  0 #111, -.5em -1em  0 #111, 0 -1em  0 #111, .5em -1em  0 #111,
                -1em -.5em 0 #111,                                                        1em -.5em 0 #111,
                -1em 0     0 #111,                                                        1em 0     0 #111,
                -1em .5em  0 #111,                                                        1em .5em  0 #111,
                -1em 1em   0 #111, -.5em 1em   0 #111, 0 1em   0 #111, .5em 1em   0 #111;
}
.bocsses.e {
    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,
                -1em 0     0 #111, -.5em 0     0 #111,                 .5em 0     0 #111, 1em 0     0 #111,
                -1em .5em  0 #111,
                -1em 1em   0 #111, -.5em 1em   0 #111, 0 1em   0 #111, .5em 1em   0 #111, 1em 1em   0 #111;
}
.bocsses.f {
    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,
                -1em 0     0 #111, -.5em 0     0 #111,                 .5em 0     0 #111, 1em 0     0 #111,
                -1em .5em  0 #111,
                -1em 1em   0 #111;
}
.bocsses.g {
    background: transparent;
    box-shadow:                    -.5em -1em  0 #111, 0 -1em  0 #111, .5em -1em  0 #111, 1em -1em  0 #111,
                -1em -.5em 0 #111,
                -1em 0     0 #111,                                     .5em 0     0 #111, 1em 0     0 #111,
                -1em .5em  0 #111,                                                        1em .5em  0 #111,
                                   -.5em 1em   0 #111, 0 1em   0 #111, .5em 1em   0 #111;
}
.bocsses.h {
    box-shadow: -1em -1em  0 #111,                                                        1em -1em  0 #111,
                -1em -.5em 0 #111,                                                        1em -.5em 0 #111,
                -1em 0     0 #111, -.5em 0     0 #111,                 .5em 0     0 #111, 1em 0     0 #111,
                -1em .5em  0 #111,                                                        1em .5em  0 #111,
                -1em 1em   0 #111,                                                        1em 1em   0 #111;
}
.bocsses.i {
    box-shadow: -1em -1em  0 #111, -.5em -1em  0 #111, 0 -1em  0 #111, .5em -1em  0 #111, 1em -1em  0 #111,
                                                       0 -.5em 0 #111,
                
                                                       0 .5em  0 #111,
                -1em 1em   0 #111, -.5em 1em   0 #111, 0 1em   0 #111, .5em 1em   0 #111, 1em 1em   0 #111;
}
.bocsses.j {
    background: transparent;
    box-shadow:                                                                           1em -1em  0 #111,
                                                                                          1em -.5em 0 #111,
                -1em 0     0 #111,                                                        1em 0     0 #111,
                -1em .5em  0 #111,                                                        1em .5em  0 #111,
                                   -.5em 1em   0 #111, 0 1em   0 #111, .5em 1em   0 #111;
}
.bocsses.k {
    box-shadow: -1em -1em  0 #111,                                                        1em -1em  0 #111,
                -1em -.5em 0 #111,                                     .5em -.5em 0 #111,
                -1em 0     0 #111, -.5em 0     0 #111,  
                -1em .5em  0 #111,                                     .5em .5em  0 #111,
                -1em 1em   0 #111,                                                        1em 1em   0 #111;
}
.bocsses.l {
    background: transparent;
    box-shadow: -1em -1em  0 #111,
                -1em -.5em 0 #111,
                -1em 0     0 #111,
                -1em .5em  0 #111,
                -1em 1em   0 #111, -.5em 1em   0 #111, 0 1em   0 #111, .5em 1em   0 #111, 1em 1em   0 #111;
}
.bocsses.m {
    box-shadow: -1em -1em  0 #111, -.5em -1em  0 #111,                 .5em -1em  0 #111, 1em -1em  0 #111,
                -1em -.5em 0 #111,                     0 -.5em 0 #111,                    1em -.5em 0 #111,
                -1em 0     0 #111,                                                        1em 0     0 #111,
                -1em .5em  0 #111,                     0 .5em  0 #111,                    1em .5em  0 #111,
                -1em 1em   0 #111,                     0 1em   0 #111,                    1em 1em   0 #111;
}
.bocsses.n {
    box-shadow: -1em -1em  0 #111,                                                        1em -1em  0 #111,
                -1em -.5em 0 #111, -.5em -.5em 0 #111,                                    1em -.5em 0 #111,
                -1em 0     0 #111,                                                        1em 0     0 #111,
                -1em .5em  0 #111,                                     .5em .5em  0 #111, 1em .5em  0 #111,
                -1em 1em   0 #111,                                                        1em 1em   0 #111;
}
.bocsses.o {
    background: transparent;
    box-shadow:                    -.5em -1em  0 #111, 0 -1em  0 #111, .5em -1em  0 #111,
                -1em -.5em 0 #111,                                                        1em -.5em 0 #111,
                -1em 0     0 #111,                                                        1em 0     0 #111,
                -1em .5em  0 #111,                                                        1em .5em  0 #111,
                                   -.5em 1em   0 #111, 0 1em   0 #111, .5em 1em   0 #111;
}
.bocsses.p {
    box-shadow: -1em -1em  0 #111, -.5em -1em  0 #111, 0 -1em  0 #111, .5em -1em  0 #111,
                -1em -.5em 0 #111,                                                        1em -.5em 0 #111,
                -1em 0     0 #111, -.5em 0     0 #111,                 .5em 0     0 #111,
                -1em .5em  0 #111,
                -1em 1em   0 #111;
}
.bocsses.q {
    background: transparent;
    box-shadow:                    -.5em -1em  0 #111, 0 -1em  0 #111, .5em -1em  0 #111,
                -1em -.5em 0 #111,                                                        1em -.5em 0 #111,
                -1em 0     0 #111,                                                        1em 0     0 #111,
                -1em .5em  0 #111,                                     .5em .5em  0 #111, 1em .5em  0 #111,
                                   -.5em 1em   0 #111, 0 1em   0 #111, .5em 1em   0 #111, 1em 1em   0 #111;
}
.bocsses.r {
    box-shadow: -1em -1em  0 #111, -.5em -1em  0 #111, 0 -1em  0 #111, .5em -1em  0 #111,
                -1em -.5em 0 #111,                                                        1em -.5em 0 #111,
                -1em 0     0 #111, -.5em 0     0 #111,                 .5em 0     0 #111,
                -1em .5em  0 #111,                                                        1em .5em  0 #111,
                -1em 1em   0 #111,                                                        1em 1em   0 #111;
}
.bocsses.s {
    box-shadow:                    -.5em -1em  0 #111, 0 -1em  0 #111, .5em -1em  0 #111, 1em -1em  0 #111,
                -1em -.5em 0 #111,
                                   -.5em 0     0 #111,                 .5em 0     0 #111,
                                                                                          1em .5em  0 #111,
                -1em 1em   0 #111, -.5em 1em   0 #111, 0 1em   0 #111, .5em 1em   0 #111;
}
.bocsses.t {
    box-shadow: -1em -1em  0 #111, -.5em -1em  0 #111, 0 -1em  0 #111, .5em -1em  0 #111, 1em -1em  0 #111,
                                                       0 -.5em 0 #111,
                
                                                       0 .5em  0 #111,
                                                       0 1em   0 #111;
}
.bocsses.u {
    background: transparent;
    box-shadow: -1em -1em  0 #111,                                                        1em -1em  0 #111,
                -1em -.5em 0 #111,                                                        1em -.5em 0 #111,
                -1em 0     0 #111,                                                        1em 0     0 #111,
                -1em .5em  0 #111,                                                        1em .5em  0 #111,
                                   -.5em 1em   0 #111, 0 1em   0 #111, .5em 1em   0 #111;
}
.bocsses.v {
    background: transparent;
    box-shadow: -1em -1em  0 #111,                                                        1em -1em  0 #111,
                -1em -.5em 0 #111,                                                        1em -.5em 0 #111,
                -1em 0     0 #111,                                                        1em 0     0 #111,
                                   -.5em .5em  0 #111,                 .5em .5em  0 #111,
                                                       0 1em   0 #111;
}
.bocsses.w {
    box-shadow: -1em -1em  0 #111,                     0 -1em  0 #111,                    1em -1em  0 #111,
                -1em -.5em 0 #111,                     0 -.5em 0 #111,                    1em -.5em 0 #111,
                -1em 0     0 #111,                                                        1em 0     0 #111,
                -1em .5em  0 #111,                     0 .5em  0 #111,                    1em .5em  0 #111,
                                   -.5em 1em   0 #111,                 .5em 1em   0 #111;
}
.bocsses.x {
    box-shadow: -1em -1em  0 #111,                                                        1em -1em  0 #111,
                                   -.5em -.5em 0 #111,                 .5em -.5em 0 #111,
                 
                                   -.5em .5em  0 #111,                 .5em .5em  0 #111,
                -1em 1em   0 #111,                                                        1em 1em   0 #111;
}
.bocsses.y {
    box-shadow: -1em -1em  0 #111,                                                        1em -1em  0 #111,
                                   -.5em -.5em 0 #111,                 .5em -.5em 0 #111,
                
                                                       0 .5em  0 #111,
                                                       0 1em   0 #111;
}
.bocsses.z {
    box-shadow: -1em -1em  0 #111, -.5em -1em  0 #111, 0 -1em  0 #111, .5em -1em  0 #111, 1em -1em  0 #111,
                                                                       .5em -.5em 0 #111,
                
                                   -.5em .5em  0 #111,
                -1em 1em   0 #111, -.5em 1em   0 #111, 0 1em   0 #111, .5em 1em   0 #111, 1em 1em   0 #111;
}
.bocsses.zero {
    box-shadow:                    -.5em -1em  0 #111, 0 -1em  0 #111, .5em -1em  0 #111,
                -1em -.5em 0 #111,                                     .5em -.5em 0 #111, 1em -.5em 0 #111,
                -1em 0     0 #111,                                                        1em 0     0 #111,
                -1em .5em  0 #111, -.5em .5em  0 #111,                                    1em .5em  0 #111,
                                   -.5em 1em   0 #111, 0 1em   0 #111, .5em 1em   0 #111;
}
.bocsses.one {
    box-shadow:                    -.5em -1em  0 #111, 0 -1em  0 #111,
                                                       0 -.5em 0 #111,
                
                                                       0 .5em  0 #111,
                -1em 1em   0 #111, -.5em 1em   0 #111, 0 1em   0 #111, .5em 1em   0 #111, 1em 1em   0 #111;
}
.bocsses.two {
    box-shadow: -1em -1em  0 #111, -.5em -1em  0 #111, 0 -1em  0 #111, .5em -1em  0 #111,
                                                                                          1em -.5em 0 #111,
                                   -.5em 0     0 #111,                 .5em 0     0 #111,
                -1em .5em  0 #111,
                -1em 1em   0 #111, -.5em 1em   0 #111, 0 1em   0 #111, .5em 1em   0 #111, 1em 1em   0 #111;
}
.bocsses.three {
    box-shadow: -1em -1em  0 #111, -.5em -1em  0 #111, 0 -1em  0 #111, .5em -1em  0 #111,
                                                                                          1em -.5em 0 #111,
                -1em 0     0 #111, -.5em 0     0 #111,                 .5em 0     0 #111,
                                                                                          1em .5em  0 #111,
                -1em 1em   0 #111, -.5em 1em   0 #111, 0 1em   0 #111, .5em 1em   0 #111;
}
.bocsses.four {
    background: transparent;
    box-shadow:                                                        .5em -1em  0 #111,
                                                       0 -.5em 0 #111, .5em -.5em 0 #111,
                                   -.5em 0     0 #111,                 .5em 0     0 #111,
                -1em .5em  0 #111, -.5em .5em  0 #111, 0 .5em  0 #111, .5em .5em  0 #111, 1em .5em  0 #111,
                                                                       .5em 1em   0 #111;
}
.bocsses.five {
    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,
                -1em 0     0 #111, -.5em 0     0 #111,                 .5em 0     0 #111,
                                                                                          1em .5em  0 #111,
                -1em 1em   0 #111, -.5em 1em   0 #111, 0 1em   0 #111, .5em 1em   0 #111;
}
.bocsses.six {
    box-shadow:                    -.5em -1em  0 #111, 0 -1em  0 #111, .5em -1em  0 #111, 1em -1em  0 #111,
                -1em -.5em 0 #111,
                -1em 0     0 #111, -.5em 0     0 #111,                 .5em 0     0 #111,
                -1em .5em  0 #111,                                                        1em .5em  0 #111,
                                   -.5em 1em   0 #111, 0 1em   0 #111, .5em 1em   0 #111;
}
.bocsses.seven {
    background: transparent;
    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,
                                                                                          1em 0     0 #111,
                                                                                          1em .5em  0 #111,
                                                                                          1em 1em   0 #111;
}
.bocsses.eight {
    box-shadow:                    -.5em -1em  0 #111, 0 -1em  0 #111, .5em -1em  0 #111,
                -1em -.5em 0 #111,                                                        1em -.5em 0 #111,
                                   -.5em 0     0 #111,                 .5em 0     0 #111,
                -1em .5em  0 #111,                                                        1em .5em  0 #111,
                                   -.5em 1em   0 #111, 0 1em   0 #111, .5em 1em   0 #111;
}
.bocsses.nine {
    box-shadow:                    -.5em -1em  0 #111, 0 -1em  0 #111, .5em -1em  0 #111,
                -1em -.5em 0 #111,                                                        1em -.5em 0 #111,
                                   -.5em 0     0 #111,                 .5em 0     0 #111, 1em 0     0 #111,
                                                                                          1em .5em  0 #111,
                -1em 1em   0 #111, -.5em 1em   0 #111, 0 1em   0 #111, .5em 1em   0 #111;
}
.bocsses.period {
    background: transparent;
    box-shadow: 
                
                
                
                                                       0 1em   0 #111;
}
.bocsses.comma {
    background: transparent;
    box-shadow: 
                
                
                                                       0 .5em  0 #111,
                                                       0 1em   0 #111;
}
.bocsses.questionMark {
    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 0     0 #111, 1em 0     0 #111,
                
                                                       0 1em   0 #111;
}
.bocsses.exclamationMark {
    box-shadow:                                        0 -1em  0 #111,
                                                       0 -.5em 0 #111,
                
                
                                                       0 1em   0 #111;
}
.bocsses.colon {
    background: transparent;
    box-shadow: 
                                                       0 -.5em 0 #111,
                
                                                       0 .5em  0 #111;
                
}
.bocsses.semicolon {
    background: transparent;
    box-shadow: 
                                                       0 -.5em 0 #111,
                
                                                       0 .5em  0 #111,
                                                       0 1em   0 #111;
                
}
.bocsses.hyphen {
    box-shadow: 
                
                                   -.5em 0     0 #111,                 .5em 0     0 #111;
                
                
}
.bocsses.underscore {
    background: transparent;
    box-shadow: 
                
                
                
                -1em 1em   0 #111, -.5em 1em   0 #111, 0 1em   0 #111, .5em 1em   0 #111, 1em 1em   0 #111;
}
.bocsses.apostrophe {
    background: transparent;
    box-shadow:                                        0 -1em  0 #111,
                                                       0 -.5em 0 #111;
                
                
                
}
.bocsses.quotationMark {
    background: transparent;
    box-shadow:                    -.5em -1em  0 #111,                 .5em -1em  0 #111,
                                   -.5em -.5em 0 #111,                 .5em -.5em 0 #111;
                
                
                
}
.bocsses.at {
    box-shadow:                    -.5em -1em  0 #111, 0 -1em  0 #111, .5em -1em  0 #111,
                -1em -.5em 0 #111,                                                        1em -.5em 0 #111,
                -1em 0     0 #111,                                     .5em 0     0 #111, 1em 0     0 #111,
                -1em .5em  0 #111,                     0 .5em  0 #111,                    1em .5em  0 #111,
                -1em 1em   0 #111,                     0 1em   0 #111, .5em 1em   0 #111;
}
.bocsses.ellipsis {
    background: transparent;
    box-shadow: 
                
                
                
                -1em 1em   0 #111,                     0 1em   0 #111,                    1em 1em   0 #111;
}
.bocsses.slash {
    box-shadow:                                                                           1em -1em  0 #111,
                                                                       .5em -.5em 0 #111,
                
                                   -.5em .5em  0 #111,
                -1em 1em   0 #111;
}
.bocsses.backslash {
    box-shadow: -1em -1em  0 #111,
                                   -.5em -.5em 0 #111,
                
                                                                       .5em .5em  0 #111,
                                                                                          1em 1em   0 #111;
}
.bocsses.leftParenthesis {
    box-shadow:                                                        .5em -1em  0 #111,
                                                       0 -.5em 0 #111,
                
                                                       0 .5em  0 #111,
                                                                       .5em 1em   0 #111;
}
.bocsses.rightParenthesis {
    box-shadow:                    -.5em -1em  0 #111,
                                                       0 -.5em 0 #111,
                
                                                       0 .5em  0 #111,
                                   -.5em 1em   0 #111;
}
.bocsses.leftBracket {
    box-shadow:                                        0 -1em  0 #111, .5em -1em  0 #111,
                                                       0 -.5em 0 #111,
                
                                                       0 .5em  0 #111,
                                                       0 1em   0 #111, .5em 1em   0 #111;
}
.bocsses.rightBracket {
    box-shadow:                    -.5em -1em  0 #111, 0 -1em  0 #111,
                                                       0 -.5em 0 #111,
                
                                                       0 .5em  0 #111,
                                   -.5em 1em   0 #111, 0 1em   0 #111;
}
.bocsses.leftChevron {
    background: transparent;
    box-shadow:                                                        .5em -1em  0 #111,
                                                       0 -.5em 0 #111,
                                   -.5em 0     0 #111,
                                                       0 .5em  0 #111,
                                                                       .5em 1em   0 #111;
}
.bocsses.rightChevron {
    background: transparent;
    box-shadow:                    -.5em -1em  0 #111,
                                                       0 -.5em 0 #111,
                                                                       .5em 0     0 #111,
                                                       0 .5em  0 #111,
                                   -.5em 1em   0 #111;
}
@-webkit-keyframes background {
    0%   { background-color: #dde; }
    20%  { background-color: #ded; }
    40%  { background-color: #edd; }
    60%  { background-color: #eed; }
    80%  { background-color: #dee; }
}
@-moz-keyframes background {
    0%   { background-color: #dde; }
    20%  { background-color: #ded; }
    40%  { background-color: #edd; }
    60%  { background-color: #eed; }
    80%  { background-color: #dee; }
}
@-ms-keyframes background {
    0%   { background-color: #dde; }
    20%  { background-color: #ded; }
    40%  { background-color: #edd; }
    60%  { background-color: #eed; }
    80%  { background-color: #dee; }
}
@-o-keyframes background {
    0%   { background-color: #dde; }
    20%  { background-color: #ded; }
    40%  { background-color: #edd; }
    60%  { background-color: #eed; }
    80%  { background-color: #dee; }
}
@keyframes background {
    0%   { background-color: #dde; }
    20%  { background-color: #ded; }
    40%  { background-color: #edd; }
    60%  { background-color: #eed; }
    80%  { background-color: #dee; }
}​
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console