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 (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.

I first thought about personalising my online CV to match these colours (with hair colour at the top, lip colour at the bottom and eye colour for links, etc). But somehow my body colours don’t make good website colours.

Instead I played around with those colours and created a pure HTML and CSS “image” of myself (the core code consists of just five divs). Et voilà, here it is.

You will only see the full beauty of it if you use a modern browser (and can see). It’s funny how IE6 still shows something which is recognisable as a face, but turns it into some kind of a monster:

Beauty is in the eyes of the browser