CSS Playing Cards

Back to the corresponding blog post

Surrounding Container:

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

With different options (default is the respective opposite):

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

Options:

Languages:

Note: ".simpleCards" doesn't work with ".faceImages" and ".playfulSuits".

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>
    

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

Back to the corresponding blog post