-->
Bookmark and Share

Playing Cards with CSS

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

The style rules defining each spot class are shown below. Again, note that em units are used so that the positions are relative to the font size inherited from the card DIV.

.spotA1 { position: absolute; left: 0.60em; top: 0.5em; }
.spotA2 { position: absolute; left: 0.60em; top: 1.5em; }
.spotA3 { position: absolute; left: 0.60em; top: 2.0em; }
.spotA4 { position: absolute; left: 0.60em; top: 2.5em; }
.spotA5 { position: absolute; left: 0.60em; top: 3.5em; }
.spotB1 { position: absolute; left: 1.55em; top: 0.5em; }
.spotB2 { position: absolute; left: 1.55em; top: 1.0em; }
.spotB3 { position: absolute; left: 1.55em; top: 2.0em; }
.spotB4 { position: absolute; left: 1.55em; top: 3.0em; }
.spotB5 { position: absolute; left: 1.55em; top: 3.5em; }
.spotC1 { position: absolute; left: 2.50em; top: 0.5em; }
.spotC2 { position: absolute; left: 2.50em; top: 1.5em; }
.spotC3 { position: absolute; left: 2.50em; top: 2.0em; }
.spotC4 { position: absolute; left: 2.50em; top: 2.5em; }
.spotC5 { position: absolute; left: 2.50em; top: 3.5em; }

Below you can see the result of adding the necessary DIVs to create the "Ten of Clubs" card.

<div class="card">
  <div class="front">
    <div class="spotA1">&clubs;</div>
    <div class="spotA2">&clubs;</div>
    <div class="spotA4">&clubs;</div>
    <div class="spotA5">&clubs;</div>
    <div class="spotB2">&clubs;</div>
    <div class="spotB4">&clubs;</div>
    <div class="spotC1">&clubs;</div>
    <div class="spotC2">&clubs;</div>
    <div class="spotC4">&clubs;</div>
    <div class="spotC5">&clubs;</div>
  </div>
</div>

Colors

Cards representing the diamonds and hearts suits should have red spots instead of black. That's pretty easy to do with the addition of another style rule.

.red { color: #ff0000; }

The front and red classes can then be combined on any given card DIV to achieve the desired effect.

<div class="card">
  <div class="front red">
    <div class="spotA1">&hearts;</div>
    <div class="spotA5">&hearts;</div>
    <div class="spotB3">&hearts;</div>
    <div class="spotC1">&hearts;</div>
    <div class="spotC5">&hearts;</div>
    </div>
</div>

Specifying both front and red on the CLASS attribute of the DIV causes the browser to apply both style rules to it.

Aces

You'll notice that aces were left out when the spots for the other numbered cards were set up. Aces on real cards usually have a single spot in the center of the card, but it's much larger than the spots used on other cards.

To create this effect, a larger font size must be used for the symbol character. But since the position of each spot is relative to the font size, the center spot defined above, spotB3, is unsuitable because the size of the em unit would be interpreted differently.

Instead, another style rule is defined for the ace spot. The font size is specified as a percentage of the default (which is inherited from the card class, and the values for the left and top parameters are adjusted accordingly.

.ace {
  font-size: 300%;
  position: absolute;
  left: 0.325em;
  top:  0.250em;
}
...
<div class="card">
  <div class="front">
    <div class="ace">&diams;</div>
  </div>
</div>

This results in a suitably large spot character properly centered in the middle of the card, as seen above.

Card Index

A handy feature included on almost all modern playing cards is an index. The card rank and suit are printed in the upper left and lower right corners of each card, allowing you to easily identify any card when they overlap.

This is a nice feature to add to our cards, as it would allow us to overlap them on the screen. Plus it helps the users since they're probably don't want to have to count the spots on a card.

The index is printed on two opposite corners so that, in the real world, you don't have to worry about getting a card right side up. On a web page, the cards will always be right side up (as will the text) so only one corner is done. Besides, text can be inverted.

Implementing this is just a matter of adding another style rule and a DIV tag to each card. Again, font-size is specified as a percentage of the card's default font size and the position is adjusted accordingly.

.index {
  font-size: 50%;
  font-weight: bold;
  text-align: center;
  position: absolute;
  left: 0.25em;
  top:  0.25em;
}
...
<div class="card">
  <div class="front red">
    <div class="index">9<br />&hearts;</div>
    <div class="spotA1">&hearts;</div>
    <div class="spotA2">&hearts;</div>
    <div class="spotA4">&hearts;</div>
    <div class="spotA5">&hearts;</div>
    <div class="spotB3">&hearts;</div>
    <div class="spotC1">&hearts;</div>
    <div class="spotC2">&hearts;</div>
    <div class="spotC4">&hearts;</div>
    <div class="spotC5">&hearts;</div>
  </div>
</div>
9
4
10
7

You can see how this makes the display both more realistic and improves readability when cards are overlapped as seen in the above right.

Next, we can address the face cards.