CSS Playing Cards

by Jeff Yaus

A single CSS stylesheet lets you easily create all the cards in a playing card deck, using only CSS and Unicode characters — no images!

Usage

Each card is just <div class="card">, with two empty <span aria-hidden="true"> tags inside it. Each card then also gets a class for the name of the suit (e.g. "card-hearts") and a class for the value (e.g. "card-9" for a nine). For instance, the king of spades would look like:

            <div class="card card-spades card-k">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </div>
        

A class of "card-joker" creates a joker; for games that need to differentiate between the two jokers, you can use "card-joker" and "card-joker-alt".

Additionally, adding class "card-facedown" to a card hides its face and shows the back of the card instead.

Customizing

All the dimensions and font sizes are built using ems as the unit, so you can easily adjust the size of the deck by adjusting the base font size of the .card class.

The colors and icons used for the suits, and the names of the face cards, are stored as CSS custom properties. These can be easily adjusted to customize the deck from its French-style default. For instance, changing one variable will turn hearts into the roses used instead in a Swiss German deck; another variable will turn those roses from red to Swiss German yellow.

Accessibility

Version 3.0 of these cards is accessible and screen-reader-friendly.

If accessibility is not a priority for you, well, shame on you, but you can leave off the aria-hidden="true" on the span tags and thus simplify your API to just
<div class="card card-spades card-k"><span></span><span></span></div>