Skip to content

Instantly share code, notes, and snippets.

@dcneiner

dcneiner/dabblet.css

Forked from jonathansampson/dabblet.css
Created June 8, 2012 15:03
Show Gist options
  • Save dcneiner/2896055 to your computer and use it in GitHub Desktop.
Save dcneiner/2896055 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. dcneiner revised this gist Jun 8, 2012. 2 changed files with 14 additions and 13 deletions.
    15 changes: 8 additions & 7 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,22 +1,22 @@
    /* CSS Dice: An Experiment by Jonathan Sampson - @jonathansampson */
    .die.one .dot {
    .die.one:after {
    box-shadow: 0 .2em 0 #FFF
    }
    .die.two .dot {
    .die.two:after {
    background: transparent;
    box-shadow: -2.3em -2.3em 0 #345,
    2.3em 2.3em 0 #345,
    -2.3em -2.3em 0 #FFF,
    2.3em 2.4em 0 #FFF
    }
    .die.three .dot {
    .die.three:after {
    box-shadow: -2.3em -2.3em 0 #345,
    2.3em 2.3em 0 #345,
    -2.3em -2.3em 0 #FFF,
    2.3em 2.4em 0 #FFF,
    0 .2em 0 #FFF
    }
    .die.four .dot {
    .die.four:after {
    background: transparent;
    box-shadow: -2.3em -2.3em 0 #345,
    2.3em 2.3em 0 #345,
    @@ -27,7 +27,7 @@
    -2.3em 2.4em 0 #FFF,
    2.3em -2.3em 0 #FFF
    }
    .die.five .dot {
    .die.five:after {
    box-shadow: -2.3em -2.3em 0 #345,
    2.3em 2.3em 0 #345,
    -2.3em 2.3em 0 #345,
    @@ -38,7 +38,7 @@
    -2.3em 2.4em 0 #FFF,
    0 .2em 0 #FFF
    }
    .die.six .dot {
    .die.six:after {
    background: transparent;
    box-shadow: -2.3em -2.3em 0 #345,
    -2.3em 0 0 #345,
    @@ -64,7 +64,8 @@
    box-shadow: 0px 5px 0 #CCC, 0 6px 3px #444, 0 10px 5px #999;
    background-image: linear-gradient(top, #fefefe, #f1f1f1 80%)
    }
    .dot {
    .die:after {
    content: "";
    width: 20%;
    height: 20%;
    left: 50%;
    12 changes: 6 additions & 6 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    <div class="die one"> <span class="dot"></span></div>
    <div class="die two"> <span class="dot"></span></div>
    <div class="die three"><span class="dot"></span></div>
    <div class="die four"> <span class="dot"></span></div>
    <div class="die five"> <span class="dot"></span></div>
    <div class="die six"> <span class="dot"></span></div>
    <div class="die one"></div>
    <div class="die two"></div>
    <div class="die three"></div>
    <div class="die four"></div>
    <div class="die five"></div>
    <div class="die six"></div>
    <p>Pure CSS Dice. An experiment by <a href="http://twitter.com/jonathansampson">@jonathansampson</a></p>
  2. @jonathansampson jonathansampson revised this gist May 31, 2012. 1 changed file with 13 additions and 7 deletions.
    20 changes: 13 additions & 7 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -7,13 +7,13 @@
    box-shadow: -2.3em -2.3em 0 #345,
    2.3em 2.3em 0 #345,
    -2.3em -2.3em 0 #FFF,
    2.3em 2.5em 0 #FFF
    2.3em 2.4em 0 #FFF
    }
    .die.three .dot {
    box-shadow: -2.3em -2.3em 0 #345,
    2.3em 2.3em 0 #345,
    -2.3em -2.3em 0 #FFF,
    2.3em 2.5em 0 #FFF,
    2.3em 2.4em 0 #FFF,
    0 .2em 0 #FFF
    }
    .die.four .dot {
    @@ -23,8 +23,8 @@
    -2.3em 2.3em 0 #345,
    2.3em -2.3em 0 #345,
    -2.3em -2.3em 0 #FFF,
    2.3em 2.5em 0 #FFF,
    -2.3em 2.5em 0 #FFF,
    2.3em 2.4em 0 #FFF,
    -2.3em 2.4em 0 #FFF,
    2.3em -2.3em 0 #FFF
    }
    .die.five .dot {
    @@ -34,8 +34,8 @@
    2.3em -2.3em 0 #345,
    -2.3em -2.2em 0 #FFF,
    2.3em -2.2em 0 #FFF,
    2.3em 2.5em 0 #FFF,
    -2.3em 2.5em 0 #FFF,
    2.3em 2.4em 0 #FFF,
    -2.3em 2.4em 0 #FFF,
    0 .2em 0 #FFF
    }
    .die.six .dot {
    @@ -45,7 +45,13 @@
    -2.3em 2.3em 0 #345,
    2.3em -2.3em 0 #345,
    2.3em 0 0 #345,
    2.3em 2.3em 0 #345
    2.3em 2.3em 0 #345,
    -2.3em -2.1em 0 #FFF,
    -2.3em .2em 0 #FFF,
    -2.3em 2.4em 0 #FFF,
    2.3em 2.4em 0 #FFF,
    2.3em .2em 0 #FFF,
    2.3em -2.1em 0 #FFF
    }
    .die {
    border-top: 1px solid #f1f1f1;
  3. @jonathansampson jonathansampson revised this gist May 31, 2012. 2 changed files with 2 additions and 0 deletions.
    1 change: 1 addition & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -69,3 +69,4 @@
    display: block;
    position: absolute;
    }
    body { text-align: center }
    1 change: 1 addition & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,3 +4,4 @@
    <div class="die four"> <span class="dot"></span></div>
    <div class="die five"> <span class="dot"></span></div>
    <div class="die six"> <span class="dot"></span></div>
    <p>Pure CSS Dice. An experiment by <a href="http://twitter.com/jonathansampson">@jonathansampson</a></p>
  4. @jonathansampson jonathansampson revised this gist May 31, 2012. 2 changed files with 38 additions and 28 deletions.
    65 changes: 37 additions & 28 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -4,57 +4,66 @@
    }
    .die.two .dot {
    background: transparent;
    box-shadow: -2.5em -2.5em 0 #345,
    2.5em 2.5em 0 #345,
    -2.5em -2.3em 0 #FFF,
    2.5em 2.7em 0 #FFF
    box-shadow: -2.3em -2.3em 0 #345,
    2.3em 2.3em 0 #345,
    -2.3em -2.3em 0 #FFF,
    2.3em 2.5em 0 #FFF
    }
    .die.three .dot {
    box-shadow: -2.5em -2.5em 0 #345,
    2.5em 2.5em 0 #345,
    -2.5em -2.3em 0 #FFF,
    2.5em 2.7em 0 #FFF,
    box-shadow: -2.3em -2.3em 0 #345,
    2.3em 2.3em 0 #345,
    -2.3em -2.3em 0 #FFF,
    2.3em 2.5em 0 #FFF,
    0 .2em 0 #FFF
    }
    .die.four .dot {
    background: transparent;
    box-shadow: -2.5em -2.5em 0 #345,
    2.5em 2.5em 0 #345,
    -2.5em 2.5em 0 #345,
    2.5em -2.5em 0 #345,
    -2.5em -2.3em 0 #FFF,
    2.5em 2.7em 0 #FFF,
    -2.5em 2.7em 0 #FFF,
    2.5em -2.3em 0 #FFF
    box-shadow: -2.3em -2.3em 0 #345,
    2.3em 2.3em 0 #345,
    -2.3em 2.3em 0 #345,
    2.3em -2.3em 0 #345,
    -2.3em -2.3em 0 #FFF,
    2.3em 2.5em 0 #FFF,
    -2.3em 2.5em 0 #FFF,
    2.3em -2.3em 0 #FFF
    }
    .die.five .dot {
    box-shadow: -2.5em -2.5em 0 #345,
    2.5em 2.5em 0 #345,
    -2.5em 2.5em 0 #345,
    2.5em -2.5em 0 #345,
    -2.5em -2.2em 0 #FFF,
    2.5em -2.2em 0 #FFF,
    2.5em 2.7em 0 #FFF,
    -2.5em 2.7em 0 #FFF,
    box-shadow: -2.3em -2.3em 0 #345,
    2.3em 2.3em 0 #345,
    -2.3em 2.3em 0 #345,
    2.3em -2.3em 0 #345,
    -2.3em -2.2em 0 #FFF,
    2.3em -2.2em 0 #FFF,
    2.3em 2.5em 0 #FFF,
    -2.3em 2.5em 0 #FFF,
    0 .2em 0 #FFF
    }
    .die.six .dot {
    background: transparent;
    box-shadow: -2.3em -2.3em 0 #345,
    -2.3em 0 0 #345,
    -2.3em 2.3em 0 #345,
    2.3em -2.3em 0 #345,
    2.3em 0 0 #345,
    2.3em 2.3em 0 #345
    }
    .die {
    border-top: 1px solid #f1f1f1;
    width: 50px; height: 50px;
    border-radius: 10px;
    position: relative;
    margin: 10px;
    font-size: 5px;
    font-size: 6px;
    display: inline-block;
    box-shadow: 0px 5px 0 #CCC, 0 6px 3px #444, 0 10px 5px #999;
    background-image: linear-gradient(top, #fefefe, #f1f1f1 80%)
    }
    .dot {
    width: 25%;
    height: 25%;
    width: 20%;
    height: 20%;
    left: 50%;
    top: 50%;
    margin: -12.5%;
    margin: -10%;
    background: #345;
    border-radius: 50%;
    display: block;
    1 change: 1 addition & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,3 +3,4 @@
    <div class="die three"><span class="dot"></span></div>
    <div class="die four"> <span class="dot"></span></div>
    <div class="die five"> <span class="dot"></span></div>
    <div class="die six"> <span class="dot"></span></div>
  5. @jonathansampson jonathansampson revised this gist May 31, 2012. 1 changed file with 44 additions and 11 deletions.
    55 changes: 44 additions & 11 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,28 +1,61 @@
    .die.one .dot { }
    .die.two .dot { background: #FFF;
    box-shadow: -2.5em -2.5em 0 #000, 2.5em 2.5em 0 #000 }
    .die.three .dot { box-shadow: -2.5em -2.5em 0 #000, 2.5em 2.5em 0 #000 }
    .die.four .dot { background: #FFF;
    box-shadow: -2.5em -2.5em 0 #000, 2.5em 2.5em 0 #000,
    -2.5em 2.5em 0 #000, 2.5em -2.5em 0 #000 }
    .die.five .dot { box-shadow: -2.5em -2.5em 0 #000, 2.5em 2.5em 0 #000,
    -2.5em 2.5em 0 #000, 2.5em -2.5em 0 #000 }
    /* CSS Dice: An Experiment by Jonathan Sampson - @jonathansampson */
    .die.one .dot {
    box-shadow: 0 .2em 0 #FFF
    }
    .die.two .dot {
    background: transparent;
    box-shadow: -2.5em -2.5em 0 #345,
    2.5em 2.5em 0 #345,
    -2.5em -2.3em 0 #FFF,
    2.5em 2.7em 0 #FFF
    }
    .die.three .dot {
    box-shadow: -2.5em -2.5em 0 #345,
    2.5em 2.5em 0 #345,
    -2.5em -2.3em 0 #FFF,
    2.5em 2.7em 0 #FFF,
    0 .2em 0 #FFF
    }
    .die.four .dot {
    background: transparent;
    box-shadow: -2.5em -2.5em 0 #345,
    2.5em 2.5em 0 #345,
    -2.5em 2.5em 0 #345,
    2.5em -2.5em 0 #345,
    -2.5em -2.3em 0 #FFF,
    2.5em 2.7em 0 #FFF,
    -2.5em 2.7em 0 #FFF,
    2.5em -2.3em 0 #FFF
    }
    .die.five .dot {
    box-shadow: -2.5em -2.5em 0 #345,
    2.5em 2.5em 0 #345,
    -2.5em 2.5em 0 #345,
    2.5em -2.5em 0 #345,
    -2.5em -2.2em 0 #FFF,
    2.5em -2.2em 0 #FFF,
    2.5em 2.7em 0 #FFF,
    -2.5em 2.7em 0 #FFF,
    0 .2em 0 #FFF
    }
    .die {
    border: 1px solid #CCC;
    border-top: 1px solid #f1f1f1;
    width: 50px; height: 50px;
    border-radius: 10px;
    position: relative;
    margin: 10px;
    font-size: 5px;
    display: inline-block;
    box-shadow: 0px 5px 0 #CCC, 0 6px 3px #444, 0 10px 5px #999;
    background-image: linear-gradient(top, #fefefe, #f1f1f1 80%)
    }
    .dot {
    width: 25%;
    height: 25%;
    left: 50%;
    top: 50%;
    margin: -12.5%;
    background: #000;
    background: #345;
    border-radius: 50%;
    display: block;
    position: absolute;
  6. @jonathansampson jonathansampson created this gist May 31, 2012.
    29 changes: 29 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    .die.one .dot { }
    .die.two .dot { background: #FFF;
    box-shadow: -2.5em -2.5em 0 #000, 2.5em 2.5em 0 #000 }
    .die.three .dot { box-shadow: -2.5em -2.5em 0 #000, 2.5em 2.5em 0 #000 }
    .die.four .dot { background: #FFF;
    box-shadow: -2.5em -2.5em 0 #000, 2.5em 2.5em 0 #000,
    -2.5em 2.5em 0 #000, 2.5em -2.5em 0 #000 }
    .die.five .dot { box-shadow: -2.5em -2.5em 0 #000, 2.5em 2.5em 0 #000,
    -2.5em 2.5em 0 #000, 2.5em -2.5em 0 #000 }
    .die {
    border: 1px solid #CCC;
    width: 50px; height: 50px;
    border-radius: 10px;
    position: relative;
    margin: 10px;
    font-size: 5px;
    display: inline-block;
    }
    .dot {
    width: 25%;
    height: 25%;
    left: 50%;
    top: 50%;
    margin: -12.5%;
    background: #000;
    border-radius: 50%;
    display: block;
    position: absolute;
    }
    5 changes: 5 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <div class="die one"> <span class="dot"></span></div>
    <div class="die two"> <span class="dot"></span></div>
    <div class="die three"><span class="dot"></span></div>
    <div class="die four"> <span class="dot"></span></div>
    <div class="die five"> <span class="dot"></span></div>
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}