After looking at the Scripty 2 demo, I wondered how hard it would be to generate CSS to draw playing cards, instead of relying on images.
The fruits of my experiment are now up, so you can see my Deck of CSS Cards. The cards are all just empty <div><span></span></div> tags with the appropriate classes on the div; CSS does the rest.
Note also that there are no images here, only Unicode, and you need only adjust the font size of the “card” class to scale up the card evenly.
Of course, it only works if you have proper CSS support for :before, :after and content, so IE7 and below get nada, but that’s the price of progress.
And then, because why not, I took it one step further and made a CSS/Unicode Tarot deck. I had to, um, take some liberties with a few of the glyphs, since Unicode has its limits, but it’ll do. I think perhaps next I’ll combine this with some JavaScript and make a DHTML fortune teller.
Posted in Misc |
Follow responses via RSS 2.0 feed
You can leave a response, or trackback from your own site.
Doesn’t look quite right on Safari.latest on Mac OS X
Hmm, I checked it out on the Windows version of same, and it looked fine there. Email me a screenshot?