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>

Options:

Languages:

Single Cards

Back

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

Front

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

A Joker

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

Selected

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

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>

In your Hand

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

A Deck

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

A Full Set

More