Skip to content

Instantly share code, notes, and snippets.

@JackieXu

JackieXu/dabblet.css

Created May 29, 2012 12:56
Show Gist options
  • Save JackieXu/2828233 to your computer and use it in GitHub Desktop.
Save JackieXu/2828233 to your computer and use it in GitHub Desktop.
Download ZIP
Cards
Raw
dabblet.css
/**
* Cards
*/
body {
background-color: #000;
}
.card {
background-color: #fff;
border-radius: 10px;
box-shadow: 1px 2px 2px #aaa;
cursor: pointer;
display: inline-block;
height: 180px;
margin-top: 0;
position: relative;
text-align: center;
transition: top 0.3s linear;
width: 130px;
}
.card:hover .card_text {
text-decoration: underline;
}
.card_suit {
color: #94388d;
font-size: 90pt;
margin-top: 20px;
}
.card_text {
color: #94388d;
font-family: "Arial Rounded MT Bold";
font-size: 11pt;
font-weight: bold;
margin-top: -15px;
}
#active {
color: #92a25d;
}
#card_uitleg {
transform: rotate(4deg);
z-index: 42;
}
.card:hover {
transition: top 0.3s linear;
top: 20px;
}
#card_stand {
margin-left: -20px;
transform: rotate(-8deg);
z-index: 41;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="card" id="card_uitleg">
<div class="card_suit" id="active">&#9827;</div>
<div class="card_text">speluitleg</div>
</div>
<div class="card" id="card_stand">
<div class="card_suit">&#9829;</div>
<div class="card_text">Tussenstand</div>
</div>
<div class="card" id="card_matches">
<div class="card_suit">&#9824;</div>
<div class="card_text">Matches</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