├── README.md ├── cards-ie.css ├── cards-ie9.css ├── cards.css ├── examples.html └── faces ├── JC.gif ├── JD.gif ├── JH.gif ├── JS.gif ├── KC.gif ├── KD.gif ├── KH.gif ├── KS.gif ├── QC.gif ├── QD.gif ├── QH.gif ├── QS.gif ├── README └── joker.gif /README.md: -------------------------------------------------------------------------------- 1 | CSS Playing Cards 2 | ================= 3 | 4 | CSS Playing Cards help you to create simple and semantic playing cards in (X)HTML. 5 | 6 | * @author Anika Henke 7 | * @license CC BY-SA [http://creativecommons.org/licenses/by-sa/3.0] 8 | * @version 2011-06-14 9 | * @link http://selfthinker.github.com/CSS-Playing-Cards/ 10 | 11 | Contents 12 | -------- 13 | 14 | * **cards.css** is the main part and provides the styles for the cards 15 | * **cards-ie.css** is a tiny fix for IE < 9 to make a simple version work 16 | * **cards-ie9.css** is a fix for IE9 17 | * **examples.html** provides some example HTML 18 | * **README.md** is this file 19 | * **faces/** contains images for the faces 20 | 21 | How to use it 22 | ------------- 23 | 24 | ### Surrounding container 25 | 26 |
27 | ... 28 |
29 | 30 | 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**: 31 | 32 | * **fourColours**: Switches the default two colour deck with a four colour deck. (The colours of the German four colour deck will be different.) 33 | * **faceImages**: Switches the default dingbat symbols for faces with images. *Note: Depending on the size of the card, you might need to adjust the image positioning of the faces in cards.css and the font-size in cards-ie9.css (search for "@change").* 34 | * **simpleCards**: Switches the default multiple suits to one simple single big suit in the middle. 35 | * **inText**: Switches the size to something small enough to fit into normal text and also removes the inner bits. 36 | * **rotateHand**: Switches the hand to rotate and fan in a semi circle. 37 | 38 | ### The back of a card 39 | 40 | <[element] class="card back">* 41 | 42 | To make the cards smaller or bigger, just change the font-size in the main "card" class in cards.css (search for "@change"). 43 | 44 | ### The front of a card 45 | 46 | <[element] class="card rank-[2|3|4|5|6|7|8|9|10|j|q|k|a] [diams|hearts|spades|clubs]"> 47 | <[element] class="rank">[2|3|4|5|6|7|8|9|10|J|Q|K|A] 48 | <[element] class="suit">&[diams|hearts|spades|clubs]; 49 | 50 | 51 | Depending on the context, the main card element should either be an **a** (for selecting single cards), a **label** (for selecting multiple cards), an **abbr** (for making a card more accessible with a title), a **div** or a **span** (for pure representation or played cards), e.g. 52 | 53 | <[a|label|abbr|div|span] class="card rank-a clubs" [href=""] [title=""]> 54 | A 55 | ♣ 56 | [] 57 | 58 | 59 | ### A joker 60 | 61 | <[element] class="card joker [big|little]"> 62 | <[element] class="rank">[+|-] 63 | <[element] class="suit">Joker 64 | 65 | 66 | ### Different hands 67 | 68 | 76 | 77 | * **table** places the whole cards side by side. 78 | * **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. 79 | * **deck** places the cards on top of each other, so that you cannot see single cards but a pack. 80 | 81 | Requirements 82 | ------------ 83 | 84 | The CSS is only intended to work in **modern browsers** (Firefox 3.6+, Opera 10+, Chrome, Safari, IE9). 85 | To make a basic version work in IE8, you need the provided **cards-ie.css**. And IE9 also needs a little fix, as provided in **cards-ie9.css**. 86 | 87 | Credits 88 | ------- 89 | 90 | * The faces' images are taken from [svg-cards](http://svg-cards.sourceforge.net/) 91 | * One of the cards back images was taken from http://www.squidfingers.com/patterns/ 92 | -------------------------------------------------------------------------------- /cards-ie.css: -------------------------------------------------------------------------------- 1 | /** 2 | * IE Styles for CSS Playing Cards 3 | * 4 | * @author Anika Henke 5 | * @license CC BY-SA [http://creativecommons.org/licenses/by-sa/3.0] 6 | * @version 2011-06-14 7 | * @link http://selfthinker.github.com/CSS-Playing-Cards/ 8 | */ 9 | 10 | /* sadly, IE8 and lower cannot cope with the :nth-child(n) selector */ 11 | .playingCards ul.hand li, 12 | .playingCards ul.deck li { 13 | position: static; 14 | } 15 | -------------------------------------------------------------------------------- /cards-ie9.css: -------------------------------------------------------------------------------- 1 | /** 2 | * IE 9 Styles for CSS Playing Cards 3 | * 4 | * @author Anika Henke 5 | * @license CC BY-SA [http://creativecommons.org/licenses/by-sa/3.0] 6 | * @version 2011-06-14 7 | * @link http://selfthinker.github.com/CSS-Playing-Cards/ 8 | */ 9 | 10 | /* fix for a bug in IE9 (see http://stackoverflow.com/questions/6322916/) 11 | @change: this change also means that whenever the general font-size of a .card changes, 12 | this value needs to be adjusted to be (3 x <.card font-size>) */ 13 | .playingCards.simpleCards .card .suit:after, 14 | .playingCards .card.rank-j .suit:after, 15 | .playingCards .card.rank-q .suit:after, 16 | .playingCards .card.rank-k .suit:after, 17 | .playingCards .card.rank-a .suit:after, 18 | .playingCards .card.joker .rank:after { 19 | font-size: 3.6rem; 20 | } 21 | -------------------------------------------------------------------------------- /cards.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Styles for CSS Playing Cards 3 | * 4 | * @author Anika Henke 5 | * @license CC BY-SA [http://creativecommons.org/licenses/by-sa/3.0] 6 | * @version 2011-06-14 7 | * @link http://selfthinker.github.com/CSS-Playing-Cards/ 8 | */ 9 | 10 | /* card itself 11 | ********************************************************************/ 12 | 13 | .playingCards .card { 14 | display: inline-block; 15 | width: 3.3em; 16 | height: 4.6em; 17 | border: 1px solid #666; 18 | border-radius: .3em; 19 | -moz-border-radius: .3em; 20 | -webkit-border-radius: .3em; 21 | -khtml-border-radius: .3em; 22 | padding: .25em; 23 | margin: 0 .5em .5em 0; 24 | text-align: center; 25 | font-size: 1.2em; /* @change: adjust this value to make bigger or smaller cards */ 26 | font-weight: normal; 27 | font-family: Arial, sans-serif; 28 | position: relative; 29 | background-color: #fff; 30 | -moz-box-shadow: .2em .2em .5em #333; 31 | -webkit-box-shadow: .2em .2em .5em #333; 32 | box-shadow: .2em .2em .5em #333; 33 | } 34 | 35 | .playingCards a.card { 36 | text-decoration: none; 37 | } 38 | /* selected and hover state */ 39 | .playingCards a.card:hover, .playingCards a.card:active, .playingCards a.card:focus, 40 | .playingCards label.card:hover, 41 | .playingCards strong .card { 42 | bottom: 1em; 43 | } 44 | .playingCards label.card { 45 | cursor: pointer; 46 | } 47 | 48 | .playingCards .card.back { 49 | text-indent: -4000px; 50 | background-color: #ccc; 51 | background-repeat: repeat; 52 | 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/ */ 53 | background-image: -moz-repeating-linear-gradient(34% 6% 135deg,#0F1E59, #75A1BF, #3E3E63 50%); 54 | background-image: -webkit-gradient(radial, center center, 20, center center, 80, from(#3c3), color-stop(0.4, #363), to(#030)); 55 | /* yes, it's intentional that Mozilla, Webkit, Opera and IE all will get different backgrounds ... why not? :) */ 56 | } 57 | 58 | /* suit colours 59 | ********************************************************************/ 60 | 61 | .playingCards .card.diams { 62 | color: #f00 !important; 63 | } 64 | .playingCards.fourColours .card.diams { 65 | color: #00f !important; 66 | } 67 | [lang=de] .playingCards.fourColours .card.diams { 68 | color: #f60 !important; 69 | } 70 | .playingCards .card.hearts { 71 | color: #f00 !important; 72 | } 73 | .playingCards .card.spades { 74 | color: #000 !important; 75 | } 76 | [lang=de] .playingCards.fourColours .card.spades { 77 | color: #090 !important; 78 | } 79 | .playingCards .card.clubs { 80 | color: #000 !important; 81 | } 82 | .playingCards.fourColours .card.clubs { 83 | color: #090 !important; 84 | } 85 | [lang=de] .playingCards.fourColours .card.clubs { 86 | color: #000 !important; 87 | } 88 | .playingCards .card.joker { 89 | color: #000 !important; 90 | } 91 | .playingCards .card.joker.big { 92 | color: #f00 !important; 93 | } 94 | 95 | /* inner bits 96 | ********************************************************************/ 97 | 98 | /* top left main info (rank and suit) */ 99 | 100 | .playingCards .card .rank, 101 | .playingCards .card .suit { 102 | display: block; 103 | line-height: 1; 104 | text-align: left; 105 | } 106 | .playingCards .card .rank { 107 | } 108 | .playingCards .card .suit { 109 | line-height: .7; 110 | } 111 | 112 | /* checkbox */ 113 | .playingCards .card input { 114 | margin-top: -.05em; 115 | font: inherit; 116 | } 117 | .playingCards.simpleCards .card input, 118 | .playingCards .card.rank-j input, 119 | .playingCards .card.rank-q input, 120 | .playingCards .card.rank-k input, 121 | .playingCards .card.rank-a input { 122 | margin-top: 2.4em; 123 | } 124 | .playingCards.inText .card input { 125 | margin-top: 0; 126 | } 127 | 128 | /* different rank letters for different languages */ 129 | .playingCards .card .rank:after, 130 | .playingCards .card.joker .rank:before { 131 | position: absolute; 132 | top: .25em; 133 | left: .25em; 134 | background: #fff; 135 | } 136 | [lang=de] .playingCards .card.rank-j .rank:after { 137 | content: "B"; 138 | } 139 | [lang=fr] .playingCards .card.rank-j .rank:after { 140 | content: "V"; 141 | } 142 | [lang=de] .playingCards .card.rank-q .rank:after, 143 | [lang=fr] .playingCards .card.rank-q .rank:after { 144 | content: "D"; 145 | } 146 | [lang=fr] .playingCards .card.rank-k .rank:after { 147 | content: "R"; 148 | } 149 | 150 | /* joker (top left symbol) */ 151 | .playingCards .card.joker .rank { 152 | position: absolute; 153 | } 154 | .playingCards .card.joker .rank:before { 155 | content: "\2605"; 156 | top: 0; 157 | left: 0; 158 | } 159 | .playingCards .card.joker .suit { 160 | text-indent: -9999px; 161 | } 162 | 163 | /* inner multiple suits */ 164 | .playingCards .card .suit:after { 165 | display: block; 166 | margin-top: -.8em; 167 | text-align: center; 168 | white-space: pre; 169 | line-height: .9; 170 | font-size: 1.3em; 171 | word-spacing: -.05em; 172 | } 173 | 174 | /* make the hearts and clubs symbols fit, because they are a bit bigger than the others */ 175 | .playingCards .card.hearts .suit:after { 176 | word-spacing: -.15em; 177 | } 178 | .playingCards .card.hearts.rank-10 .suit:after { 179 | word-spacing: -.05em; 180 | letter-spacing: -.1em; 181 | } 182 | .playingCards .card.clubs.rank-10 .suit:after { 183 | word-spacing: -.15em; 184 | } 185 | 186 | /* 8, 9, 10 are the most crowded */ 187 | .playingCards .card.rank-8 .suit:after, 188 | .playingCards .card.rank-9 .suit:after { 189 | letter-spacing: -.075em; 190 | } 191 | .playingCards .card.rank-10 .suit:after { 192 | letter-spacing: -.1em; 193 | } 194 | .playingCards .card.clubs .suit:after { 195 | letter-spacing: -.125em; 196 | } 197 | 198 | /*____________ symbols in the middle (suits, full) ____________*/ 199 | 200 | /* diamonds */ 201 | .playingCards .card.rank-2.diams .suit:after { 202 | content: "\2666 \A\A\2666"; 203 | } 204 | .playingCards .card.rank-3.diams .suit:after { 205 | content: "\2666 \A\2666 \A\2666"; 206 | } 207 | .playingCards .card.rank-4.diams .suit:after { 208 | content: "\2666\00A0\00A0\00A0\2666 \A\A\2666\00A0\00A0\00A0\2666"; 209 | } 210 | .playingCards .card.rank-5.diams .suit:after { 211 | content: "\2666\00A0\00A0\00A0\2666 \A\2666 \A\2666\00A0\00A0\00A0\2666"; 212 | } 213 | .playingCards .card.rank-6.diams .suit:after { 214 | content: "\2666\00A0\00A0\00A0\2666 \A\2666\00A0\00A0\00A0\2666 \A\2666\00A0\00A0\00A0\2666"; 215 | } 216 | .playingCards .card.rank-7.diams .suit:after { 217 | content: "\2666\00A0\00A0\2666 \A\2666\00A0\2666\00A0\2666 \A\2666\00A0\00A0\2666"; 218 | } 219 | .playingCards .card.rank-8.diams .suit:after { 220 | content: "\2666\00A0\2666\00A0\2666 \A\2666\00A0\00A0\2666 \A\2666\00A0\2666\00A0\2666"; 221 | } 222 | .playingCards .card.rank-9.diams .suit:after { 223 | content: "\2666\00A0\2666\00A0\2666 \A\2666\00A0\2666\00A0\2666 \A\2666\00A0\2666\00A0\2666"; 224 | } 225 | .playingCards .card.rank-10.diams .suit:after { 226 | content: "\2666\00A0\2666\00A0\2666 \A\2666\00A0\2666\00A0\2666\00A0\2666 \A\2666\00A0\2666\00A0\2666"; 227 | } 228 | 229 | /* hearts */ 230 | .playingCards .card.rank-2.hearts .suit:after { 231 | content: "\2665 \A\A\2665"; 232 | } 233 | .playingCards .card.rank-3.hearts .suit:after { 234 | content: "\2665 \A\2665 \A\2665"; 235 | } 236 | .playingCards .card.rank-4.hearts .suit:after { 237 | content: "\2665\00A0\00A0\00A0\2665 \A\A\2665\00A0\00A0\00A0\2665"; 238 | } 239 | .playingCards .card.rank-5.hearts .suit:after { 240 | content: "\2665\00A0\00A0\00A0\2665 \A\2665 \A\2665\00A0\00A0\00A0\2665"; 241 | } 242 | .playingCards .card.rank-6.hearts .suit:after { 243 | content: "\2665\00A0\00A0\00A0\2665 \A\2665\00A0\00A0\00A0\2665 \A\2665\00A0\00A0\00A0\2665"; 244 | } 245 | .playingCards .card.rank-7.hearts .suit:after { 246 | content: "\2665\00A0\00A0\2665 \A\2665\00A0\2665\00A0\2665 \A\2665\00A0\00A0\2665"; 247 | } 248 | .playingCards .card.rank-8.hearts .suit:after { 249 | content: "\2665\00A0\2665\00A0\2665 \A\2665\00A0\00A0\2665 \A\2665\00A0\2665\00A0\2665"; 250 | } 251 | .playingCards .card.rank-9.hearts .suit:after { 252 | content: "\2665\00A0\2665\00A0\2665 \A\2665\00A0\2665\00A0\2665 \A\2665\00A0\2665\00A0\2665"; 253 | } 254 | .playingCards .card.rank-10.hearts .suit:after { 255 | content: "\2665\00A0\2665\00A0\2665 \A\2665\00A0\2665\00A0\2665\00A0\2665 \A\2665\00A0\2665\00A0\2665"; 256 | } 257 | 258 | /* spades */ 259 | .playingCards .card.rank-2.spades .suit:after { 260 | content: "\2660 \A\A\2660"; 261 | } 262 | .playingCards .card.rank-3.spades .suit:after { 263 | content: "\2660 \A\2660 \A\2660"; 264 | } 265 | .playingCards .card.rank-4.spades .suit:after { 266 | content: "\2660\00A0\00A0\00A0\2660 \A\A\2660\00A0\00A0\00A0\2660"; 267 | } 268 | .playingCards .card.rank-5.spades .suit:after { 269 | content: "\2660\00A0\00A0\00A0\2660 \A\2660 \A\2660\00A0\00A0\00A0\2660"; 270 | } 271 | .playingCards .card.rank-6.spades .suit:after { 272 | content: "\2660\00A0\00A0\00A0\2660 \A\2660\00A0\00A0\00A0\2660 \A\2660\00A0\00A0\00A0\2660"; 273 | } 274 | .playingCards .card.rank-7.spades .suit:after { 275 | content: "\2660\00A0\00A0\2660 \A\2660\00A0\2660\00A0\2660 \A\2660\00A0\00A0\2660"; 276 | } 277 | .playingCards .card.rank-8.spades .suit:after { 278 | content: "\2660\00A0\2660\00A0\2660 \A\2660\00A0\00A0\2660 \A\2660\00A0\2660\00A0\2660"; 279 | } 280 | .playingCards .card.rank-9.spades .suit:after { 281 | content: "\2660\00A0\2660\00A0\2660 \A\2660\00A0\2660\00A0\2660 \A\2660\00A0\2660\00A0\2660"; 282 | } 283 | .playingCards .card.rank-10.spades .suit:after { 284 | content: "\2660\00A0\2660\00A0\2660 \A\2660\00A0\2660\00A0\2660\00A0\2660 \A\2660\00A0\2660\00A0\2660"; 285 | } 286 | 287 | /* clubs */ 288 | .playingCards .card.rank-2.clubs .suit:after { 289 | content: "\2663 \A\A\2663"; 290 | } 291 | .playingCards .card.rank-3.clubs .suit:after { 292 | content: "\2663 \A\2663 \A\2663"; 293 | } 294 | .playingCards .card.rank-4.clubs .suit:after { 295 | content: "\2663\00A0\00A0\00A0\2663 \A\A\2663\00A0\00A0\00A0\2663"; 296 | } 297 | .playingCards .card.rank-5.clubs .suit:after { 298 | content: "\2663\00A0\00A0\00A0\2663 \A\2663 \A\2663\00A0\00A0\00A0\2663"; 299 | } 300 | .playingCards .card.rank-6.clubs .suit:after { 301 | content: "\2663\00A0\00A0\00A0\2663 \A\2663\00A0\00A0\00A0\2663 \A\2663\00A0\00A0\00A0\2663"; 302 | } 303 | .playingCards .card.rank-7.clubs .suit:after { 304 | content: "\2663\00A0\00A0\2663 \A\2663\00A0\2663\00A0\2663 \A\2663\00A0\00A0\2663"; 305 | } 306 | .playingCards .card.rank-8.clubs .suit:after { 307 | content: "\2663\00A0\2663\00A0\2663 \A\2663\00A0\00A0\2663 \A\2663\00A0\2663\00A0\2663"; 308 | } 309 | .playingCards .card.rank-9.clubs .suit:after { 310 | content: "\2663\00A0\2663\00A0\2663 \A\2663\00A0\2663\00A0\2663 \A\2663\00A0\2663\00A0\2663"; 311 | } 312 | .playingCards .card.rank-10.clubs .suit:after { 313 | content: "\2663\00A0\2663\00A0\2663 \A\2663\00A0\2663\00A0\2663\00A0\2663 \A\2663\00A0\2663\00A0\2663"; 314 | } 315 | 316 | /*____________ symbols in the middle (faces as images) ____________*/ 317 | 318 | .playingCards.faceImages .card.rank-j .suit:after, 319 | .playingCards.faceImages .card.rank-q .suit:after, 320 | .playingCards.faceImages .card.rank-k .suit:after { 321 | content: ''; 322 | } 323 | .playingCards.faceImages .card.rank-j, 324 | .playingCards.faceImages .card.rank-q, 325 | .playingCards.faceImages .card.rank-k, 326 | .playingCards.faceImages .card.joker { 327 | background-repeat: no-repeat; 328 | background-position: -1em 0; 329 | /* @change: smaller cards: more negative distance from the left 330 | bigger cards: 0 or more positive distance from the left */ 331 | 332 | /* for a centered full background image: 333 | background-position: .35em 0; 334 | -moz-background-size: contain; 335 | -o-background-size: contain; 336 | -webkit-background-size: contain; 337 | -khtml-background-size: contain; 338 | background-size: contain; 339 | */ 340 | } 341 | 342 | .playingCards.faceImages .card.rank-j.diams { background-image: url(faces/JD.gif); } 343 | .playingCards.faceImages .card.rank-j.hearts { background-image: url(faces/JH.gif); } 344 | .playingCards.faceImages .card.rank-j.spades { background-image: url(faces/JS.gif); } 345 | .playingCards.faceImages .card.rank-j.clubs { background-image: url(faces/JC.gif); } 346 | 347 | .playingCards.faceImages .card.rank-q.diams { background-image: url(faces/QD.gif); } 348 | .playingCards.faceImages .card.rank-q.hearts { background-image: url(faces/QH.gif); } 349 | .playingCards.faceImages .card.rank-q.spades { background-image: url(faces/QS.gif); } 350 | .playingCards.faceImages .card.rank-q.clubs { background-image: url(faces/QC.gif); } 351 | 352 | .playingCards.faceImages .card.rank-k.diams { background-image: url(faces/KD.gif); } 353 | .playingCards.faceImages .card.rank-k.hearts { background-image: url(faces/KH.gif); } 354 | .playingCards.faceImages .card.rank-k.spades { background-image: url(faces/KS.gif); } 355 | .playingCards.faceImages .card.rank-k.clubs { background-image: url(faces/KC.gif); } 356 | 357 | .playingCards.faceImages .card.joker { background-image: url(faces/joker.gif); } 358 | .playingCards.simpleCards .card.rank-j, 359 | .playingCards.simpleCards .card.rank-q, 360 | .playingCards.simpleCards .card.rank-k { background-image: none !important; } 361 | 362 | /*____________ symbols in the middle (faces as dingbat symbols) ____________*/ 363 | 364 | .playingCards.simpleCards .card .suit:after, 365 | .playingCards .card.rank-j .suit:after, 366 | .playingCards .card.rank-q .suit:after, 367 | .playingCards .card.rank-k .suit:after, 368 | .playingCards .card.rank-a .suit:after, 369 | .playingCards .card.joker .rank:after { 370 | font-family: Georgia, serif; 371 | position: absolute; 372 | font-size: 3em; 373 | right: .1em; 374 | bottom: .25em; 375 | word-spacing: normal; 376 | letter-spacing: normal; 377 | line-height: 1; 378 | } 379 | .playingCards .card.rank-j .suit:after { 380 | content: "\265F"; 381 | right: .15em; 382 | } 383 | .playingCards .card.rank-q .suit:after { 384 | content: "\265B"; 385 | } 386 | .playingCards .card.rank-k .suit:after { 387 | content: "\265A"; 388 | } 389 | /* joker (inner symbol) */ 390 | .playingCards.faceImages .card.joker .rank:after { 391 | content: ""; 392 | } 393 | .playingCards .card.joker .rank:after { 394 | position: absolute; 395 | content: "\2766"; 396 | top: .4em; 397 | left: .1em; 398 | } 399 | 400 | /* big suits in middle */ 401 | .playingCards.simpleCards .card .suit:after, 402 | .playingCards .card.rank-a .suit:after { 403 | font-family: Arial, sans-serif; 404 | line-height: .9; 405 | bottom: .35em; 406 | } 407 | .playingCards.simpleCards .card.diams .suit:after, 408 | .playingCards .card.rank-a.diams .suit:after { 409 | content: "\2666"; 410 | right: .4em; 411 | } 412 | .playingCards.simpleCards .card.hearts .suit:after, 413 | .playingCards .card.rank-a.hearts .suit:after { 414 | content: "\2665"; 415 | right: .35em; 416 | } 417 | .playingCards.simpleCards .card.spades .suit:after, 418 | .playingCards .card.rank-a.spades .suit:after { 419 | content: "\2660"; 420 | right: .35em; 421 | } 422 | .playingCards.simpleCards .card.clubs .suit:after, 423 | .playingCards .card.rank-a.clubs .suit:after { 424 | content: "\2663"; 425 | right: .3em; 426 | } 427 | 428 | /*____________ smaller cards for use inside text ____________*/ 429 | 430 | .playingCards.inText .card { 431 | font-size: .4em; 432 | vertical-align: middle; 433 | } 434 | .playingCards.inText .card span.rank, 435 | .playingCards.inText .card span.suit { 436 | text-align: center; 437 | } 438 | .playingCards.inText .card span.rank { 439 | font-size: 2em; 440 | margin-top: .2em; 441 | } 442 | .playingCards.inText .card span.suit { 443 | font-size: 2.5em; 444 | } 445 | .playingCards.inText .card .suit:after, 446 | .playingCards.inText .card.joker .rank:after { 447 | content: "" !important; 448 | } 449 | .playingCards.inText .card .rank:after { 450 | left: .5em; 451 | padding: 0 .1em; 452 | } 453 | 454 | 455 | /* hand (in your hand or on table or as a deck) 456 | ********************************************************************/ 457 | 458 | .playingCards ul.table, 459 | .playingCards ul.hand, 460 | .playingCards ul.deck { 461 | list-style-type: none; 462 | padding: 0; 463 | margin: 0 0 1.5em 0; 464 | position: relative; 465 | clear: both; 466 | } 467 | .playingCards ul.hand { 468 | margin-bottom: 3.5em; 469 | } 470 | .playingCards ul.table li, 471 | .playingCards ul.hand li, 472 | .playingCards ul.deck li { 473 | margin: 0; 474 | padding: 0; 475 | list-style-type: none; 476 | float: left; 477 | } 478 | 479 | .playingCards ul.hand, 480 | .playingCards ul.deck { 481 | height: 8em; 482 | } 483 | .playingCards ul.hand li, 484 | .playingCards ul.deck li { 485 | position: absolute; 486 | } 487 | .playingCards ul.hand li { 488 | bottom: 0; 489 | } 490 | .playingCards ul.hand li:nth-child(1) { left: 0; } 491 | .playingCards ul.hand li:nth-child(2) { left: 1.1em; } 492 | .playingCards ul.hand li:nth-child(3) { left: 2.2em; } 493 | .playingCards ul.hand li:nth-child(4) { left: 3.3em; } 494 | .playingCards ul.hand li:nth-child(5) { left: 4.4em; } 495 | .playingCards ul.hand li:nth-child(6) { left: 5.5em; } 496 | .playingCards ul.hand li:nth-child(7) { left: 6.6em; } 497 | .playingCards ul.hand li:nth-child(8) { left: 7.7em; } 498 | .playingCards ul.hand li:nth-child(9) { left: 8.8em; } 499 | .playingCards ul.hand li:nth-child(10) { left: 9.9em; } 500 | .playingCards ul.hand li:nth-child(11) { left: 11em; } 501 | .playingCards ul.hand li:nth-child(12) { left: 12.1em; } 502 | .playingCards ul.hand li:nth-child(13) { left: 13.2em; } 503 | 504 | .playingCards ul.hand li:nth-child(14) { left: 14.3em; } 505 | .playingCards ul.hand li:nth-child(15) { left: 15.4em; } 506 | .playingCards ul.hand li:nth-child(16) { left: 16.5em; } 507 | .playingCards ul.hand li:nth-child(17) { left: 17.6em; } 508 | .playingCards ul.hand li:nth-child(18) { left: 18.7em; } 509 | .playingCards ul.hand li:nth-child(19) { left: 19.8em; } 510 | .playingCards ul.hand li:nth-child(20) { left: 20.9em; } 511 | .playingCards ul.hand li:nth-child(21) { left: 22em; } 512 | .playingCards ul.hand li:nth-child(22) { left: 23.1em; } 513 | .playingCards ul.hand li:nth-child(23) { left: 24.2em; } 514 | .playingCards ul.hand li:nth-child(24) { left: 25.3em; } 515 | .playingCards ul.hand li:nth-child(25) { left: 26.4em; } 516 | .playingCards ul.hand li:nth-child(26) { left: 27.5em; } 517 | 518 | /* rotate cards if rotateHand option is on */ 519 | .playingCards.rotateHand ul.hand li:nth-child(1) { 520 | -moz-transform: translate(1.9em, .9em) rotate(-42deg); 521 | -webkit-transform: translate(1.9em, .9em) rotate(-42deg); 522 | -o-transform: translate(1.9em, .9em) rotate(-42deg); 523 | transform: translate(1.9em, .9em) rotate(-42deg); 524 | } 525 | .playingCards.rotateHand ul.hand li:nth-child(2) { 526 | -moz-transform: translate(1.5em, .5em) rotate(-33deg); 527 | -webkit-transform: translate(1.5em, .5em) rotate(-33deg); 528 | -o-transform: translate(1.5em, .5em) rotate(-33deg); 529 | transform: translate(1.5em, .5em) rotate(-33deg); 530 | } 531 | .playingCards.rotateHand ul.hand li:nth-child(3) { 532 | -moz-transform: translate(1.1em, .3em) rotate(-24deg); 533 | -webkit-transform: translate(1.1em, .3em) rotate(-24deg); 534 | -o-transform: translate(1.1em, .3em) rotate(-24deg); 535 | transform: translate(1.1em, .3em) rotate(-24deg); 536 | } 537 | .playingCards.rotateHand ul.hand li:nth-child(4) { 538 | -moz-transform: translate(.7em, .2em) rotate(-15deg); 539 | -webkit-transform: translate(.7em, .2em) rotate(-15deg); 540 | -o-transform: translate(.7em, .2em) rotate(-15deg); 541 | transform: translate(.7em, .2em) rotate(-15deg); 542 | } 543 | .playingCards.rotateHand ul.hand li:nth-child(5) { 544 | -moz-transform: translate(.3em, .1em) rotate(-6deg); 545 | -webkit-transform: translate(.3em, .1em) rotate(-6deg); 546 | -o-transform: translate(.3em, .1em) rotate(-6deg); 547 | transform: translate(.3em, .1em) rotate(-6deg); 548 | } 549 | .playingCards.rotateHand ul.hand li:nth-child(6) { 550 | -moz-transform: translate(-.1em, .1em) rotate(3deg); 551 | -webkit-transform: translate(-.1em, .1em) rotate(3deg); 552 | -o-transform: translate(-.1em, .1em) rotate(3deg); 553 | transform: translate(-.1em, .1em) rotate(3deg); 554 | } 555 | .playingCards.rotateHand ul.hand li:nth-child(7) { 556 | -moz-transform: translate(-.5em, .2em) rotate(12deg); 557 | -webkit-transform: translate(-.5em, .2em) rotate(12deg); 558 | -o-transform: translate(-.5em, .2em) rotate(12deg); 559 | transform: translate(-.5em, .2em) rotate(12deg); 560 | } 561 | .playingCards.rotateHand ul.hand li:nth-child(8) { 562 | -moz-transform: translate(-.9em, .3em) rotate(21deg); 563 | -webkit-transform: translate(-.9em, .3em) rotate(21deg); 564 | -o-transform: translate(-.9em, .3em) rotate(21deg); 565 | transform: translate(-.9em, .3em) rotate(21deg); 566 | } 567 | .playingCards.rotateHand ul.hand li:nth-child(9) { 568 | -moz-transform: translate(-1.3em, .6em) rotate(30deg); 569 | -webkit-transform: translate(-1.3em, .6em) rotate(30deg); 570 | -o-transform: translate(-1.3em, .6em) rotate(30deg); 571 | transform: translate(-1.3em, .6em) rotate(30deg); 572 | } 573 | .playingCards.rotateHand ul.hand li:nth-child(10) { 574 | -moz-transform: translate(-1.7em, 1em) rotate(39deg); 575 | -webkit-transform: translate(-1.7em, 1em) rotate(39deg); 576 | -o-transform: translate(-1.7em, 1em) rotate(39deg); 577 | transform: translate(-1.7em, 1em) rotate(39deg); 578 | } 579 | .playingCards.rotateHand ul.hand li:nth-child(11) { 580 | -moz-transform: translate(-2.2em, 1.5em) rotate(48deg); 581 | -webkit-transform: translate(-2.2em, 1.5em) rotate(48deg); 582 | -o-transform: translate(-2.2em, 1.5em) rotate(48deg); 583 | transform: translate(-2.2em, 1.5em) rotate(48deg); 584 | } 585 | .playingCards.rotateHand ul.hand li:nth-child(12) { 586 | -moz-transform: translate(-2.8em, 2.1em) rotate(57deg); 587 | -webkit-transform: translate(-2.8em, 2.1em) rotate(57deg); 588 | -o-transform: translate(-2.8em, 2.1em) rotate(57deg); 589 | transform: translate(-2.8em, 2.1em) rotate(57deg); 590 | } 591 | .playingCards.rotateHand ul.hand li:nth-child(13) { 592 | -moz-transform: translate(-3.5em, 2.8em) rotate(66deg); 593 | -webkit-transform: translate(-3.5em, 2.8em) rotate(66deg); 594 | -o-transform: translate(-3.5em, 2.8em) rotate(66deg); 595 | transform: translate(-3.5em, 2.8em) rotate(66deg); 596 | } 597 | 598 | /* deck */ 599 | .playingCards ul.deck li:nth-child(1) { left: 0; bottom: 0; } 600 | .playingCards ul.deck li:nth-child(2) { left: 2px; bottom: 1px; } 601 | .playingCards ul.deck li:nth-child(3) { left: 4px; bottom: 2px; } 602 | .playingCards ul.deck li:nth-child(4) { left: 6px; bottom: 3px; } 603 | .playingCards ul.deck li:nth-child(5) { left: 8px; bottom: 4px; } 604 | .playingCards ul.deck li:nth-child(6) { left: 10px; bottom: 5px; } 605 | .playingCards ul.deck li:nth-child(7) { left: 12px; bottom: 6px; } 606 | .playingCards ul.deck li:nth-child(8) { left: 14px; bottom: 7px; } 607 | .playingCards ul.deck li:nth-child(9) { left: 16px; bottom: 8px; } 608 | .playingCards ul.deck li:nth-child(10) { left: 18px; bottom: 9px; } 609 | .playingCards ul.deck li:nth-child(11) { left: 20px; bottom: 10px; } 610 | .playingCards ul.deck li:nth-child(12) { left: 22px; bottom: 11px; } 611 | .playingCards ul.deck li:nth-child(13) { left: 24px; bottom: 12px; } 612 | .playingCards ul.deck li:nth-child(14) { left: 26px; bottom: 13px; } 613 | .playingCards ul.deck li:nth-child(15) { left: 28px; bottom: 14px; } 614 | .playingCards ul.deck li:nth-child(16) { left: 30px; bottom: 15px; } 615 | .playingCards ul.deck li:nth-child(17) { left: 32px; bottom: 16px; } 616 | .playingCards ul.deck li:nth-child(18) { left: 34px; bottom: 17px; } 617 | .playingCards ul.deck li:nth-child(19) { left: 36px; bottom: 18px; } 618 | .playingCards ul.deck li:nth-child(20) { left: 38px; bottom: 19px; } 619 | .playingCards ul.deck li:nth-child(21) { left: 40px; bottom: 20px; } 620 | .playingCards ul.deck li:nth-child(22) { left: 42px; bottom: 21px; } 621 | .playingCards ul.deck li:nth-child(23) { left: 44px; bottom: 22px; } 622 | .playingCards ul.deck li:nth-child(24) { left: 46px; bottom: 23px; } 623 | .playingCards ul.deck li:nth-child(25) { left: 48px; bottom: 24px; } 624 | .playingCards ul.deck li:nth-child(26) { left: 50px; bottom: 25px; } 625 | .playingCards ul.deck li:nth-child(27) { left: 52px; bottom: 26px; } 626 | .playingCards ul.deck li:nth-child(28) { left: 54px; bottom: 27px; } 627 | .playingCards ul.deck li:nth-child(29) { left: 56px; bottom: 28px; } 628 | .playingCards ul.deck li:nth-child(30) { left: 58px; bottom: 29px; } 629 | .playingCards ul.deck li:nth-child(31) { left: 60px; bottom: 30px; } 630 | .playingCards ul.deck li:nth-child(32) { left: 62px; bottom: 31px; } 631 | -------------------------------------------------------------------------------- /examples.html: -------------------------------------------------------------------------------- 1 | 3 | 11 | 12 | 13 | 14 | CSS Playing Cards 15 | 16 | 19 | 22 | 23 | 24 | 36 | 70 | 71 | 72 | 73 |
74 | 75 |

CSS Playing Cards

76 | 77 |

CSS Playing Cards help you to create simple and semantic playing cards in (X)HTML. This documents some examples and how to set them up.

78 | 79 |

Surrounding Container:

80 | 
 81 | <div class="playingCards">...</div>
 82 |
83 | 84 |

With different options (default is the respective opposite):

85 | 
 86 | <div class="playingCards fourColours faceImages simpleCards inText rotateHand">...</div>
 87 |
88 | 89 |
90 |

Options:

91 |
    92 |
  • fourColours
    • 93 |
  • faceImages
    • 94 |
  • simpleCards
    • 95 |
  • inText
    • 96 |
  • rotateHand
    • 97 |
98 |

Languages:

99 |
    100 |
  • en
    • 101 |
  • de
    • 102 |
  • fr
    • 103 |
104 |
105 | 106 | 107 |

Single Cards

108 | 109 |

Back

110 | 111 |
*
112 | 
113 | <div class="card back">*</div>
114 |
115 |
116 | 117 |

Front

118 | 119 |
120 | 7 121 | ♠ 122 |
123 | 
124 | <div class="card rank-7 spades">
125 |     <span class="rank">7</span>
126 |     <span class="suit">&spades;</span>
127 | </div>
128 |
129 |
130 | 131 |

A Joker

132 | 133 |
134 | - 135 | Joker 136 |
137 | 
138 | <div class="card little joker">
139 |     <span class="rank">-</span>
140 |     <span class="suit">Joker</span>
141 | </div>
142 |
143 |
144 | 145 |

Selected

146 | 147 | 148 | 149 | A 150 | ♣ 151 | 152 | 153 | 
154 | <strong>
155 |     <span class="card rank-a clubs">
156 |         <span class="rank">A</span>
157 |         <span class="suit">&clubs;</span>
158 |     </span>
159 | </strong>
160 |
161 |
162 | 163 |

As a Link (for selecting single cards)

164 | 165 | 166 | Q 167 | ♥ 168 | 169 | 
170 | <a class="card rank-q hearts" href="#">
171 |     <span class="rank">Q</span>
172 |     <span class="suit">&hearts;</span>
173 | </a>
174 |
175 |
176 | 177 |

As a Label with Checkbox (for selecting multiple cards)

178 | 179 | 184 | 
185 | <label for="c-2D" class="card rank-2 diams">
186 |     <span class="rank">2</span>
187 |     <span class="suit">&diams;</span>
188 |     <input type="checkbox" name="c-2D" id="c-2D" value="select" />
189 | </label>
190 |
191 |
192 | 193 |

Different Hands

194 | 195 | 196 |

Lying on the Table

197 | 198 | 
199 | <ul class="table">
200 |     <li>...card...</li>
201 |     ...
202 | </ul>
203 |
204 | 205 | 254 |
255 | 256 | 257 | 258 |

In your Hand

259 | 260 | 
261 | <ul class="hand">
262 |     <li>...card...</li>
263 |     ...
264 | </ul>
265 |
266 | 267 | 325 |
326 | 327 | 328 | 329 |

A Deck

330 | 331 | 
332 | <ul class="deck">
333 |     <li>...card...</li>
334 |     ...
335 | </ul>
336 |
337 | 338 |
    339 |
  • 340 |
    *
    341 |
    • 342 |
  • 343 |
    *
    344 |
    • 345 |
  • 346 |
    *
    347 |
    • 348 |
  • 349 |
    *
    350 |
    • 351 |
  • 352 |
    *
    353 |
    • 354 |
  • 355 |
    *
    356 |
    • 357 |
  • 358 |
    *
    359 |
    • 360 |
  • 361 |
    *
    362 |
    • 363 |
  • 364 |
    *
    365 |
    • 366 |
  • 367 |
    *
    368 |
    • 369 |
  • 370 |
    *
    371 |
    • 372 |
  • 373 |
    *
    374 |
    • 375 |
  • 376 |
    *
    377 |
    • 378 |
  • 379 |
    *
    380 |
    • 381 |
  • 382 |
    *
    383 |
    • 384 |
  • 385 |
    *
    386 |
    • 387 |
  • 388 |
    *
    389 |
    • 390 |
  • 391 |
    *
    392 |
    • 393 |
  • 394 |
    *
    395 |
    • 396 |
  • 397 |
    *
    398 |
    • 399 |
400 |
401 | 402 | 403 | 404 |

A Full Set

405 | 406 |
    407 |
  • 408 |
    2♦
    409 |
    • 410 |
  • 411 |
    3♦
    412 |
    • 413 |
  • 414 |
    4♦
    415 |
    • 416 |
  • 417 |
    5♦
    418 |
    • 419 |
  • 420 |
    6♦
    421 |
    • 422 |
  • 423 |
    7♦
    424 |
    • 425 |
  • 426 |
    8♦
    427 |
    • 428 |
  • 429 |
    9♦
    430 |
    • 431 |
  • 432 |
    10♦
    433 |
    • 434 |
  • 435 |
    J♦
    436 |
    • 437 |
  • 438 |
    Q♦
    439 |
    • 440 |
  • 441 |
    K♦
    442 |
    • 443 |
  • 444 |
    A♦
    445 |
    • 446 |
447 | 448 |
    449 |
  • 450 |
    2♥
    451 |
    • 452 |
  • 453 |
    3♥
    454 |
    • 455 |
  • 456 |
    4♥
    457 |
    • 458 |
  • 459 |
    5♥
    460 |
    • 461 |
  • 462 |
    6♥
    463 |
    • 464 |
  • 465 |
    7♥
    466 |
    • 467 |
  • 468 |
    8♥
    469 |
    • 470 |
  • 471 |
    9♥
    472 |
    • 473 |
  • 474 |
    10♥
    475 |
    • 476 |
  • 477 |
    J♥
    478 |
    • 479 |
  • 480 |
    Q♥
    481 |
    • 482 |
  • 483 |
    K♥
    484 |
    • 485 |
  • 486 |
    A♥
    487 |
    • 488 |
489 | 490 |
    491 |
  • 492 |
    2♠
    493 |
    • 494 |
  • 495 |
    3♠
    496 |
    • 497 |
  • 498 |
    4♠
    499 |
    • 500 |
  • 501 |
    5♠
    502 |
    • 503 |
  • 504 |
    6♠
    505 |
    • 506 |
  • 507 |
    7♠
    508 |
    • 509 |
  • 510 |
    8♠
    511 |
    • 512 |
  • 513 |
    9♠
    514 |
    • 515 |
  • 516 |
    10♠
    517 |
    • 518 |
  • 519 |
    J♠
    520 |
    • 521 |
  • 522 |
    Q♠
    523 |
    • 524 |
  • 525 |
    K♠
    526 |
    • 527 |
  • 528 |
    A♠
    529 |
    • 530 |
531 | 532 |
    533 |
  • 534 |
    2♣
    535 |
    • 536 |
  • 537 |
    3♣
    538 |
    • 539 |
  • 540 |
    4♣
    541 |
    • 542 |
  • 543 |
    5♣
    544 |
    • 545 |
  • 546 |
    6♣
    547 |
    • 548 |
  • 549 |
    7♣
    550 |
    • 551 |
  • 552 |
    8♣
    553 |
    • 554 |
  • 555 |
    9♣
    556 |
    • 557 |
  • 558 |
    10♣
    559 |
    • 560 |
  • 561 |
    J♣
    562 |
    • 563 |
  • 564 |
    Q♣
    565 |
    • 566 |
  • 567 |
    K♣
    568 |
    • 569 |
  • 570 |
    A♣
    571 |
    • 572 |
573 | 574 |
    575 |
  • 576 |
    +Joker
    577 |
    • 578 |
  • 579 |
    -Joker
    580 |
    • 581 |
  • 582 |
    *
    583 |
    • 584 |
585 |
586 | 587 |
588 | 589 | 590 | 591 | -------------------------------------------------------------------------------- /faces/JC.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/selfthinker/CSS-Playing-Cards/7e0e0f2c6149f67100f4a1e62fa03da2604310fa/faces/JC.gif -------------------------------------------------------------------------------- /faces/JD.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/selfthinker/CSS-Playing-Cards/7e0e0f2c6149f67100f4a1e62fa03da2604310fa/faces/JD.gif -------------------------------------------------------------------------------- /faces/JH.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/selfthinker/CSS-Playing-Cards/7e0e0f2c6149f67100f4a1e62fa03da2604310fa/faces/JH.gif -------------------------------------------------------------------------------- /faces/JS.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/selfthinker/CSS-Playing-Cards/7e0e0f2c6149f67100f4a1e62fa03da2604310fa/faces/JS.gif -------------------------------------------------------------------------------- /faces/KC.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/selfthinker/CSS-Playing-Cards/7e0e0f2c6149f67100f4a1e62fa03da2604310fa/faces/KC.gif -------------------------------------------------------------------------------- /faces/KD.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/selfthinker/CSS-Playing-Cards/7e0e0f2c6149f67100f4a1e62fa03da2604310fa/faces/KD.gif -------------------------------------------------------------------------------- /faces/KH.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/selfthinker/CSS-Playing-Cards/7e0e0f2c6149f67100f4a1e62fa03da2604310fa/faces/KH.gif -------------------------------------------------------------------------------- /faces/KS.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/selfthinker/CSS-Playing-Cards/7e0e0f2c6149f67100f4a1e62fa03da2604310fa/faces/KS.gif -------------------------------------------------------------------------------- /faces/QC.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/selfthinker/CSS-Playing-Cards/7e0e0f2c6149f67100f4a1e62fa03da2604310fa/faces/QC.gif -------------------------------------------------------------------------------- /faces/QD.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/selfthinker/CSS-Playing-Cards/7e0e0f2c6149f67100f4a1e62fa03da2604310fa/faces/QD.gif -------------------------------------------------------------------------------- /faces/QH.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/selfthinker/CSS-Playing-Cards/7e0e0f2c6149f67100f4a1e62fa03da2604310fa/faces/QH.gif -------------------------------------------------------------------------------- /faces/QS.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/selfthinker/CSS-Playing-Cards/7e0e0f2c6149f67100f4a1e62fa03da2604310fa/faces/QS.gif -------------------------------------------------------------------------------- /faces/README: -------------------------------------------------------------------------------- 1 | These images were adjusted from: 2 | 3 | SVG-cards [http://svg-cards.sourceforge.net/] 4 | by David Bellot 5 | under LGPL [http://www.gnu.org/licenses/lgpl-2.1.html] 6 | -------------------------------------------------------------------------------- /faces/joker.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/selfthinker/CSS-Playing-Cards/7e0e0f2c6149f67100f4a1e62fa03da2604310fa/faces/joker.gif --------------------------------------------------------------------------------