CSS Playing Cards

Entreprises > Webmaster
2
2012-01-31 14:03:26
Compare various techniques for creating playing cards purely with (X)HTML and CSS.
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
Site webhttp://www.brainjar.com/css/cards/http://legitimatesounding.com/blog/XHTML_CSS_Playing_Cards.htmlhttp://htmyell.com/creating-playing-cards-with-css-html/http://dribbble.com/shots/37568-CSS-Playing-Cardshttp://selfthinker.github.com/CSS-Playing-Cards/http://sixrevisions.com/css/css3-card-trick-a-fun-css3-experiment/http://www.yaus.com/jeff/2009/07/23/css-cards/http://www.pancakeseven.com/pokerhandrankings/http://zachwaugh.com/helveticards/index.htmlhttp://www.lpto.net/css3/cards/card_game.html
LicenseGPL 2©©©CC BY-SA©CC BY-NC-SA©©©
Capture d'écran
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
Fonctionnalités
whole deckOuiOui * not provided, but easily extensibleNonOui * not provided, but easily extensibleOuiNonOuiOuiOuiOui
backOuiNonNonNonOuiNonOuiNonNonOui
jokerNonNonNonNonOuiNonOuiNonNonOui
facesOuiNonNonNonOuiNonOuiNonNonNon
several suits on cardOuiNonNonOuiOuiNonOuiNonOuiNon
four coloursNonNonNonNonOuiNonNonNonNonOui
Autre
Rating3.0 1 note2.0 1 note3.0 2 notes2.0 1 note4.0 1 note2.0 1 note4.0 1 note2.0 1 note2.0 1 note2.0 1 note
Mis à jour2012-01-31 14:03:262011-09-23 00:58:382012-01-31 13:58:182011-09-23 00:58:382011-09-23 00:58:382011-09-23 00:58:382011-09-23 00:58:382011-09-23 00:58:382011-09-23 00:58:382012-01-31 13:39:40
Inclure

Commentaires

Laisser un commentaire

Créer des tableaux comparatifs ou listes sur tout !

C'est gratuit et rapide de créer des tableaux originaux

Créer un tableau