CSS Playing Cards


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 Link (for selecting single cards)

Q ♥ 
<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>

In your Hand

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

A Deck

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

A Full Set