cardsuit.css is a stylesheet with an inline image sprite to show all possible cards in a deck.
Simply include the following <link>
tag in your HTML file
(or download the CSS file here and use that one instead):
<link rel="stylesheet" src="http://kevinvanderburg.nl/cardsuit/cardsuit.min.css">
To initialize cardsuit.css, add the class cardsuit
to one of the content containers.
This can be the <body>
tag if you'd like.
You can now add an empty <span>
in your content, give it a class of the card you'd like to show,
and the corresponding card will be shown in the code.
<span class="ace of hearts"></span>
<span class="ten of clubs"></span>
<span class="any king"></span>
<span class="any diamond"></span>
<span class="any card"></span>
I'm working on a font-based version 2.0 to support multiple (retina) resolutions and enhance readability altogether.
A font-based version 2.0 β is available here. A jQuery plugin to auto-convert text to cardsuit.css compatible <span>
s is expected soon.