Business Card Design Using CSS

I faced an interesting dilemma this morning. I had to design a business card for Elovalo. As of late I've grown really fond of JS Bin so I thought why not to give it a go using a bit of good ol' CSS. Apparently this isn't that bad a way to design. Sure CSS has its limitations but it isn't as bad a choice as you might think.

You can find a demo of possible results below. Note that the card is two-sided. The other side can be seen on hover. I know this doesn't work on iPad and such but I'm fine with that limitation. If someone's really interested, I suppose it's possible to hack up something that works using a bit of JavaScript.

Actual cards can be extracted for printing by first defining a print CSS (missing at the moment) and then exporting the result via web browser (print -> as pdf).

EDIT

It appears it isn't entirely trivial to set up print CSS. Particularly background images are troublesome. I did find out two handy properties: -webkit-print-color-adjust: exact; and content: url(...).

Instead of doing it this way it's probably preferably just to take a screen grab. Since we're using relative measures, we won't have any trouble scaling. Only the images may suffer a bit depending on their original quality.

Elovalo Business Card