Compare Sizes
Register
Français Español

CSS Playing Cards

4
Compare various techniques for creating playing cards purely with (X)HTML and CSS.
Link
Cards by Mike HallCards by Jerry SievertCards by Jamie TaylorCards by Kevin ThompsonCards by Anika HenkeCards by Alexander DawsonCards by Jeff YausCards by Thorsten BeeckCards by Zach WaughCards by Tayo Wegner
Websitebrainjar.com/...legitimatesounding.com/...htmyell.com/...dribbble.com/...github.com/...sixrevisions.com/...zachwaugh.com/...lpto.net/...
LicenseGPL 2©©©CC BY-SA©CC BY-NC-SA©©©
Screenshot
HTML code (example)
<div class="card">
  <div class="front">
    <div class="index">7<br />&spades;</div>
    <div class="spotA1">&spades;</div>
    <div class="spotA3">&spades;</div>
    <div class="spotA5">&spades;</div>
    <div class="spotB2">&spades;</div>
    <div class="spotC1">&spades;</div>
    <div class="spotC3">&spades;</div>
    <div class="spotC5">&spades;</div>
  </div>
</div>
<div id="card1" class="black card">
  <div class="top number">7</div>
  <div class="top undersuit">&spades;</div>
  <div class="suit">&spades;</div>
  <div class="bottom number">7</div>
</div>
<div class="outline shadow rounded">
  <div class="top">
    <span>7</span>
    <span>&spades;</span>
  </div>
  <h1>&spades;<h1>
  <div class="bottom">
    <span>&spades;</span>
    <span>7</span>
  </div>
</div>
<div class="card seven spades">
  <span class="suit"></span>
  <span class="symbol"></span>
  <span class="symbol"></span>
  <span class="symbol"></span>
  <span class="symbol"></span>
  <span class="symbol"></span>
  <span class="symbol"></span>
  <span class="symbol"></span>
</div>
<div class="card rank-7 spades">
  <span class="rank">7</span>
  <span class="suit">&spades;</span>
</div>
<fieldset id="spades">
  <input class="card" id="spade" />
  <label class="base" for="spade">
    <span>
      <em>7</em>
      &spades;
    </span>
    <strong>&spades;</strong>
    <em>7</em>
    &spades;
  </label>
</fieldset>
<div class="card spades v7">
  <span></span>
  <p>7S</p>
</div>
<article>
  <div class="number_black">7</div>
  <div class="smallsymbol_black">&spades;</div>
  <div class="bigsymbol_black">&spades;</div>
  <div class="smallsymbol_black_rotate">&spades;</div>
  <div class="number_black_rotate">7</div>
</article>
<div class="card seven">
  <div class="corner top">
    <span class="number">7</span>
    <span>&#9824;</span>
  </div>
  <span class="suit top_left">&#9824;</span>
  <span class="suit top_right">&#9824;</span>
  <span class="suit middle_left">&#9824;</span>
  <span class="suit middle_top">&#9824;</span>
  <span class="suit middle_right">&#9824;</span>
  <span class="suit bottom_left">&#9824;</span>
  <span class="suit bottom_right">&#9824;</span>
  <div class="corner bottom">
    <span class="number">7</span>
    <span>&#9824;</span>
  </div>
</div>
<div id="spades">
    <div class="black" id="card1">
        <p class="topleft">7<br />&#9824;</p>
        <h1 class="center">&#9824;</h1>
        <p class="bottomright">7<br />&#9824;</p>
    </div>
</div>
Criteria
semantics2 of 53 of 51 of 54 of 55 of 51 of 55 of 51 of 52 of 53 of 5
accessibility2 of 53 of 52 of 51 of 55 of 52 of 54 of 53 of 52 of 52 of 5
Scalability5 of 52 of 51 of 54 of 54 of 51 of 55 of 52 of 52 of 52 of 5
amount of markup1 of 53 of 52 of 51 of 54 of 52 of 55 of 53 of 51 of 53 of 5
beauty3 of 51 of 54 of 55 of 54 of 55 of 52 of 54 of 54 of 54 of 5
Notesfrom 2001, not easy to develop withnot meant to be used in a production environmentno cards visible in IE8 (only white background)no overlapping in IE8not meant to be used in a production environmentbuggy in Operaa bit buggy in Opera, very buggy in IEnot easy to develop with
Features
whole deckYesYes * not provided, but easily extensibleNoYes * not provided, but easily extensibleYesNoYesYesYesYes
backYesNoNoNoYesNoYesNoNoYes
jokerNoNoNoNoYesNoYesNoNoYes
facesYesNoNoNoYesNoYesNoNoNo
several suits on cardYesNoNoYesYesNoYesNoYesNo
four coloursNoNoNoNoYesNoNoNoNoYes
Additional
Rating
3.0/5 1 rating
2.0/5 1 rating
3.0/5 2 ratings
2.0/5 1 rating
4.0/5 1 rating
2.0/5 1 rating
4.0/5 1 rating
2.0/5 1 rating
2.0/5 1 rating
2.0/5 1 rating
Last updateJan. 31st 2012 2:03:26 PMSep. 23rd 2011 12:58:38 AMJan. 31st 2012 1:58:18 PMSep. 23rd 2011 12:58:38 AMJan. 27th 2021 8:22:08 PMSep. 23rd 2011 12:58:38 AMJan. 27th 2021 8:25:59 PMJan. 27th 2021 8:26:48 PMSep. 23rd 2011 12:58:38 AMJan. 31st 2012 1:39:40 PM
Embed
Compare various techniques for creating playing cards purely with (X)HTML and CSS.
Icon by Alessandro Rei (GPL-licensed) from: iconfinder.com/...
Webmaster
English
Public
Public
Jan. 27th 2021 8:26:48 PM
View changes
Manage backups

User reviews and comments