Skip to content

Instantly share code, notes, and snippets.

@thefrontender

thefrontender/css-playing-cards.html

Created April 15, 2012 23:35
Show Gist options
  • Save thefrontender/2395340 to your computer and use it in GitHub Desktop.
Save thefrontender/2395340 to your computer and use it in GitHub Desktop.
Download ZIP
CSS playing cards
Raw
css-playing-cards.html
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Card test - 10K Hearts</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
html,body,div,h1,a,abbr,dl,dt,dd,ul,li,button{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}
html {height:100%;}
body {height:100%;background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAPAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8f/8AAEQgARQBFAwERAAIRAQMRAf/EAGUAAQEBAQAAAAAAAAAAAAAAAAABAggBAQEBAAAAAAAAAAAAAAAAAAACAxAAAgIBAwIGAgIDAAAAAAAAAREAITFBUWGhAnGBkRIiMrHB8PFCUmIRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AOhQSVodPzcwWpzWtwIAgfQEdIAtMXfjAAMhesCsrOIEDIBIZECoDtWjXSBVgdOYEJCsrD3r+4D4L5CsQDAIHCJgB9UfitoAge2mQ2txAntDNIGxAuR8kORADKYBECfHK5T/AJrAV4jWAfaURnQQKq92wN+cAybIJ/EALxgfuABxzngCAIdg1gwJqe53vAr7d6yoD/ZitIEQQ0dHxgAWCcE9NMwKaOaGFAnuZpDVwLhvy8lAdtMDAswAYIAL4gOFXjAjIdYFjmBUdFwBAFOmCLgCLYrYQAABvkAmA7lbOlnwgT2+3R+GPCAygMGAQf66QDfcTnS98XApBJJyRvUBbRz0cAM7gD8QBZojEAF/lVOoFPhAl/U+uo1gRhcfuBoAMHLvuEDNE3k161AA2GqNniAD9yyq53gXXiBF8bNHhwKRhWupgV7hs+cCK+VAgC7s3p2wHtYrAy8wK7GmCd94BhC0d9VAAH25fafLS4C6KR15UCIFL6wNUAjnQQMrRC/44F+WvON7gTuemLgNe5/bV9IFC0+152gNlsYE7s/9cbqBo5DzzAD7Hy9IGb5b6KB//9k=) repeat;}
.head{height:10%;}
.table{height:90%;}
/* Cards */
.card { width: 6em; height: 8.5em; padding: .25em 0; background: #FFF; border: solid 1px #999; -moz-border-radius: .5em; border-radius: .5em; box-shadow:1px 1px 5px rgba(0, 0, 0, 0.5); color: #000; position: relative; text-align: left; -webkit-box-align: baseline;}
.card:after { content: attr(data-index); position: absolute; bottom: .25em; right: .15em; }
/* Default to black for Spades and Clubs */
abbr, .card:after { display: block; letter-spacing: -.1em; text-align: center; width: .8em; line-height: .9; }
/* Hearts and diamonds are red */
.card.h, .card.d { color: #F00; }
/* 3 columns of pips, maximum of 4 pips per column */
.card abbr:before,
.card abbr:after { width: .8em; font-size: 1.75em; height: 4em; line-height: 9; position: absolute; top: .5em; left: .55em; overflow: hidden; }
.card.h abbr:before, .card.h .rank:after { content: "♥ ♥ ♥ ♥" }
.card.d abbr:before, .card.d .rank:after { content: "♦ ♦ ♦ ♦" }
.card.s abbr:before, .card.s .rank:after { content: "♠ ♠ ♠ ♠" }
.card.c abbr:before, .card.c .rank:after { content: "♣ ♣ ♣ ♣" }
/* Centre column of pips */
.card .rank:after { left: 1.35em; }
/* Right column of pips */
.card .suit:before { left: 2.1em; }
/* Four pips */
.v8 abbr:before, .v9 abbr:before, .v10 abbr:before /* L/R: 8, 9, 10 */
{ line-height: 1 }
/* Three pips */
.v6 abbr:before, .v7 abbr:before, /* L/R: 6, 7 */
.v3 .rank:after /* C: 3 */
{ line-height: 1.333; }
/* Two pips */
.v4 abbr:before, .v5 abbr:before, /* L/R: 4, 5 */
.v2 .rank:after, .v10 .rank:after /* C: 2, 10 */
{ line-height: 2; }
/* One pip */
.v1 .rank:after, .v5 .rank:after, .v7 .rank:after, .v9 .rank:after /* C: A, 5, 7, 9 */
{ line-height: 4; }
/* Face cards */
/* http://code.google.com/p/vectorized-playing-cards/ */
.v11 .suit:after, .v12 .suit:after, .v13 .suit:after { content: "J"; width: .95em; height: 1.2em; font: italic 5.5em/1.2 Georgia, serif; text-align: center; left: .1em; top: .2em; }
.v12 .suit:after { content: "Q" }
.v13 .suit:after { content: "K" }
/* Trick */
.trick{height:50%;width:50%;margin:0 0 0 25%;overflow:visible;position:relative;background:#CCC;padding:0;}
.trick dt, .trick dd{position: absolute;}
.trick dt{width:50%;text-align:center}
.trick .p1 {left:25%;bottom:0}
.trick .p2 {left:-25%;top:50%}
.trick .p3 {left:25%;top:0}
.trick .p4 {right:-25%;top:50%}
.trick .p1 +.card {left:50%;top:40%;margin-left:-3em}
.trick .p2 +.card {right:50%;top:50%;margin-top:-4.5em}
.trick .p3 +.card {left:50%;bottom:40%;margin-left:-3em}
.trick .p4 +.card {left:50%;top:50%;margin-top:-4.5em}
/* Hand */
.hand {height:50%; margin: 0 auto; text-align:center; overflow:hidden;}
.hand li { display: inline; }
.hand .card { display: inline-block; margin-left:-3.5em; }
.hand li:first-child .card {margin-left:0;}
/* Rules */
nav {position:absolute;top:10%;right:10%;}
#rules { display:none; }
#rules:target { display: block; background: #FFF; position: absolute; height: 70%; width: 70%; top: 10%; left: 10%; padding: 5%; }
</style>
</head>
<body id="game" onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">
<h1 class="head">10k Hearts</h1>
<nav>
<a href="#rules">Rules</a>
</nav>
<div class="table">
<dl class="trick">
<dt class="p3">Player 3</dt>
<dd class="card s v7" data-index="7 ♠">
<abbr class="rank" title="Seven">7</abbr><abbr class="suit" title="of Spades">♠</abbr>
</dd>
<dt class="p4">Player 4</dt>
<dd class="card d v10" data-index="10 ♦">
<abbr class="rank" title="Ten">10</abbr><abbr class="suit" title="of Diamonds">♦</abbr>
</dd>
<dt class="p1">Player 1</dt>
<dd class="card h v9" data-index="9 ♥">
<abbr class="rank" title="Nine">9</abbr><abbr class="suit" title="of Hearts">♥</abbr>
</dd>
<dt class="p2">Player 2</dt>
<dd class="card c v8" data-index="8 ♣">
<abbr class="rank" title="Eight">8</abbr><abbr class="suit" title="of Clubs">♣</abbr>
</dd>
</dl>
<ul class="hand">
<li>
<button class="card h v1" data-suit=♥ data-rank=A type="button">
<abbr class="rank" title="Ace">A</abbr><abbr class="suit" title="of Hearts">♥</abbr>
</button>
</li>
<li>
<button class="card h v2">
<abbr class="rank" title="Two">2</abbr><abbr class="suit" title="of Hearts">♥</abbr>
</button>
</li>
<li>
<button class="card h v3">
<abbr class="rank" title="Three">3</abbr><abbr class="suit" title="of Hearts">♥</abbr>
</button>
</li>
<li>
<button class="card h v4">
<abbr class="rank" title="Four">4</abbr><abbr class="suit" title="of Hearts">♥</abbr>
</button>
</li>
<li>
<button class="card h v5">
<abbr class="rank" title="Five">5</abbr><abbr class="suit" title="of Hearts">♥</abbr>
</button>
</li>
<li>
<button class="card h v6">
<abbr class="rank" title="Six">6</abbr><abbr class="suit" title="of Hearts">♥</abbr>
</button>
</li>
<li>
<button class="card h v7">
<abbr class="rank" title="Seven">7</abbr><abbr class="suit" title="of Hearts">♥</abbr>
</button>
</li>
<li>
<button class="card h v8">
<abbr class="rank" title="Eight">8</abbr><abbr class="suit" title="of Hearts">♥</abbr>
</button>
</li>
<li>
<button class="card h v12" data-index="Q ♥">
<abbr class="rank" title="Queen">Q</abbr><abbr class="suit" title="of Hearts">♥</abbr>
</button>
</li>
<li>
<button class="card h v9">
<abbr class="rank" title="Nine">9</abbr><abbr class="suit" title="of Hearts">♥</abbr>
</button>
</li>
<li>
<button class="card h v10">
<abbr class="rank" title="Ten">10</abbr><abbr class="suit" title="of Hearts">♥</abbr>
</button>
</li>
<li>
<button class="card h v13" data-index="K ♥">
<abbr class="rank" title="King">K</abbr><abbr class="suit" title="of Hearts">♥</abbr>
</button>
</li>
<li>
<button class="card c v11" data-index="J ♥">
<abbr class="rank" title="Jack">J</abbr><abbr class="suit" title="of Hearts">♥</abbr>
</button>
</li>
</ul>
</div> <!-- end table -->
<div id="rules">
Rules
<p> Some rules...</p>
<p><a href="#game">Back to Game</a></p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment