Bookmark and Share

Playing Cards with CSS

See the demo page for the finished version of the code.

This example demonstrates using CSS to graphically display standard playing cards on a web page. An obvious use would be for creating JavaScript card games like blackjack or poker.

This article, however, only covers the style rules and HTML tags needed to create a display. For an example of how these displays can can be generated via JavaScript and used dynamically, see article on JavaScript Card Objects or try the Blackjack game.

Why Use CSS?

The simplest method to display playing cards on a web page would be using individual images. But to include all cards in a standard deck, you'd need 52 separate images. That's quite a bit to ask a user to download.

You might instead try reducing this to a few common graphics, sliced and diced into tables. But this approach is not as easy as it might sound. The different patterns on each card don't always fit into a nice, even grid.

Instead, the method here uses the positioning features of CSS and a few standard HTML tags and character entities to create realistic looking cards with a minimum number of images and HTML tags. A few graphics are still required (for face cards) but far fewer than the other methods. As you'll see, using CSS also gives you more flexibility.

Basic Elements

First, we make use of some special characters supported by standard HTML. Below are the entity references for the symbolic characters representing each of the four card suits. Most browsers support these.

Being able to use these text characters for each card instead of images has several advantages. For one, it means a faster download. Also, you can easily change their size, just by changing the font size. Being text, the characters will automatically be anti-aliased, unlike images, which means they retain their smooth edges at any size.

Next, we need to set up some style rules and elements to represent an individual card. First two classes are defined.

.card {
  background-image: url("graphics/cardback.gif");
  border-color: #808080 #000000 #000000 #808080;
  border-width: 1px;
  border-style: solid;
  color: #000000;
  font-size: 20pt;
  position: absolute;
  width:  3.75em;
  height: 5.00em;
}
.front {
  background-color: #ffffff;
  color: #000000;
  position: absolute;
  width: 100%;
  height: 100%;
}
...
<div class="card">
  <div class="front"></div>
</div>
<div class="card">
  <div class="front" style="visibility:hidden;"></div>
</div>
cardback.gif
cardback.gif

The background image (shown at right) on the card class will make the outer DIV appear as a face down card. The inner DIV using the front class covers this background completely by default. However, this DIV can easily be hidden by setting its visibility style, as shown below, at right.

By setting it up this way, it will be easy to "flip" a card face down or face up via scripting.

Note that for both DIVs, either relative or absolute positioning must be used. This establishes them as a containing blocks so that other elements can be absolutely positioned within them. Also note the use of the em unit on the width and height parameters. This makes them relative to the font size of the card class. The width/height ratio approximates that of a real playing card.

The elements that will be placed inside the inner DIV will be positioned using em units as well. This way, if you can change the font-size of the card class, all of the card elements will be scaled and positioned accordingly.

Building Cards

Now we'll look at adding elements to the front -class DIV to make up individual cards.

Adding Spots

If you look at the faces of the ace through ten cards in a deck (see the demo ), you'll see a pattern in the way the spots are arranged.

Note the two through six cards. The spots on these cards all fit into a 3 x 3 grid as shown below.

·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·

The seven and eight cards use the same three spots on the outer columns but the spots on the center column are positioned a bit differently. These spots are centered about halfway between the original three spots.

·
·
·
·
·
·

The nine and ten cards use four rows on the outer columns, all equally spaced. Nine makes use of the center spot in the middle column while the ten can use the same middle column spots seen on the seven and eight cards.

·
·
·
·
·

In all, this adds up to 15 spots. 15 style classes are defined, each using absolute positioning. Then, for any given card, individual DIV tags can be added for each spot needed using the appropriate class to set its position.