Some days ago a friend of mine told me that he would be interested in using pure CSS playing cards for a personal project. A few people have tried CSS playing cards before. But I wasn’t satisfied with any of our findings, as ideally they should be semantic, accessible and scalable, they shouldn’t use more markup than necessary and should be pleasing to the eye. So, I was up for the challenge and created them myself …

First, let’s recap what others have done before:

• Playing Cards with CSS by Mike Hall was quite innovative at the time, but is very old by now (it is from 2001). Too much markup, only half semantic, but scalable and they don’t use any CSS3 goodness (because CSS3 didn’t exist back then).
• XHTML/CSS Playing Cards by Jerry Sievert are half semantic, the amount of markup is okay-ish and they are the most accessible out of these four, but they are not scalable and don’t belong to the beautiful kind.
• Creating playing cards with CSS & HTML by Jamie Taylor are quite beautiful, but are very unsemantic, not scalable and have a tad bit too much markup.
• CSS Playing Cards by Kevin Thompson are my personal favourites out of these four. They are really beautiful, are scalable (although the way they are built doesn’t display too well if the cards are too small) and plays neatly with CSS3. But although the class names are semantic, the markup (which again, is too much) is not semantic at all and completely inaccessible, i.e. it’s empty and contains no information about the cards if you turn CSS off.

Why my CSS Playing Cards are better? Well, they contain less markup, they are much more semantic and accessible (so they even make sense in Lynx), they are perfectly scalable and good looking.
The only negative thing: The CSS only works in modern browsers. (Tested on Win Firefox 3.6.8, Opera 10.61 and Chrome. Internet Explorer 8 cannot deal with many of the CSS3 goodness, but what makes the code unusable in IE8 is the lack of support for the “:nth-child(n)” selector. I implemented a rudimentary fix, though.)

And here’s the proof. This is the basic markup (only two spans in one div):

<div class="card rank-7 spades">
    <span class="rank">7</span>
    <span class="suit">&spades;</span>
</div>

Here is one example of a hand:

• 2♦
• 3♥
• 4♠
• 5♣
• 6♦
• 7♥
• 8♠
• 9♣
• 10♦
• J♥
• Q♠
• K♣
• A♦

And this is how it looks in Opera

Want more? You can see more examples or you can implement them and check out the code on GitHub as I open-sourced it, of course.

Update (17 October 2010):
Shortly after I published this, another variant surfaced the web:
CSS3 Card Trick: A Fun CSS3 Experiment by Alexander Dawson has cards which are not scalable at all, only half semantic and (like all the others) use too much markup, but are really beautiful and stylish.

Update (2 December 2010):
And I found another version:
CSS Cards by Jeff Yaus are semantic, highly scalable, a bit weird looking, have the least markup of all so far, but are unfortunately not accessible at all.

Last Update (28 May 2011):
And I found another variety… But from now on I won’t update this post anymore, but will update my Comparison of CSS Playing Cards on SocialCompare.com instead.

Really Last Update (12 June 2011):
I just updated my CSS Playing Cards. Get the new version from GitHub.
And additionally I built a beautiful new project page.