Comparateur de taille
S'inscrire
English Español

CSS Playing Cards

4
Compare various techniques for creating playing cards purely with (X)HTML and CSS.
Lien
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 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©©©
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>
Critères
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
Remarquesfrom 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
Rating
3.0/5 1 note
2.0/5 1 note
3.0/5 2 notes
2.0/5 1 note
4.0/5 1 note
2.0/5 1 note
4.0/5 1 note
2.0/5 1 note
2.0/5 1 note
2.0/5 1 note
Mis à jour31 jan. 2012 14:03:2623 sep. 2011 00:58:3831 jan. 2012 13:58:1823 sep. 2011 00:58:3827 jan. 2021 20:22:0823 sep. 2011 00:58:3827 jan. 2021 20:25:5927 jan. 2021 20:26:4823 sep. 2011 00:58:3831 jan. 2012 13:39:40
Inclure
Compare various techniques for creating playing cards purely with (X)HTML and CSS.
Icon by Alessandro Rei (GPL-licensed) from: iconfinder.com/...
Webmaster
English
Publique
Publique
27 jan. 2021 20:26:48
Voir les modifications
Gérer les sauvegardes

Avis utilisateurs et commentaires