Skip to content
Playing cards using only CSS and Unicode characters
Branch: gh-pages
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
cards.css
cards.less
index.html
site.css

README.md

CSS Playing Cards

  • by Jeff Yaus

Playing cards using only CSS and Unicode characters

http://jyaus.github.io/css-playing-cards/

Usage

All cards should be div elements, each with an empty span inside it. Each card gets a CSS class of "card", plus 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></span></div>

A class of "card-joker" creates a joker; for games that need to differentiate between the two jokers, you can use "card-joke" 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 LESS variables. 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

For accessibility, each card can contain an optional <p> tag, into which you can put text descriptions of the card as appropriate (e.g. "9H" or "Nine of Hearts"). This text will not be visible in standard browsers, but will be read by screen readers.

Usage without LESS

A post-processed version of the .less file is included as a .css file.

You can’t perform that action at this time.