Skip to content

Instantly share code, notes, and snippets.

@thefrontender

thefrontender/css-playing-cards.html

Created April 15, 2012 23:35
Download ZIP

Revisions

  1. thefrontender created this gist Apr 15, 2012.
    193 changes: 193 additions & 0 deletions css-playing-cards.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,193 @@
    <!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>