CSS Playing Cards

CSS Playing Cards help you to create simple and semantic playing cards in (X)HTML. This documents some examples and how to set them up.

Surrounding Container:

<div class="playingCards">...</div>

With different options (default is the respective opposite):

<div class="playingCards fourColours faceImages simpleCards inText rotateHand">...</div>

Use the option tool on the right to toggle between the different options and languages while you are looking at cards (best on the full set). (Note: Some of the options don't work with all of the cards by design. And toggling between languages doesn't work properly in Chrome.)

Options:

• fourColours
• faceImages
• simpleCards
• inText
• rotateHand

Languages:

• en
• de
• fr

Single Cards

Back

<div class="card back">*</div>

Front

<div class="card rank-7 spades">
    <span class="rank">7</span>
    <span class="suit">&spades;</span>
</div>

A Joker

<div class="card little joker">
    <span class="rank">-</span>
    <span class="suit">Joker</span>
</div>

Selected

<strong>
    <span class="card rank-a clubs">
        <span class="rank">A</span>
        <span class="suit">&clubs;</span>
    </span>
</strong>

As a Link (for selecting single cards)

<a class="card rank-q hearts" href="#">
    <span class="rank">Q</span>
    <span class="suit">&hearts;</span>
</a>

As a Label with Checkbox (for selecting multiple cards)

<label for="c-2D" class="card rank-2 diams">
    <span class="rank">2</span>
    <span class="suit">&diams;</span>
    <input type="checkbox" name="c-2D" id="c-2D" value="select" />
</label>

Different Hands

Lying on the Table

<ul class="table">
    <li>...card...</li>
    ...
</ul>

• 2 ♦
• Q ♥
• A ♣
• 3 ♥
• 10 ♣
• J ♦
• 9 ♠

In your Hand

<ul class="hand">
    <li>...card...</li>
    ...
</ul>

• 7 ♦
• 8 ♥
• 9 ♠
• 10 ♣
• J ♦
• 5 ♣
• 6 ♦
• Q ♥
• K ♠

A Deck

<ul class="deck">
    <li>...card...</li>
    ...
</ul>

• *
• *
• *
• *
• *
• *
• *
• *
• *
• *
• *
• *
• *
• *
• *
• *
• *
• *
• *
• *

A Full Set

• 2♦
• 3♦
• 4♦
• 5♦
• 6♦
• 7♦
• 8♦
• 9♦
• 10♦
• J♦
• Q♦
• K♦
• A♦

• 2♥
• 3♥
• 4♥
• 5♥
• 6♥
• 7♥
• 8♥
• 9♥
• 10♥
• J♥
• Q♥
• K♥
• A♥

• 2♠
• 3♠
• 4♠
• 5♠
• 6♠
• 7♠
• 8♠
• 9♠
• 10♠
• J♠
• Q♠
• K♠
• A♠

• 2♣
• 3♣
• 4♣
• 5♣
• 6♣
• 7♣
• 8♣
• 9♣
• 10♣
• J♣
• Q♣
• K♣
• A♣

• +Joker
• -Joker
• *

More

• The code on GitHub
• Download from GitHub
• The original blog post
• Comparison of CSS Playing Cards