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>
    

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

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>
    

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)

2 ♦

<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♣

Back to the corresponding blog post