Skip to content

Instantly share code, notes, and snippets.

@JackieXu

JackieXu/dabblet.css

Created May 29, 2012 14:40
Show Gist options
  • Save JackieXu/2828800 to your computer and use it in GitHub Desktop.
Save JackieXu/2828800 to your computer and use it in GitHub Desktop.
Download ZIP
Playing chips
Raw
dabblet.css
/**
* Playing chips
*/
body {
background-color: orange;
}
.poker_chips {
float: left;
height: 100px;
width: 120px;
}
.green_poker_chip {
background-color: #fff;
border: 10px dotted #49b456;
border-radius: 70px;
box-shadow: 1px 2px 2px #333;
height: 70px;
position: absolute;
width: 70px;
}
.green_poker_chip_inner {
border: 10px double #49b456;
border-radius: 70px;
height: 50px;
width: 50px;
}
.black_poker_chip {
background-color: #fff;
border: 10px dotted #000;
border-radius: 70px;
box-shadow: 1px 2px 2px #333;
height: 70px;
position: absolute;
width: 70px;
}
.black_poker_chip_inner {
border: 10px double #000;
border-radius: 70px;
height: 50px;
width: 50px;
}
.purple_poker_chip {
background-color: #fff;
border: 10px dotted #a559ba;
border-radius: 70px;
box-shadow: 1px 2px 2px #333;
height: 70px;
position: absolute;
width: 70px;
}
.purple_poker_chip_inner {
border: 10px double #a559ba;
border-radius: 70px;
height: 50px;
width: 50px;
}
#chip_1 {
transform: rotate(3deg);
z-index: 42;
}
#chip_2 {
margin-left: 3px;
margin-top: 6px;
transform: rotate(-3deg);
z-index: 41;
}
#chip_3 {
margin-left: 8px;
margin-top: 3px;
transform: rotate(14deg);
z-index: 40;
}
#chip_4 {
margin-top: 10px;
z-index: 42;
}
#chip_5 {
margin-left: 6px;
margin-top: 8px;
z-index: 41;
}
#chip_6 {
margin-left: 4px;
margin-top: 14px;
z-index: 40;
}
#chip_7 {
margin-left: 4px;
margin-top: 3px;
z-index: 42;
}
#chip_8 {
margin-top: 7px;
z-index: 41;
}
#chip_9 {
margin-left: 7px;
margin-top: 10px;
z-index: 40;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="poker_chips_holder">
<div class="poker_chips">
<div class="green_poker_chip" id="chip_1">
<div class="green_poker_chip_inner"></div>
</div>
<div class="green_poker_chip" id="chip_2">
<div class="green_poker_chip_inner"></div>
</div>
<div class="green_poker_chip" id="chip_3">
<div class="green_poker_chip_inner"></div>
</div>
</div>
<div class="poker_chips">
<div class="black_poker_chip" id="chip_4">
<div class="black_poker_chip_inner"></div>
</div>
<div class="black_poker_chip" id="chip_5">
<div class="black_poker_chip_inner"></div>
</div>
<div class="black_poker_chip" id="chip_6">
<div class="black_poker_chip_inner"></div>
</div>
</div>
<div class="poker_chips">
<div class="purple_poker_chip" id="chip_7">
<div class="purple_poker_chip_inner"></div>
</div>
<div class="purple_poker_chip" id="chip_8">
<div class="purple_poker_chip_inner"></div>
</div>
<div class="purple_poker_chip" id="chip_9">
<div class="purple_poker_chip_inner"></div>
</div>
</div>
</div>
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment