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

I’m not a ‘Twitter person’ … I’m more of a ‘Shh person’. I subscribed to this ‘Shh network’, where you write something down, but don’t send it anywhere.

I thought someone might have picked this idea up or had the same idea before, but my short search for such an (obviously hoax) service was unsuccessful. So, I created one myself:

Shh…

Apart from the fun of “cloning” Twitter, writing a better front-end code and having the satisfying feeling of implementing a small project all in one day, I also had the idea of twittering silence on twitter itself. You can follow my as interesting as everybody else’s tweets on:

@_shh

By the way, I needed the underscore because a twitter user called ‘shh’ already existed … as did ‘shhh’ … and ‘shhhh’ … and ‘shhhhh’ … I could have taken ‘shhhhhhhhhhhhhhh’, but maybe that wouldn’t have been such a good idea. Seems a bit desperate, doesn’t it?

These two projects are really a bit unrelated. They serve the purpose of linking to each other. (Yeah, my middle name is “PR”. Or was it “SEO”? Where is your birth certificate when you need it?)
And, of course, they share the same philosophy: “Silent twittering” for fun and more privacy awareness.

What I was looking for:

• usable in a production environment: should work in all major browsers
• should satisfy designers: should make it possible to have fancy borders, gradient backgrounds, drop shadows, etc
• should satisfy coders: usable, accessible, semantic (to a certain extent), no JavaScript, not too many unnecessary extra elements or hacks
• flexible: resizable, shrink-wrappable, same code for big boxes or small link buttons, easy to maintain, easy to adjust
• optional: creating them should not involve too much work

Nearly every technique I used before needed a fixed width or had only two rounded corners or had other drawbacks. I had only found one single technique that fulfilled all my basic needs, but was not very handy to use and had other limitations (such as no way to do a decent hover effect, difficult to maintain and one annoying bug in IE 6).

While I was searching for a new technique I came across one which already came quite close: Creating bulletproof graphic link buttons with CSS

But this technique has a few drawbacks:

• Additional to one big background image with all of the necessary elements in it, it also uses a second one just for the corners.
• It cannot handle fancy backgrounds.
• It doesn’t allow nesting of elements with rounded corners.
• Using the same technique for other elements needs adjusting.
• No fancy hover effects are possible.

So, I fiddled around with it and improved and enhanced it. Here is how:

The original solution

0. The Original

I won’t repeat what Roger Johansson wrote in his original article. I recommend reading it first to understand what I’m talking about.

Step 0: The Original (Demo)

1. One Background Image

The first thing I wanted to get rid of is this strange second background image. Although the corner.gif image contains all of the four corners with a lot of transparent space in between them, the original technique uses it only for the top right and bottom right corner. So, at least 90% of that image is not really needed.

I soon noticed that the bottom right corner does not need to use corner.gif, but can use the normal button.gif just like the rest. So, the only thing to fix was the top right corner.

Every other corner is easy to position because each previous element has a padding exactly where the following element cannot overlap the previous corner. The only tricky bit is the first corner that isn’t “protected” by a previous padding: the top left one. To “protect” the top left corner nonetheless, I just gave the first span a left margin, which I removed again from the second span with a negative margin of the same value. Et voilà, no second image needed.

Step 1: One Background Image (Demo)

2. One Span Less

Then I wondered: Why are there five background image placements and not four? The last innermost span has the background strangely attached to “right center”. And sure enough, I could safely delete the last span and thus could get rid of one unneeded span (13 characters per rounded element after all).
The padding from that deleted span is plainly added to the preceding span.

Step 2: One Span Less (Demo)

3. Fancier Background

Why should it be “tricky to give the button a non-flat background colour”? Mainly because the last, innermost span defines what the major part of the button looks like. Only because the original version chose that to be from the bottom right (and therefore without the 6px on the top and on the left) it is difficult to use an image with a gradient higher than 6px. It could use a much bigger gradient on the bottom without any problems, though.

But as gradients are mostly found at the top, I  simply turned the order around from “top left > top right > bottom left > bottom right” to “bottom left > bottom right > top left > top right”. And now you can have much higher gradients (as high as the container could get minus the 6px at the bottom).

Step 3: Fancier Background (Demo)

4. Rearrangement

Then I rearranged the code a bit, basically to removed things unrelated to the link nature from .button:link, etc and to move every occurrence of the background image to one single line, so that it’s easier to exchange.

I also fixed a bug in IE 6 introduced with the fancier background changes: IE 6 doesn’t like a bottom padding on the now innermost span.

Step 4: Rearrangement (Demo)

5. Hover

With those changes it is much easier to exchange the background image on hover with just a few more lines of code.

Step 5: Hover (Demo)

6. Hoverissimo

Some time ago my boss wished a link button that exchanges the gradient on hover from top to bottom. With this technique the only problem was the aforementioned problem that you can either have a link button with its main background at the top or at the bottom. To be able to exchange these background gradient positions, I had to turn the order of the background position around again (as in Step 3) as they were before, but this time only for the hover state.

Step 6: Hoverissimo (Demo)

7. Other Button Types

Now adding other different button types is a piece of cake: Simply add another class for each new type and give it a different background image (and change the background and font colour accordingly, if necessary).

Step 7: Other Button Types (Demo)

8.More Universal

Now there are only two problems left: If you plan to use this code not only for link buttons, but also for bigger boxes with block elements, you cannot use the code as it is now. You could just exchange the spans with divs and duplicate each line in the CSS code to accommodate that. But what if you have to use another div in there?

Although I’ve normally long outgrown the ‘classitis’ phase, in this case I think, using classes makes the code much more flexible to use. It reduces the CSS code, but increases the HTML again (by 42 characters per rounded element).
And I normally like to give semantic class names, but here rounded corners itself have no semantic meaning, so I contended myself with giving the classes names that are short and have a functional meaning instead. I also renamed “button” to “rounded”, because as soon as this technique isn’t used on a link button, its name would be erroneous.

Step 8: More Universal (Demo)

The new solution

9. Any Container

Finally, with these former changes it is now possible to use this technique on any container, not only on links or inline elements, but on bigger boxes, too. And these rounded containers can even contain other rounded containers.

Step 9: Any Container (Demo)

Final Code

My final basic code (without the “hoverissimo” code for the sake of brevity):

<a class="rounded <type>" href="#">
  <span class="i1 bg"><span class="i2 bg"><span class="i3 bg">
    Link
  </span></span></span>
</a>

<div class="rounded <type>">
  <div class="i1 bg"><div class="i2 bg"><div class="i3 bg">
    <p>Block level content</p>
  </div></div></div>
</div>

.rounded,
.rounded .bg {
  background-repeat: no-repeat;
  display: block;
}
.rounded {
  float:left;
  background-position:left bottom;
}
.rounded .i1 {
  padding:0 0 9px;
  background-position:right bottom;
  margin-left: 6px;
}
.rounded .i2 {
  padding:0 0 0 6px;
  background-position:left top;
  margin-left: -6px;
}
.rounded .i3 {
  padding:9px 12px 0 6px /* no bottom padding because of IE6 */;
  background-position:right top;
}

/* for each type */
.<type>,
.<type> .bg {
  background-image: url(<type_image>.gif);
  background-color: <type_background_colour>;
  color: <type_font_colour>;
}
/* for hover effect on links */
a.<type>:hover,
a.<type>:hover .bg {
  background-image: url(<type_hover_image>.gif);
}
/* left out :link, :visited, :active and :focus state
   for documenting purposes and readability */

The final result: The same technique for the box and the link button within

I called this technique “Sliding Doors Squared”, because it is basically an enhanced version of the Sliding Doors technique. Although this technique is great and recommended for two rounded corners with a flexible width or four rounded corners with a fixed width, it cannot be used for completely flexible rounded corners. The “Sliding Doors Squared” technique uses the Sliding Doors technique not only horizontally, but also vertically and therefore fills this gap.

Despite all its advantages, there are some disadvantages:

• the background image has to be rather large (the maximum width and height of the container are defined by the width and height of the background image)
• CSS sprites cannot be used for hover effects (at least not before CSS3), so there will be two requests and a flicker at first
• the corners must not be transparent

As yet I have tested this technique in IE 6, IE 7, Firefox 3, Opera 9 and Chrome and it behaves very well so far without any differences or even hacks (no, not even for IE 6!).

For just two rounded corners or simple four rounded corners with a fixed width this might be overkill. But as soon as you need more flexibility or need an easy way to use drop shadows, fancy borders, gradients or link states, this is the ultimate technique to use.

PS: After I finished the code I took a look at the comments for the original article and realised that the first two steps were already solved in there. That could have saved me about 30 minutes, but at least playing with the code got me going further.