Playing Cards with CSS

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

Face Cards

In the interest of making it all look good, we'll finally give in and use some graphics for the face cards. Below are the images used in the demo for the jack, queen and king.

jack.gif    queen.gif    king.gif

These were obtained from scans of actual playing cards, with a bit of image editing done to clean them up for better display on a computer screen. Although real cards usually use different images for each suit, the same three are used for all suits here to cut down on the number of images needed. Each is approximately 8K in filesize.

Like the text symbols used for spots, these can be resized using style rules. Unlike text, however, they will not render as smoothly at different sizes. The effects of halving or doubling the size can see below.

     

Even so, they'll do for a pretty fair range of sizes.

To use these, yet another style rule is added. Face cards can then use an IMG tag assigned to the class below.

.face {
  border: 1px solid #000000;
  position: absolute;
  left: 0.50em;
  top:  0.45em;
  width:  2.6em;
  height: 4.0em;
}

...

<div class="card" style="left:20em;top:6em;">
  <div class="front red">
    <div class="index">Q<br />&diams;</div>
    <img class="face" src="graphics/queen.gif" alt="" />
    <div class="spotA1">&diams;</div>
    <div class="spotC5">&diams;</div>
  </div>
</div>

Again, using em units for position and size will scale the image relative to the font size of the card DIV. Along with an index DIV, two DIVs for previously defined corner spots are added. This gives the result shown below.

Now, with everything in place, we can deal ourselves a straight flush.

Conclusion

While this exercise may seem like a novelty, the other articles mentioned at the beginning demonstrate how you can put these creations to practical (or, at least entertaining) use. They show how you can create JavaScript objects to represent and manipulate a full deck of cards, and how to dynamically display them on a web page.

But first, experiment with the demo and see how flexible CSS can be.

Prev