SocialCompare
Link
Cards by Mike Hall
Cards by Jerry Sievert
Cards by Jamie Taylor
Cards by Kevin Thompson
Cards by Anika Henke
Cards by Alexander Dawson
Cards by Jeff Yaus
Cards by Thorsten Beeck
Cards by Zach Waugh
Cards by Tayo Wegner
Webseite
brainjar.com/...legitimatesounding.com/...htmyell.com/...dribbble.com/...github.com/...sixrevisions.com/...zachwaugh.com/...lpto.net/...
License
GPL 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>
Kriterien
semantics
2 of 53 of 51 of 54 of 55 of 51 of 55 of 51 of 52 of 53 of 5
accessibility
2 of 53 of 52 of 51 of 55 of 52 of 54 of 53 of 52 of 52 of 5
Scalability
5 of 52 of 51 of 54 of 54 of 51 of 55 of 52 of 52 of 52 of 5
amount of markup
1 of 53 of 52 of 51 of 54 of 52 of 55 of 53 of 51 of 53 of 5
beauty
3 of 51 of 54 of 55 of 54 of 55 of 52 of 54 of 54 of 54 of 5
Bemerkungen
from 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
Eigenschaften
whole deck
JaJa * not provided, but easily extensibleNeinJa * not provided, but easily extensibleJaNeinJaJaJaJa
back
JaNeinNeinNeinJaNeinJaNeinNeinJa
joker
NeinNeinNeinNeinJaNeinJaNeinNeinJa
faces
JaNeinNeinNeinJaNeinJaNeinNeinNein
several suits on card
JaNeinNeinJaJaNeinJaNeinJaNein
four colours
NeinNeinNeinNeinJaNeinNeinNeinNeinJa
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
Aktualisieren
2012-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