Compare Sizes
Register
English 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
Sito webbrainjar.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>
Criteri
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
Osservazionifrom 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
Caratteristiche
whole deck * not provided, but easily extensibleNo * not provided, but easily extensibleNo
backNoNoNoNoNoNo
jokerNoNoNoNoNoNoNo
facesNoNoNoNoNoNoNo
several suits on cardNoNoNoNoNo
four coloursNoNoNoNoNoNoNoNo
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
Aggiornato2012-01-31 14:03:262011-09-23 00:58:382012-01-31 13:58:182011-09-23 00:58:382021-01-27 20:22:082011-09-23 00:58:382021-01-27 20:25:592021-01-27 20:26:482011-09-23 00:58:382012-01-31 13:39:40
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
2021-01-27 20:26:48
View changes
Manage backups

User reviews and comments