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">♣</div> <div class="spotA2">♣</div> <div class="spotA4">♣</div> <div class="spotA5">♣</div> <div class="spotB2">♣</div> <div class="spotB4">♣</div> <div class="spotC1">♣</div> <div class="spotC2">♣</div> <div class="spotC4">♣</div> <div class="spotC5">♣</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">♥</div> <div class="spotA5">♥</div> <div class="spotB3">♥</div> <div class="spotC1">♥</div> <div class="spotC5">♥</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">♦</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 />♥</div> <div class="spotA1">♥</div> <div class="spotA2">♥</div> <div class="spotA4">♥</div> <div class="spotA5">♥</div> <div class="spotB3">♥</div> <div class="spotC1">♥</div> <div class="spotC2">♥</div> <div class="spotC4">♥</div> <div class="spotC5">♥</div> </div> </div>
♥
♣
♠
♦
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.