Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

initial commit

  • Loading branch information...
commit f74d8e069d154f5511c60d0d7579f70166a9e8b6 0 parents
@selfthinker authored
83 README
@@ -0,0 +1,83 @@
+CSS Playing Cards
+=================
+
+CSS Playing Cards help you to create simple and semantic playing cards in (X)HTML.
+
+* @author Anika Henke <anika@selfthinker.org>
+* @license CC BY-SA [http://creativecommons.org/licenses/by-sa/3.0]
+* @version 2010-08-22
+* @link http://github.com/selfthinker/css-playing-cards
+
+Contents
+--------
+
+* **cards.css** is the main part and provides the styles for the cards
+* **cards-ie.css** is a tiny fix for IE to make a simple version work
+* **examples.html** provides some example HTML
+* **README** is this file
+* **faces/* contains images for the faces
+
+How to use it
+-------------
+
+### Surrounding container
+
+ <div class="playingCards [fourColours|faceImages|simpleCards|playfulSuits|rotateHand]">
+ ...
+ </div>
+
+There needs to be a surrounding container with the class "playingCards" around all the cards. That container can also have other classes which serve as **configuration options**:
+
+* **fourColours**: Switches the default two colour deck with a four colour deck. (The colours of the German four colour deck will be different.)
+* **faceImages**: Switches the default simple big letters for faces with images. (The default letters are dependent on the language.) *Note: Depending on the size of the card, you might need to adjust the image positioning of the faces in cards.css (search for "@change").*
+* **simpleCards**: Switches the default multiple suits to one simple single big suit in the middle. *Note: This option does not work with "faceImages" and "playfulSuits"*.
+* playfulSuits: Switches the default normal suits to more fancy ones.
+* rotateHand: Switches the hand to rotate and fan in a semi circle.
+
+### The back of a card
+
+ <[element] class="card back">*</[element]>
+
+To make the cards smaller or bigger, just change the font-size in the main "card" class in cards.css (search for "@change").
+
+### The front of a card
+
+ <[element] class="card rank-[2|3|4|5|6|7|8|9|10|j|q|k|a] [diams|hearts|spades|clubs]">
+ <[element] class="rank">[2|3|4|5|6|7|8|9|10|J|Q|K|A]</[element]>
+ <[element] class="suit">&[diams|hearts|spades|clubs];</[element]>
+ </[element]>
+
+Depending on the context, the main card element should either be an **a** (for selecting single cards), a **label** (for selecting multiple cards) or a **span** (for pure representation or played cards), e.g.
+
+ <[a|label|span] class="card rank-a clubs" [href=""]>
+ <span class="rank">A</span>
+ <span class="suit">&clubs;</span>
+ [<input type="checkbox" [...] />] <!-- if in label -->
+ </[a|label|span]>
+
+### Different hands
+
+ <ul class="[table|hand|deck]">
+ <li>
+ [<strong>] <!-- if selected -->
+ ... card ...
+ [</strong>]
+ </li>
+ ...
+ </ul>
+
+* **table** places the whole cards side by side.
+* **hand** places them side by side, but lets them overlap, so you will only see a part of each card. If the "rotateHand" option is enabled, you'll see the cards rotated in a semi circle.
+* **deck** places the cards on top of each other, so that you cannot see single cards but a pack.
+
+Requirements
+------------
+
+The CSS is only intended to work in **modern browsers** (Firefox 3.6+, Opera 10+, Chrome, Safari).
+To make a basic version work in IE8, you need the provided **cards-ie.css**.
+
+Credits
+-------
+
+* The faces' images are taken from http://svg-cards.sourceforge.net/
+* One of the cards back images was taken from http://www.squidfingers.com/patterns/
14 cards-ie.css
@@ -0,0 +1,14 @@
+/**
+ * IE Styles for CSS Playing Cards
+ *
+ * @author Anika Henke <anika@selfthinker.org>
+ * @license CC BY-SA [http://creativecommons.org/licenses/by-sa/3.0]
+ * @version 2010-08-22
+ * @link http://github.com/selfthinker/css-playing-cards
+ */
+
+/* sadly, IE8 cannot cope with the :nth-child(n) selector */
+.cssCards ul.hand li,
+.cssCards ul.deck li {
+ position: static;
+}
696 cards.css
@@ -0,0 +1,696 @@
+/**
+ * Styles for CSS Playing Cards
+ *
+ * @author Anika Henke <anika@selfthinker.org>
+ * @license CC BY-SA [http://creativecommons.org/licenses/by-sa/3.0]
+ * @version 2010-08-22
+ * @link http://github.com/selfthinker/css-playing-cards
+ */
+
+/* card itself
+********************************************************************/
+
+.playingCards .card {
+ display: block;
+ width: 3.3em;
+ height: 4.6em;
+ border: 1px solid #666;
+ border-radius: .3em;
+ -moz-border-radius: .3em;
+ -webkit-border-radius: .3em;
+ -khtml-border-radius: .3em;
+ padding: .25em;
+ margin: 0 .5em .5em 0;
+ text-align: center;
+ float: left;
+ font-size: 1.2em; /* @change: adjust this value to make bigger or smaller cards */
+ font-weight: normal;
+ font-family: Arial, sans-serif;
+ position: relative;
+ background-color: #fff;
+ -moz-box-shadow: .2em .2em .5em #333;
+ -webkit-box-shadow: .2em .2em .5em #333;
+ box-shadow: .2em .2em .5em #333;
+}
+
+.playingCards .cardx {
+ -moz-box-shadow: 3px 3px 10px #333;
+}
+
+.playingCards a.card {
+ text-decoration: none;
+}
+/* selected and hover state */
+.playingCards a.card:hover, .playingCards a.card:active, .playingCards a.card:focus,
+.playingCards label.card:hover,
+.playingCards strong .card {
+ bottom: 1em;
+}
+.playingCards label.card {
+ cursor: pointer;
+}
+
+.playingCards .card.back {
+ text-indent: -4000px;
+ background-color: #ccc;
+ background-repeat: repeat;
+ background-image: url(data:image/gif;base64,R0lGODlhJAAkAJEAAOjFsezdztOKbL5QKCH5BAAAAAAALAAAAAAkACQAAAL/HC4RAqm/mmLHyHmAbczB11Ea8ombJKSgKo6Z17pXFznmS1JptiX0z3vVhpEKDoUIkoa0olGIUeZUk1RI6Yn2mh/FDAt6frOrRRTqXPpsVLYugzxaVy+YcBdnoWPZOT0E4eckQtZFZBjWoHixQFWl6Nhol6R2p1Okt5TGaEWZA6fjiMdhZgPHeWrTWGVq+jTZg1HYyAEWKLYzmyiGKoUimilz+YYryyTlg5RcDJSAbNx0Q7lMcbIGEyzTK8zVdfVaImzs/QV+prYqWWW2ObkoOApM/Em/rUlIm7fijs8a2EEKEaZ3AsMUgneEU6RcpJbZ27aGHkAO2Ors8xQH1IR0Bn5YnOtVAAA7); /* image is "Pattern 069" from http://www.squidfingers.com/patterns/ */
+ background-image: -moz-repeating-linear-gradient(34% 6% 135deg,#0F1E59, #75A1BF, #3E3E63 50%);
+ background-image: -webkit-gradient(radial, center center, 20, center center, 80, from(#3c3), color-stop(0.4, #363), to(#030));
+ /* yes, it's intentional that Mozilla, Webkit, Opera and IE all will get different backgrounds ... why not? :) */
+}
+
+/* suit colours
+********************************************************************/
+
+.playingCards .card.diams {
+ color: #f00 !important;
+}
+.playingCards.fourColours .card.diams {
+ color: #00f !important;
+}
+[lang=de] .playingCards.fourColours .card.diams {
+ color: #f60 !important;
+}
+.playingCards .card.hearts {
+ color: #f00 !important;
+}
+.playingCards .card.spades {
+ color: #000 !important;
+}
+[lang=de] .playingCards.fourColours .card.spades {
+ color: #090 !important;
+}
+.playingCards .card.clubs {
+ color: #000 !important;
+}
+.playingCards.fourColours .card.clubs {
+ color: #090 !important;
+}
+[lang=de] .playingCards.fourColours .card.clubs {
+ color: #000 !important;
+}
+
+/* inner bits
+********************************************************************/
+
+/* top left main info (rank and suit) */
+
+.playingCards .card .rank,
+.playingCards .card .suit {
+ display: block;
+ line-height: 1;
+ text-align: left;
+}
+.playingCards .card .rank {
+}
+.playingCards .card .suit {
+ line-height: .7;
+}
+
+/* checkbox */
+.playingCards .card input {
+ margin-top: .05em;
+ font: inherit;
+}
+.playingCards.simpleCards .card input,
+.playingCards .card.rank-j input,
+.playingCards .card.rank-q input,
+.playingCards .card.rank-k input,
+.playingCards .card.rank-a input {
+ margin-top: 2.35em;
+}
+
+/* inner multiple suits */
+.playingCards .card .suit:after {
+ display: block;
+ margin-top: -.9em;
+ text-align: center;
+ white-space: pre;
+ line-height: .9;
+ font-size: 1.3em;
+ word-spacing: -.05em;
+}
+
+/* make the hearts and clubs symbols fit, because they are a bit bigger than the others */
+.playingCards .card.hearts .suit:after {
+ word-spacing: -.15em;
+}
+.playingCards .card.hearts.rank-10 .suit:after {
+ word-spacing: -.05em;
+ letter-spacing: -.1em;
+}
+.playingCards .card.clubs .suit:after {
+ letter-spacing: -.1em;
+}
+.playingCards .card.clubs.rank-10 .suit:after {
+ word-spacing: -.15em;
+}
+
+/* the 10 is the most crowded */
+.playingCards .card.rank-10 .suit:after {
+ letter-spacing: -.1em;
+}
+
+/* reset for the playful suits, as they are bigger than the normal suits */
+.playingCards.playfulSuits .suit:after {
+ font-size: 1em;
+ word-spacing: normal;
+ letter-spacing: normal;
+ line-height: 1;
+}
+
+/*____________ symbols in the middle (suits, full) ____________*/
+
+
+/* diamonds */
+.playingCards .card.rank-2.diams .suit:after {
+ content: "\2666 \A\A\2666";
+}
+.playingCards .card.rank-3.diams .suit:after {
+ content: "\2666 \A\2666 \A\2666";
+}
+.playingCards .card.rank-4.diams .suit:after {
+ content: "\2666\00A0\00A0\00A0\2666 \A\A\2666\00A0\00A0\00A0\2666";
+}
+.playingCards .card.rank-5.diams .suit:after {
+ content: "\2666\00A0\00A0\00A0\2666 \A\2666 \A\2666\00A0\00A0\00A0\2666";
+}
+.playingCards .card.rank-6.diams .suit:after {
+ content: "\2666\00A0\00A0\00A0\2666 \A\2666\00A0\00A0\00A0\2666 \A\2666\00A0\00A0\00A0\2666";
+}
+.playingCards .card.rank-7.diams .suit:after {
+ content: "\2666\00A0\00A0\2666 \A\2666\00A0\2666\00A0\2666 \A\2666\00A0\00A0\2666";
+}
+.playingCards .card.rank-8.diams .suit:after {
+ content: "\2666\00A0\2666\00A0\2666 \A\2666\00A0\00A0\2666 \A\2666\00A0\2666\00A0\2666";
+}
+.playingCards .card.rank-9.diams .suit:after {
+ content: "\2666\00A0\2666\00A0\2666 \A\2666\00A0\2666\00A0\2666 \A\2666\00A0\2666\00A0\2666";
+}
+.playingCards .card.rank-10.diams .suit:after {
+ content: "\2666\00A0\2666\00A0\2666 \A\2666\00A0\2666\00A0\2666\00A0\2666 \A\2666\00A0\2666\00A0\2666";
+}
+
+/* hearts */
+.playingCards .card.rank-2.hearts .suit:after {
+ content: "\2665 \A\A\2665";
+}
+.playingCards .card.rank-3.hearts .suit:after {
+ content: "\2665 \A\2665 \A\2665";
+}
+.playingCards .card.rank-4.hearts .suit:after {
+ content: "\2665\00A0\00A0\00A0\2665 \A\A\2665\00A0\00A0\00A0\2665";
+}
+.playingCards .card.rank-5.hearts .suit:after {
+ content: "\2665\00A0\00A0\00A0\2665 \A\2665 \A\2665\00A0\00A0\00A0\2665";
+}
+.playingCards .card.rank-6.hearts .suit:after {
+ content: "\2665\00A0\00A0\00A0\2665 \A\2665\00A0\00A0\00A0\2665 \A\2665\00A0\00A0\00A0\2665";
+}
+.playingCards .card.rank-7.hearts .suit:after {
+ content: "\2665\00A0\00A0\2665 \A\2665\00A0\2665\00A0\2665 \A\2665\00A0\00A0\2665";
+}
+.playingCards .card.rank-8.hearts .suit:after {
+ content: "\2665\00A0\2665\00A0\2665 \A\2665\00A0\00A0\2665 \A\2665\00A0\2665\00A0\2665";
+}
+.playingCards .card.rank-9.hearts .suit:after {
+ content: "\2665\00A0\2665\00A0\2665 \A\2665\00A0\2665\00A0\2665 \A\2665\00A0\2665\00A0\2665";
+}
+.playingCards .card.rank-10.hearts .suit:after {
+ content: "\2665\00A0\2665\00A0\2665 \A\2665\00A0\2665\00A0\2665\00A0\2665 \A\2665\00A0\2665\00A0\2665";
+}
+
+/* spades */
+.playingCards .card.rank-2.spades .suit:after {
+ content: "\2660 \A\A\2660";
+}
+.playingCards .card.rank-3.spades .suit:after {
+ content: "\2660 \A\2660 \A\2660";
+}
+.playingCards .card.rank-4.spades .suit:after {
+ content: "\2660\00A0\00A0\00A0\2660 \A\A\2660\00A0\00A0\00A0\2660";
+}
+.playingCards .card.rank-5.spades .suit:after {
+ content: "\2660\00A0\00A0\00A0\2660 \A\2660 \A\2660\00A0\00A0\00A0\2660";
+}
+.playingCards .card.rank-6.spades .suit:after {
+ content: "\2660\00A0\00A0\00A0\2660 \A\2660\00A0\00A0\00A0\2660 \A\2660\00A0\00A0\00A0\2660";
+}
+.playingCards .card.rank-7.spades .suit:after {
+ content: "\2660\00A0\00A0\2660 \A\2660\00A0\2660\00A0\2660 \A\2660\00A0\00A0\2660";
+}
+.playingCards .card.rank-8.spades .suit:after {
+ content: "\2660\00A0\2660\00A0\2660 \A\2660\00A0\00A0\2660 \A\2660\00A0\2660\00A0\2660";
+}
+.playingCards .card.rank-9.spades .suit:after {
+ content: "\2660\00A0\2660\00A0\2660 \A\2660\00A0\2660\00A0\2660 \A\2660\00A0\2660\00A0\2660";
+}
+.playingCards .card.rank-10.spades .suit:after {
+ content: "\2660\00A0\2660\00A0\2660 \A\2660\00A0\2660\00A0\2660\00A0\2660 \A\2660\00A0\2660\00A0\2660";
+}
+
+/* clubs */
+.playingCards .card.rank-2.clubs .suit:after {
+ content: "\2663 \A\A\2663";
+}
+.playingCards .card.rank-3.clubs .suit:after {
+ content: "\2663 \A\2663 \A\2663";
+}
+.playingCards .card.rank-4.clubs .suit:after {
+ content: "\2663\00A0\00A0\00A0\2663 \A\A\2663\00A0\00A0\00A0\2663";
+}
+.playingCards .card.rank-5.clubs .suit:after {
+ content: "\2663\00A0\00A0\00A0\2663 \A\2663 \A\2663\00A0\00A0\00A0\2663";
+}
+.playingCards .card.rank-6.clubs .suit:after {
+ content: "\2663\00A0\00A0\00A0\2663 \A\2663\00A0\00A0\00A0\2663 \A\2663\00A0\00A0\00A0\2663";
+}
+.playingCards .card.rank-7.clubs .suit:after {
+ content: "\2663\00A0\00A0\2663 \A\2663\00A0\2663\00A0\2663 \A\2663\00A0\00A0\2663";
+}
+.playingCards .card.rank-8.clubs .suit:after {
+ content: "\2663\00A0\2663\00A0\2663 \A\2663\00A0\00A0\2663 \A\2663\00A0\2663\00A0\2663";
+}
+.playingCards .card.rank-9.clubs .suit:after {
+ content: "\2663\00A0\2663\00A0\2663 \A\2663\00A0\2663\00A0\2663 \A\2663\00A0\2663\00A0\2663";
+}
+.playingCards .card.rank-10.clubs .suit:after {
+ content: "\2663\00A0\2663\00A0\2663 \A\2663\00A0\2663\00A0\2663\00A0\2663 \A\2663\00A0\2663\00A0\2663";
+}
+
+/*____________ symbols in the middle (suits, hollow) ____________*/
+
+/* diamonds */
+.playingCards.playfulSuits .card.rank-2.diams .suit:after {
+ content: "\2662 \A\A\2662";
+}
+.playingCards.playfulSuits .card.rank-3.diams .suit:after {
+ content: "\2662 \A\2662 \A\2662";
+}
+.playingCards.playfulSuits .card.rank-4.diams .suit:after {
+ content: "\2662\00A0\00A0\00A0\2662 \A\A\2662\00A0\00A0\00A0\2662";
+}
+.playingCards.playfulSuits .card.rank-5.diams .suit:after {
+ content: "\2662\00A0\00A0\00A0\2662 \A\2662 \A\2662\00A0\00A0\00A0\2662";
+}
+.playingCards.playfulSuits .card.rank-6.diams .suit:after {
+ content: "\2662\00A0\00A0\00A0\2662 \A\2662\00A0\00A0\00A0\2662 \A\2662\00A0\00A0\00A0\2662";
+}
+.playingCards.playfulSuits .card.rank-7.diams .suit:after {
+ content: "\2662\00A0\00A0\2662 \A\2662\00A0\2662\00A0\2662 \A\2662\00A0\00A0\2662";
+}
+.playingCards.playfulSuits .card.rank-8.diams .suit:after {
+ content: "\2662\00A0\2662\00A0\2662 \A\2662\00A0\00A0\2662 \A\2662\00A0\2662\00A0\2662";
+}
+.playingCards.playfulSuits .card.rank-9.diams .suit:after {
+ content: "\2662\00A0\2662\00A0\2662 \A\2662\00A0\2662\00A0\2662 \A\2662\00A0\2662\00A0\2662";
+}
+.playingCards.playfulSuits .card.rank-10.diams .suit:after {
+ content: "\2662\00A0\2662\00A0\2662 \A\2662\00A0\2662\00A0\2662\00A0\2662 \A\2662\00A0\2662\00A0\2662";
+}
+
+/* hearts */
+.playingCards.playfulSuits .card.rank-2.hearts .suit:after {
+ content: "\2661 \A\A\2661";
+}
+.playingCards.playfulSuits .card.rank-3.hearts .suit:after {
+ content: "\2661 \A\2661 \A\2661";
+}
+.playingCards.playfulSuits .card.rank-4.hearts .suit:after {
+ content: "\2661\00A0\00A0\00A0\2661 \A\A\2661\00A0\00A0\00A0\2661";
+}
+.playingCards.playfulSuits .card.rank-5.hearts .suit:after {
+ content: "\2661\00A0\00A0\00A0\2661 \A\2661 \A\2661\00A0\00A0\00A0\2661";
+}
+.playingCards.playfulSuits .card.rank-6.hearts .suit:after {
+ content: "\2661\00A0\00A0\00A0\2661 \A\2661\00A0\00A0\00A0\2661 \A\2661\00A0\00A0\00A0\2661";
+}
+.playingCards.playfulSuits .card.rank-7.hearts .suit:after {
+ content: "\2661\00A0\00A0\2661 \A\2661\00A0\2661\00A0\2661 \A\2661\00A0\00A0\2661";
+}
+.playingCards.playfulSuits .card.rank-8.hearts .suit:after {
+ content: "\2661\00A0\2661\00A0\2661 \A\2661\00A0\00A0\2661 \A\2661\00A0\2661\00A0\2661";
+}
+.playingCards.playfulSuits .card.rank-9.hearts .suit:after {
+ content: "\2661\00A0\2661\00A0\2661 \A\2661\00A0\2661\00A0\2661 \A\2661\00A0\2661\00A0\2661";
+}
+.playingCards.playfulSuits .card.rank-10.hearts .suit:after {
+ content: "\2661\00A0\2661\00A0\2661 \A\2661\00A0\2661\00A0\2661\00A0\2661 \A\2661\00A0\2661\00A0\2661";
+}
+
+/* spades */
+.playingCards.playfulSuits .card.rank-2.spades .suit:after {
+ content: "\2664 \A\A\2664";
+}
+.playingCards.playfulSuits .card.rank-3.spades .suit:after {
+ content: "\2664 \A\2664 \A\2664";
+}
+.playingCards.playfulSuits .card.rank-4.spades .suit:after {
+ content: "\2664\00A0\00A0\00A0\2664 \A\A\2664\00A0\00A0\00A0\2664";
+}
+.playingCards.playfulSuits .card.rank-5.spades .suit:after {
+ content: "\2664\00A0\00A0\00A0\2664 \A\2664 \A\2664\00A0\00A0\00A0\2664";
+}
+.playingCards.playfulSuits .card.rank-6.spades .suit:after {
+ content: "\2664\00A0\00A0\00A0\2664 \A\2664\00A0\00A0\00A0\2664 \A\2664\00A0\00A0\00A0\2664";
+}
+.playingCards.playfulSuits .card.rank-7.spades .suit:after {
+ content: "\2664\00A0\00A0\2664 \A\2664\00A0\2664\00A0\2664 \A\2664\00A0\00A0\2664";
+}
+.playingCards.playfulSuits .card.rank-8.spades .suit:after {
+ content: "\2664\00A0\2664\00A0\2664 \A\2664\00A0\00A0\2664 \A\2664\00A0\2664\00A0\2664";
+}
+.playingCards.playfulSuits .card.rank-9.spades .suit:after {
+ content: "\2664\00A0\2664\00A0\2664 \A\2664\00A0\2664\00A0\2664 \A\2664\00A0\2664\00A0\2664";
+}
+.playingCards.playfulSuits .card.rank-10.spades .suit:after {
+ content: "\2664\00A0\2664\00A0\2664 \A\2664\00A0\2664\00A0\2664\00A0\2664 \A\2664\00A0\2664\00A0\2664";
+}
+
+/* clubs */
+.playingCards.playfulSuits .card.rank-2.clubs .suit:after {
+ content: "\2667 \A\A\2667";
+}
+.playingCards.playfulSuits .card.rank-3.clubs .suit:after {
+ content: "\2667 \A\2667 \A\2667";
+}
+.playingCards.playfulSuits .card.rank-4.clubs .suit:after {
+ content: "\2667\00A0\00A0\00A0\2667 \A\A\2667\00A0\00A0\00A0\2667";
+}
+.playingCards.playfulSuits .card.rank-5.clubs .suit:after {
+ content: "\2667\00A0\00A0\00A0\2667 \A\2667 \A\2667\00A0\00A0\00A0\2667";
+}
+.playingCards.playfulSuits .card.rank-6.clubs .suit:after {
+ content: "\2667\00A0\00A0\00A0\2667 \A\2667\00A0\00A0\00A0\2667 \A\2667\00A0\00A0\00A0\2667";
+}
+.playingCards.playfulSuits .card.rank-7.clubs .suit:after {
+ content: "\2667\00A0\00A0\2667 \A\2667\00A0\2667\00A0\2667 \A\2667\00A0\00A0\2667";
+}
+.playingCards.playfulSuits .card.rank-8.clubs .suit:after {
+ content: "\2667\00A0\2667\00A0\2667 \A\2667\00A0\00A0\2667 \A\2667\00A0\2667\00A0\2667";
+}
+.playingCards.playfulSuits .card.rank-9.clubs .suit:after {
+ content: "\2667\00A0\2667\00A0\2667 \A\2667\00A0\2667\00A0\2667 \A\2667\00A0\2667\00A0\2667";
+}
+.playingCards.playfulSuits .card.rank-10.clubs .suit:after {
+ content: "\2667\00A0\2667\00A0\2667 \A\2667\00A0\2667\00A0\2667\00A0\2667 \A\2667\00A0\2667\00A0\2667";
+}
+
+/*____________ symbols in the middle (faces as images) ____________*/
+
+.playingCards.faceImages .card.rank-j .suit:after,
+.playingCards.faceImages .card.rank-q .suit:after,
+.playingCards.faceImages .card.rank-k .suit:after {
+ content: '';
+}
+.playingCards.faceImages .card.rank-j,
+.playingCards.faceImages .card.rank-q,
+.playingCards.faceImages .card.rank-k {
+ background-repeat: no-repeat;
+ background-position: -1em 0;
+ /* @change: smaller cards: more negative distance from the left
+ bigger cards: 0 or more positive distance from the left */
+
+ /* for a centered full background image:
+ background-position: .35em 0;
+ -moz-background-size: contain;
+ -o-background-size: contain;
+ -webkit-background-size: contain;
+ -khtml-background-size: contain;
+ background-size: contain;
+ */
+}
+
+.playingCards.faceImages .card.rank-j.diams { background-image: url(faces/JD.gif); }
+.playingCards.faceImages .card.rank-j.hearts { background-image: url(faces/JH.gif); }
+.playingCards.faceImages .card.rank-j.spades { background-image: url(faces/JS.gif); }
+.playingCards.faceImages .card.rank-j.clubs { background-image: url(faces/JC.gif); }
+
+.playingCards.faceImages .card.rank-q.diams { background-image: url(faces/QD.gif); }
+.playingCards.faceImages .card.rank-q.hearts { background-image: url(faces/QH.gif); }
+.playingCards.faceImages .card.rank-q.spades { background-image: url(faces/QS.gif); }
+.playingCards.faceImages .card.rank-q.clubs { background-image: url(faces/QC.gif); }
+
+.playingCards.faceImages .card.rank-k.diams { background-image: url(faces/KD.gif); }
+.playingCards.faceImages .card.rank-k.hearts { background-image: url(faces/KH.gif); }
+.playingCards.faceImages .card.rank-k.spades { background-image: url(faces/KS.gif); }
+.playingCards.faceImages .card.rank-k.clubs { background-image: url(faces/KC.gif); }
+
+
+/*____________ symbols in the middle (faces as text) ____________*/
+
+.playingCards.simpleCards .card .suit:after,
+.playingCards .card.rank-j .suit:after,
+.playingCards .card.rank-q .suit:after,
+.playingCards .card.rank-k .suit:after,
+.playingCards .card.rank-a .suit:after {
+ font-family: Georgia, serif;
+ position: absolute;
+ font-size: 3em;
+ right: .3em;
+ bottom: .35em;
+ word-spacing: normal;
+ letter-spacing: normal;
+ line-height: 1;
+}
+.playingCards .card.rank-j .suit:after {
+ content: "J";
+ right: .35em;
+}
+.playingCards .card.rank-q .suit:after {
+ content: "Q";
+ right: .25em;
+}
+.playingCards .card.rank-k .suit:after {
+ content: "K";
+}
+.playingCards .card.rank-a .suit:after {
+ content: "A";
+}
+
+.playingCards .card .rank:after {
+ position: absolute;
+ top: .25em;
+ left: .25em;
+ background: #fff;
+}
+
+/* different face letters for different languages */
+[lang=de] .playingCards .card.rank-j span:after {
+ content: "B";
+}
+[lang=fr] .playingCards .card.rank-j span:after {
+ content: "V";
+}
+[lang=de] .playingCards .card.rank-q span:after,
+[lang=fr] .playingCards .card.rank-q span:after {
+ content: "D";
+}
+[lang=fr] .playingCards .card.rank-k span:after {
+ content: "R";
+}
+
+
+.playingCards.simpleCards .card .suit:after,
+.playingCards.faceImages .card.rank-a .suit:after {
+ font-family: Arial, sans-serif;
+ line-height: .9;
+}
+.playingCards.simpleCards .card.diams .suit:after,
+.playingCards.faceImages .card.rank-a.diams .suit:after {
+ content: "\2666";
+ right: .4em;
+}
+.playingCards.simpleCards .card.hearts .suit:after,
+.playingCards.faceImages .card.rank-a.hearts .suit:after {
+ content: "\2665";
+ right: .35em;
+}
+.playingCards.simpleCards .card.spades .suit:after,
+.playingCards.faceImages .card.rank-a.spades .suit:after {
+ content: "\2660";
+ right: .35em;
+}
+.playingCards.simpleCards .card.clubs .suit:after,
+.playingCards.faceImages .card.rank-a.clubs .suit:after {
+ content: "\2663";
+ right: .3em;
+}
+
+
+/* hand (in your hand or on table or as a deck)
+********************************************************************/
+
+.playingCards ul.table,
+.playingCards ul.hand,
+.playingCards ul.deck {
+ list-style-type: none;
+ padding: 0;
+ margin: 0 0 1.5em 0;
+ position: relative;
+ clear: both;
+}
+.playingCards ul.hand {
+ margin-bottom: 3.5em;
+}
+.playingCards ul.table li,
+.playingCards ul.hand li,
+.playingCards ul.deck li {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+}
+
+.playingCards ul.hand,
+.playingCards ul.deck {
+ height: 8em;
+}
+.playingCards ul.hand li,
+.playingCards ul.deck li {
+ position: absolute;
+}
+.playingCards ul.hand li {
+ bottom: 0;
+}
+.playingCards ul.hand li:nth-child(1) { left: 0; }
+.playingCards ul.hand li:nth-child(2) { left: 1.1em; }
+.playingCards ul.hand li:nth-child(3) { left: 2.2em; }
+.playingCards ul.hand li:nth-child(4) { left: 3.3em; }
+.playingCards ul.hand li:nth-child(5) { left: 4.4em; }
+.playingCards ul.hand li:nth-child(6) { left: 5.5em; }
+.playingCards ul.hand li:nth-child(7) { left: 6.6em; }
+.playingCards ul.hand li:nth-child(8) { left: 7.7em; }
+.playingCards ul.hand li:nth-child(9) { left: 8.8em; }
+.playingCards ul.hand li:nth-child(10) { left: 9.9em; }
+.playingCards ul.hand li:nth-child(11) { left: 11em; }
+.playingCards ul.hand li:nth-child(12) { left: 12.1em; }
+.playingCards ul.hand li:nth-child(13) { left: 13.2em; }
+
+.playingCards ul.hand li:nth-child(14) { left: 14.3em; }
+.playingCards ul.hand li:nth-child(15) { left: 15.4em; }
+.playingCards ul.hand li:nth-child(16) { left: 16.5em; }
+.playingCards ul.hand li:nth-child(17) { left: 17.6em; }
+.playingCards ul.hand li:nth-child(18) { left: 18.7em; }
+.playingCards ul.hand li:nth-child(19) { left: 19.8em; }
+.playingCards ul.hand li:nth-child(20) { left: 20.9em; }
+.playingCards ul.hand li:nth-child(21) { left: 22em; }
+.playingCards ul.hand li:nth-child(22) { left: 23.1em; }
+.playingCards ul.hand li:nth-child(23) { left: 24.2em; }
+.playingCards ul.hand li:nth-child(24) { left: 25.3em; }
+.playingCards ul.hand li:nth-child(25) { left: 26.4em; }
+.playingCards ul.hand li:nth-child(26) { left: 27.5em; }
+
+/* rotate cards if rotateHand option is on */
+.playingCards.rotateHand ul.hand li:nth-child(1) {
+ -moz-transform: translate(1.9em, .9em) rotate(-42deg);
+ -webkit-transform: translate(1.9em, .9em) rotate(-42deg);
+ -o-transform: translate(1.9em, .9em) rotate(-42deg);
+ transform: translate(1.9em, .9em) rotate(-42deg);
+}
+.playingCards.rotateHand ul.hand li:nth-child(2) {
+ -moz-transform: translate(1.5em, .5em) rotate(-33deg);
+ -webkit-transform: translate(1.5em, .5em) rotate(-33deg);
+ -o-transform: translate(1.5em, .5em) rotate(-33deg);
+ transform: translate(1.5em, .5em) rotate(-33deg);
+}
+.playingCards.rotateHand ul.hand li:nth-child(3) {
+ -moz-transform: translate(1.1em, .3em) rotate(-24deg);
+ -webkit-transform: translate(1.1em, .3em) rotate(-24deg);
+ -o-transform: translate(1.1em, .3em) rotate(-24deg);
+ transform: translate(1.1em, .3em) rotate(-24deg);
+}
+.playingCards.rotateHand ul.hand li:nth-child(4) {
+ -moz-transform: translate(.7em, .2em) rotate(-15deg);
+ -webkit-transform: translate(.7em, .2em) rotate(-15deg);
+ -o-transform: translate(.7em, .2em) rotate(-15deg);
+ transform: translate(.7em, .2em) rotate(-15deg);
+}
+.playingCards.rotateHand ul.hand li:nth-child(5) {
+ -moz-transform: translate(.3em, .1em) rotate(-6deg);
+ -webkit-transform: translate(.3em, .1em) rotate(-6deg);
+ -o-transform: translate(.3em, .1em) rotate(-6deg);
+ transform: translate(.3em, .1em) rotate(-6deg);
+}
+.playingCards.rotateHand ul.hand li:nth-child(6) {
+ -moz-transform: translate(-.1em, .1em) rotate(3deg);
+ -webkit-transform: translate(-.1em, .1em) rotate(3deg);
+ -o-transform: translate(-.1em, .1em) rotate(3deg);
+ transform: translate(-.1em, .1em) rotate(3deg);
+}
+.playingCards.rotateHand ul.hand li:nth-child(7) {
+ -moz-transform: translate(-.5em, .2em) rotate(12deg);
+ -webkit-transform: translate(-.5em, .2em) rotate(12deg);
+ -o-transform: translate(-.5em, .2em) rotate(12deg);
+ transform: translate(-.5em, .2em) rotate(12deg);
+}
+.playingCards.rotateHand ul.hand li:nth-child(8) {
+ -moz-transform: translate(-.9em, .3em) rotate(21deg);
+ -webkit-transform: translate(-.9em, .3em) rotate(21deg);
+ -o-transform: translate(-.9em, .3em) rotate(21deg);
+ transform: translate(-.9em, .3em) rotate(21deg);
+}
+.playingCards.rotateHand ul.hand li:nth-child(9) {
+ -moz-transform: translate(-1.3em, .6em) rotate(30deg);
+ -webkit-transform: translate(-1.3em, .6em) rotate(30deg);
+ -o-transform: translate(-1.3em, .6em) rotate(30deg);
+ transform: translate(-1.3em, .6em) rotate(30deg);
+}
+.playingCards.rotateHand ul.hand li:nth-child(10) {
+ -moz-transform: translate(-1.7em, 1em) rotate(39deg);
+ -webkit-transform: translate(-1.7em, 1em) rotate(39deg);
+ -o-transform: translate(-1.7em, 1em) rotate(39deg);
+ transform: translate(-1.7em, 1em) rotate(39deg);
+}
+.playingCards.rotateHand ul.hand li:nth-child(11) {
+ -moz-transform: translate(-2.2em, 1.5em) rotate(48deg);
+ -webkit-transform: translate(-2.2em, 1.5em) rotate(48deg);
+ -o-transform: translate(-2.2em, 1.5em) rotate(48deg);
+ transform: translate(-2.2em, 1.5em) rotate(48deg);
+}
+.playingCards.rotateHand ul.hand li:nth-child(12) {
+ -moz-transform: translate(-2.8em, 2.1em) rotate(57deg);
+ -webkit-transform: translate(-2.8em, 2.1em) rotate(57deg);
+ -o-transform: translate(-2.8em, 2.1em) rotate(57deg);
+ transform: translate(-2.8em, 2.1em) rotate(57deg);
+}
+.playingCards.rotateHand ul.hand li:nth-child(13) {
+ -moz-transform: translate(-3.5em, 2.8em) rotate(66deg);
+ -webkit-transform: translate(-3.5em, 2.8em) rotate(66deg);
+ -o-transform: translate(-3.5em, 2.8em) rotate(66deg);
+ transform: translate(-3.5em, 2.8em) rotate(66deg);
+}
+
+/* deck */
+.playingCards ul.deck li:nth-child(1) { left: 0; bottom: 0; }
+.playingCards ul.deck li:nth-child(2) { left: 2px; bottom: 1px; }
+.playingCards ul.deck li:nth-child(3) { left: 4px; bottom: 2px; }
+.playingCards ul.deck li:nth-child(4) { left: 6px; bottom: 3px; }
+.playingCards ul.deck li:nth-child(5) { left: 8px; bottom: 4px; }
+.playingCards ul.deck li:nth-child(6) { left: 10px; bottom: 5px; }
+.playingCards ul.deck li:nth-child(7) { left: 12px; bottom: 6px; }
+.playingCards ul.deck li:nth-child(8) { left: 14px; bottom: 7px; }
+.playingCards ul.deck li:nth-child(9) { left: 16px; bottom: 8px; }
+.playingCards ul.deck li:nth-child(10) { left: 18px; bottom: 9px; }
+.playingCards ul.deck li:nth-child(11) { left: 20px; bottom: 10px; }
+.playingCards ul.deck li:nth-child(12) { left: 22px; bottom: 11px; }
+.playingCards ul.deck li:nth-child(13) { left: 24px; bottom: 12px; }
+.playingCards ul.deck li:nth-child(14) { left: 26px; bottom: 13px; }
+.playingCards ul.deck li:nth-child(15) { left: 28px; bottom: 14px; }
+.playingCards ul.deck li:nth-child(16) { left: 30px; bottom: 15px; }
+.playingCards ul.deck li:nth-child(17) { left: 32px; bottom: 16px; }
+.playingCards ul.deck li:nth-child(18) { left: 34px; bottom: 17px; }
+.playingCards ul.deck li:nth-child(19) { left: 36px; bottom: 18px; }
+.playingCards ul.deck li:nth-child(20) { left: 38px; bottom: 19px; }
+.playingCards ul.deck li:nth-child(21) { left: 40px; bottom: 20px; }
+.playingCards ul.deck li:nth-child(22) { left: 42px; bottom: 21px; }
+.playingCards ul.deck li:nth-child(23) { left: 44px; bottom: 22px; }
+.playingCards ul.deck li:nth-child(24) { left: 46px; bottom: 23px; }
+.playingCards ul.deck li:nth-child(25) { left: 48px; bottom: 24px; }
+.playingCards ul.deck li:nth-child(26) { left: 50px; bottom: 25px; }
+.playingCards ul.deck li:nth-child(27) { left: 52px; bottom: 26px; }
+.playingCards ul.deck li:nth-child(28) { left: 54px; bottom: 27px; }
+.playingCards ul.deck li:nth-child(29) { left: 56px; bottom: 28px; }
+.playingCards ul.deck li:nth-child(30) { left: 58px; bottom: 29px; }
+.playingCards ul.deck li:nth-child(31) { left: 60px; bottom: 30px; }
+.playingCards ul.deck li:nth-child(32) { left: 62px; bottom: 31px; }
569 examples.html
@@ -0,0 +1,569 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!--
+ * Example HTML for CSS Playing Cards
+ *
+ * @author Anika Henke <anika@selfthinker.org>
+ * @license CC BY-SA [http://creativecommons.org/licenses/by-sa/3.0]
+ * @version 2010-08-22
+ * @link http://github.com/selfthinker/css-playing-cards
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>CSS Playing Cards</title>
+ <link rel="stylesheet" type="text/css" href="cards.css" media="screen" />
+ <!--[if IE]>
+ <link rel="stylesheet" type="text/css" href="cards-ie.css" media="screen" />
+ <![endif]-->
+ <!-- the following js and css is not part of the CSS cards, but only for this example page -->
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+ <script type="text/javascript"><!--
+ $(document).ready(function(){
+ $('.options').addClass('active');
+ $('.toggle li').click(function(){
+ $('.playingCards').toggleClass($(this).text());
+ });
+ $('.lang li').click(function(){
+ $('html').attr('lang', $(this).text());
+ $('html').attr('xml:lang', $(this).text());
+ });
+ });
+ //--></script>
+ <style type="text/css"><!--
+ body {
+ margin: 2em 20%;
+ }
+ .options.active {
+ position: fixed;
+ top: 1em;
+ right: 1em;
+ background: #ddd;
+ padding: .5em;
+ }
+ .options.active h3 {
+ font-size: 1.2em;
+ }
+ .options.active ul {
+ padding: 0;
+ }
+ .options.active li {
+ color: #00c;
+ text-decoration: underline;
+ margin-left: 1.5em;
+ cursor: pointer;
+ }
+ .options.active li:hover {
+ text-decoration: none;
+ }
+ div.clear {
+ clear: both;
+ height: 0;
+ line-height: 0;
+ font-size: 1px;
+ visibility: hidden;
+ }
+ --></style>
+</head>
+<body>
+
+<div class="playingCards fourColours faceImages rotateHand">
+
+ <h1>CSS Playing Cards</h1>
+
+ <p>Surrounding Container:</p>
+ <pre>
+&lt;div class="playingCards"&gt;...&lt;/div&gt;
+ </pre>
+
+ <p>With different options (default is the respective opposite):</p>
+ <pre>
+&lt;div class="playingCards fourColours faceImages rotateHand"&gt;...&lt;/div&gt;
+ </pre>
+
+ <div class="options">
+ <h3>Options:</h3>
+ <ul class="toggle">
+ <li title="toggles a four colour deck with a standard two colour deck">fourColours</li>
+ <li title="toggles images or simple letters for faces">faceImages</li>
+ <li title="toggles the complexity of what's shown inside a card">simpleCards</li>
+ <li title="toggles two different types of suits">playfulSuits</li>
+ <li title="toggles the rotation of cards in hand">rotateHand</li>
+ </ul>
+ <h3>Languages:</h3>
+ <ul class="lang">
+ <li>en</li>
+ <li>de</li>
+ <li>fr</li>
+ </ul>
+ </div>
+
+ <p><em>Note: &quot;.simpleCards&quot; doesn't work with &quot;.faceImages&quot; and &quot;.playfulSuits&quot;.</em></p>
+
+<!-- .card -->
+ <h2>Single Cards</h2>
+
+ <h3>Back</h3>
+
+ <div class="card back">*</div>
+ <pre>
+&lt;div class="card back"&gt;*&lt;/div&gt;
+ </pre>
+ <div class="clear"></div>
+
+ <h3>Front</h3>
+
+ <div class="card rank-7 spades cardx">
+ <span class="rank">7</span>
+ <span class="suit">&spades;</span>
+ </div>
+ <pre>
+&lt;div class="card rank-7 spades"&gt;
+ &lt;span class="rank"&gt;7&lt;/span&gt;
+ &lt;span class="suit"&gt;&amp;spades;&lt;/span&gt;
+&lt;/div&gt;
+ </pre>
+ <div class="clear"></div>
+
+ <h3>Selected</h3>
+
+ <strong>
+ <span class="card rank-a clubs">
+ <span class="rank">A</span>
+ <span class="suit">&clubs;</span>
+ </span>
+ </strong>
+ <pre>
+&lt;strong&gt;
+ &lt;span class="card rank-a clubs"&gt;
+ &lt;span class="rank"&gt;A&lt;/span&gt;
+ &lt;span class="suit"&gt;&amp;clubs;&lt;/span&gt;
+ &lt;/span&gt;
+&lt;/strong&gt;
+ </pre>
+ <div class="clear"></div>
+
+ <h3>As a Link (for selecting single cards)</h3>
+
+ <a class="card rank-q hearts" href="#">
+ <span class="rank">Q</span>
+ <span class="suit">&hearts;</span>
+ </a>
+ <pre>
+&lt;a class="card rank-q hearts" href="#"&gt;
+ &lt;span class="rank"&gt;Q&lt;/span&gt;
+ &lt;span class="suit"&gt;&amp;hearts;&lt;/span&gt;
+&lt;/a&gt;
+ </pre>
+ <div class="clear"></div>
+
+ <h3>As a Label with Checkbox (for selecting multiple cards)</h3>
+
+ <label for="c-2D" class="card rank-2 diams">
+ <span class="rank">2</span>
+ <span class="suit">&diams;</span>
+ <input type="checkbox" name="c-2D" id="c-2D" value="select" />
+ </label>
+ <pre>
+&lt;label for="c-2D" class="card rank-2 diams"&gt;
+ &lt;span class="rank"&gt;2&lt;/span&gt;
+ &lt;span class="suit"&gt;&amp;diams;&lt;/span&gt;
+ &lt;input type="checkbox" name="c-2D" id="c-2D" value="select" /&gt;
+&lt;/label>
+ </pre>
+ <div class="clear"></div>
+
+ <h2>Different Hands</h2>
+
+<!-- ul.table -->
+ <h3>Lying on the Table</h3>
+
+ <pre>
+&lt;ul class="table"&gt;
+ &lt;li&gt;...card...&lt;/li&gt;
+ ...
+&lt;/ul&gt;
+ </pre>
+
+ <ul class="table">
+ <li>
+ <a class="card rank-2 diams" href="#">
+ <span class="rank">2</span>
+ <span class="suit">&diams;</span>
+ </a>
+ </li>
+ <li>
+ <a class="card rank-q hearts" href="#">
+ <span class="rank">Q</span>
+ <span class="suit">&hearts;</span>
+ </a>
+ </li>
+ <li>
+ <a class="card rank-a clubs" href="#">
+ <span class="rank">A</span>
+ <span class="suit">&clubs;</span>
+ </a>
+ </li>
+ <li>
+ <strong>
+ <a class="card rank-3 hearts" href="#">
+ <span class="rank">3</span>
+ <span class="suit">&hearts;</span>
+ </a>
+ </strong>
+ </li>
+ <li>
+ <label for="c-10C" class="card rank-10 clubs">
+ <span class="rank">10</span>
+ <span class="suit">&clubs;</span>
+ <input type="checkbox" name="c-10C" id="c-10C" value="select" />
+ </label>
+ </li>
+ <li>
+ <label for="c-JD" class="card rank-j diams">
+ <span class="rank">J</span>
+ <span class="suit">&diams;</span>
+ <input type="checkbox" name="c-JD" id="c-JD" value="select" />
+ </label>
+ </li>
+ <li>
+ <label for="c-9S" class="card rank-9 spades">
+ <span class="rank">9</span>
+ <span class="suit">&spades;</span>
+ <input type="checkbox" name="c-9S" id="c-9S" value="select" />
+ </label>
+ </li>
+ </ul>
+ <div class="clear"></div>
+
+<!-- ul.hand -->
+
+ <h3>In your Hand</h3>
+
+<pre>
+&lt;ul class="hand"&gt;
+ &lt;li&gt;...card...&lt;/li&gt;
+ ...
+&lt;/ul&gt;
+</pre>
+
+ <ul class="hand">
+ <li>
+ <a class="card rank-7 diams" href="#">
+ <span class="rank">7</span>
+ <span class="suit">&diams;</span>
+ </a>
+ </li>
+ <li>
+ <a class="card rank-8 hearts" href="#">
+ <span class="rank">8</span>
+ <span class="suit">&hearts;</span>
+ </a>
+ </li>
+ <li>
+ <strong>
+ <a class="card rank-9 spades" href="#">
+ <span class="rank">9</span>
+ <span class="suit">&spades;</span>
+ </a>
+ </strong>
+ </li>
+ <li>
+ <a class="card rank-10 clubs" href="#">
+ <span class="rank">10</span>
+ <span class="suit">&clubs;</span>
+ </a>
+ </li>
+ <li>
+ <a class="card rank-j diams" href="#">
+ <span class="rank">J</span>
+ <span class="suit">&diams;</span>
+ </a>
+ </li>
+ <li>
+ <a class="card rank-5 clubs" href="#">
+ <span class="rank">5</span>
+ <span class="suit">&clubs;</span>
+ </a>
+ </li>
+ <li>
+ <a class="card rank-6 diams" href="#">
+ <span class="rank">6</span>
+ <span class="suit">&diams;</span>
+ </a>
+ </li>
+ <li>
+ <a class="card rank-q hearts" href="#">
+ <span class="rank">Q</span>
+ <span class="suit">&hearts;</span>
+ </a>
+ </li>
+ <li>
+ <a class="card rank-k spades" href="#">
+ <span class="rank">K</span>
+ <span class="suit">&spades;</span>
+ </a>
+ </li>
+ </ul>
+ <div class="clear"></div>
+
+<!-- ul.deck -->
+
+ <h3>A Deck</h3>
+
+<pre>
+&lt;ul class="deck"&gt;
+ &lt;li&gt;...card...&lt;/li&gt;
+ ...
+&lt;/ul&gt;
+</pre>
+
+ <ul class="deck">
+ <li>
+ <div class="card back">*</div>
+ </li>
+ <li>
+ <div class="card back">*</div>
+ </li>
+ <li>
+ <div class="card back">*</div>
+ </li>
+ <li>
+ <div class="card back">*</div>
+ </li>
+ <li>
+ <div class="card back">*</div>
+ </li>
+ <li>
+ <div class="card back">*</div>
+ </li>
+ <li>
+ <div class="card back">*</div>
+ </li>
+ <li>
+ <div class="card back">*</div>
+ </li>
+ <li>
+ <div class="card back">*</div>
+ </li>
+ <li>
+ <div class="card back">*</div>
+ </li>
+ <li>
+ <div class="card back">*</div>
+ </li>
+ <li>
+ <div class="card back">*</div>
+ </li>
+ <li>
+ <div class="card back">*</div>
+ </li>
+ <li>
+ <div class="card back">*</div>
+ </li>
+ <li>
+ <div class="card back">*</div>
+ </li>
+ <li>
+ <div class="card back">*</div>
+ </li>
+ <li>
+ <div class="card back">*</div>
+ </li>
+ <li>
+ <div class="card back">*</div>
+ </li>
+ <li>
+ <div class="card back">*</div>
+ </li>
+ <li>
+ <div class="card back">*</div>
+ </li>
+<!--
+ <li>
+ <a class="card rank-7 diams" href="#">
+ <span class="rank">7</span>
+ <span class="suit">&diams;</span>
+ </a>
+ </li>
+-->
+ </ul>
+ <div class="clear"></div>
+
+<!-- A Full Set -->
+
+ <h2 id="full">A Full Set</h2>
+
+ <ul class="table">
+ <li>
+ <div class="card rank-2 diams"><span class="rank">2</span><span class="suit">&diams;</span></div>
+ </li>
+ <li>
+ <div class="card rank-3 diams"><span class="rank">3</span><span class="suit">&diams;</span></div>
+ </li>
+ <li>
+ <div class="card rank-4 diams"><span class="rank">4</span><span class="suit">&diams;</span></div>
+ </li>
+ <li>
+ <div class="card rank-5 diams"><span class="rank">5</span><span class="suit">&diams;</span></div>
+ </li>
+ <li>
+ <div class="card rank-6 diams"><span class="rank">6</span><span class="suit">&diams;</span></div>
+ </li>
+ <li>
+ <div class="card rank-7 diams"><span class="rank">7</span><span class="suit">&diams;</span></div>
+ </li>
+ <li>
+ <div class="card rank-8 diams"><span class="rank">8</span><span class="suit">&diams;</span></div>
+ </li>
+ <li>
+ <div class="card rank-9 diams"><span class="rank">9</span><span class="suit">&diams;</span></div>
+ </li>
+ <li>
+ <div class="card rank-10 diams"><span class="rank">10</span><span class="suit">&diams;</span></div>
+ </li>
+ <li>
+ <div class="card rank-j diams"><span class="rank">J</span><span class="suit">&diams;</span></div>
+ </li>
+ <li>
+ <div class="card rank-q diams"><span class="rank">Q</span><span class="suit">&diams;</span></div>
+ </li>
+ <li>
+ <div class="card rank-k diams"><span class="rank">K</span><span class="suit">&diams;</span></div>
+ </li>
+ <li>
+ <div class="card rank-a diams"><span class="rank">A</span><span class="suit">&diams;</span></div>
+ </li>
+ </ul>
+
+ <ul class="table">
+ <li>
+ <div class="card rank-2 hearts"><span class="rank">2</span><span class="suit">&hearts;</span></div>
+ </li>
+ <li>
+ <div class="card rank-3 hearts"><span class="rank">3</span><span class="suit">&hearts;</span></div>
+ </li>
+ <li>
+ <div class="card rank-4 hearts"><span class="rank">4</span><span class="suit">&hearts;</span></div>
+ </li>
+ <li>
+ <div class="card rank-5 hearts"><span class="rank">5</span><span class="suit">&hearts;</span></div>
+ </li>
+ <li>
+ <div class="card rank-6 hearts"><span class="rank">6</span><span class="suit">&hearts;</span></div>
+ </li>
+ <li>
+ <div class="card rank-7 hearts"><span class="rank">7</span><span class="suit">&hearts;</span></div>
+ </li>
+ <li>
+ <div class="card rank-8 hearts"><span class="rank">8</span><span class="suit">&hearts;</span></div>
+ </li>
+ <li>
+ <div class="card rank-9 hearts"><span class="rank">9</span><span class="suit">&hearts;</span></div>
+ </li>
+ <li>
+ <div class="card rank-10 hearts"><span class="rank">10</span><span class="suit">&hearts;</span></div>
+ </li>
+ <li>
+ <div class="card rank-j hearts"><span class="rank">J</span><span class="suit">&hearts;</span></div>
+ </li>
+ <li>
+ <div class="card rank-q hearts"><span class="rank">Q</span><span class="suit">&hearts;</span></div>
+ </li>
+ <li>
+ <div class="card rank-k hearts"><span class="rank">K</span><span class="suit">&hearts;</span></div>
+ </li>
+ <li>
+ <div class="card rank-a hearts"><span class="rank">A</span><span class="suit">&hearts;</span></div>
+ </li>
+ </ul>
+
+ <ul class="table">
+ <li>
+ <div class="card rank-2 spades"><span class="rank">2</span><span class="suit">&spades;</span></div>
+ </li>
+ <li>
+ <div class="card rank-3 spades"><span class="rank">3</span><span class="suit">&spades;</span></div>
+ </li>
+ <li>
+ <div class="card rank-4 spades"><span class="rank">4</span><span class="suit">&spades;</span></div>
+ </li>
+ <li>
+ <div class="card rank-5 spades"><span class="rank">5</span><span class="suit">&spades;</span></div>
+ </li>
+ <li>
+ <div class="card rank-6 spades"><span class="rank">6</span><span class="suit">&spades;</span></div>
+ </li>
+ <li>
+ <div class="card rank-7 spades"><span class="rank">7</span><span class="suit">&spades;</span></div>
+ </li>
+ <li>
+ <div class="card rank-8 spades"><span class="rank">8</span><span class="suit">&spades;</span></div>
+ </li>
+ <li>
+ <div class="card rank-9 spades"><span class="rank">9</span><span class="suit">&spades;</span></div>
+ </li>
+ <li>
+ <div class="card rank-10 spades"><span class="rank">10</span><span class="suit">&spades;</span></div>
+ </li>
+ <li>
+ <div class="card rank-j spades"><span class="rank">J</span><span class="suit">&spades;</span></div>
+ </li>
+ <li>
+ <div class="card rank-q spades"><span class="rank">Q</span><span class="suit">&spades;</span></div>
+ </li>
+ <li>
+ <div class="card rank-k spades"><span class="rank">K</span><span class="suit">&spades;</span></div>
+ </li>
+ <li>
+ <div class="card rank-a spades"><span class="rank">A</span><span class="suit">&spades;</span></div>
+ </li>
+ </ul>
+
+ <ul class="table">
+ <li>
+ <div class="card rank-2 clubs"><span class="rank">2</span><span class="suit">&clubs;</span></div>
+ </li>
+ <li>
+ <div class="card rank-3 clubs"><span class="rank">3</span><span class="suit">&clubs;</span></div>
+ </li>
+ <li>
+ <div class="card rank-4 clubs"><span class="rank">4</span><span class="suit">&clubs;</span></div>
+ </li>
+ <li>
+ <div class="card rank-5 clubs"><span class="rank">5</span><span class="suit">&clubs;</span></div>
+ </li>
+ <li>
+ <div class="card rank-6 clubs"><span class="rank">6</span><span class="suit">&clubs;</span></div>
+ </li>
+ <li>
+ <div class="card rank-7 clubs"><span class="rank">7</span><span class="suit">&clubs;</span></div>
+ </li>
+ <li>
+ <div class="card rank-8 clubs"><span class="rank">8</span><span class="suit">&clubs;</span></div>
+ </li>
+ <li>
+ <div class="card rank-9 clubs"><span class="rank">9</span><span class="suit">&clubs;</span></div>
+ </li>
+ <li>
+ <div class="card rank-10 clubs"><span class="rank">10</span><span class="suit">&clubs;</span></div>
+ </li>
+ <li>
+ <div class="card rank-j clubs"><span class="rank">J</span><span class="suit">&clubs;</span></div>
+ </li>
+ <li>
+ <div class="card rank-q clubs"><span class="rank">Q</span><span class="suit">&clubs;</span></div>
+ </li>
+ <li>
+ <div class="card rank-k clubs"><span class="rank">K</span><span class="suit">&clubs;</span></div>
+ </li>
+ <li>
+ <div class="card rank-a clubs"><span class="rank">A</span><span class="suit">&clubs;</span></div>
+ </li>
+ </ul>
+ <div class="clear"></div>
+
+</div>
+
+</body>
+</html>
BIN  faces/JC.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  faces/JD.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  faces/JH.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  faces/JS.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  faces/KC.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  faces/KD.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  faces/KH.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  faces/KS.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  faces/QC.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  faces/QD.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  faces/QH.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  faces/QS.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 faces/README
@@ -0,0 +1,5 @@
+These images were adjusted from:
+
+SVG-cards [http://svg-cards.sourceforge.net/]
+by David Bellot <david.bellot@free.fr>
+under LGPL [http://www.gnu.org/licenses/lgpl-2.1.html]
BIN  faces/joker.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Please sign in to comment.
Something went wrong with that request. Please try again.