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
CSS Dice: An Experiment by Jonathan Sampson - @jonathansampson
Raw
dabblet.css
.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;
}
Raw
dabblet.html
<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>
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment