Assuming you are using a browser that supports the :before and :after pseudo-selectors and the content property (a group that, alas, does not include many versions of IE), you should see playing cards. (Note: the layout seems to be off in Chrome, but not Safari. This is getting fixed in v1.2.)

All the cards on this page are empty <div> elements, each with an empty <span> inside it. Everything else is provided by CSS. (Take a look at the source code.) There are no images, only Unicode text.

Each card gets a CSS class of "card", plus a class for the name of the suit (e.g. "hearts"), and a class for the value (e.g. "v9" for a nine). A value of "vJoker" creates a joker; for games that need to differentiate between the two jokers, you can use "vJokerBlack" and "vJokerRed" instead.

Additionally, adding class "facedown" to a card hides its face and shows the back of the card instead, as shown at lower right.

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

The CSS on this page is available for use via Creative Commons, Attribution-Noncommercial-Share Alike 3.0 United States.

version 1.1 (6 Dec 2010): added accessibility. Each card can now take an optional <p> tag, into which you can put text descriptions of the card (e.g. "9H" or "Nine of Hearts"). This text will not be visible in standard browsers but will be read by screen readers.