...il codice era troppo lungo per un unico post, quindi ho dovuto dividerlo. Unire questo a quello sul precedente post
codice:
<body>
   <h1>Pure CSS Flip French Playing Cards</h1>
   <div class="table">
      <div class="deck">

             <input type="checkbox"><u class="hA"></u><b>
         </b><input type="checkbox"><u class="h2"></u><b>
         </b><input type="checkbox"><u class="h3"></u><b>
         </b><input type="checkbox"><u class="h4"></u><b>
         </b><input type="checkbox"><u class="h5"></u><b>
         </b><input type="checkbox"><u class="h6"></u><b>
         </b><input type="checkbox"><u class="h7"></u><b>
         </b><input type="checkbox"><u class="h8"></u><b>
         </b><input type="checkbox"><u class="h9"></u><b>
         </b><input type="checkbox"><u class="h10"></u><b>
         </b><input type="checkbox"><u class="hJ"></u><b>
         </b><input type="checkbox"><u class="hQ"></u><b>
         </b><input type="checkbox"><u class="hK"></u><b>
         </b><!--
          --><input type="checkbox"><u class="cA"></u><b>
         </b><input type="checkbox"><u class="c2"></u><b>
         </b><input type="checkbox"><u class="c3"></u><b>
         </b><input type="checkbox"><u class="c4"></u><b>
         </b><input type="checkbox"><u class="c5"></u><b>
         </b><input type="checkbox"><u class="c6"></u><b>
         </b><input type="checkbox"><u class="c7"></u><b>
         </b><input type="checkbox"><u class="c8"></u><b>
         </b><input type="checkbox"><u class="c9"></u><b>
         </b><input type="checkbox"><u class="c10"></u><b>
         </b><input type="checkbox"><u class="cJ"></u><b>
         </b><input type="checkbox"><u class="cQ"></u><b>
         </b><input type="checkbox"><u class="cK"></u><b>
         </b><!--
          --><input type="checkbox"><u class="dA"></u><b>
         </b><input type="checkbox"><u class="d2"></u><b>
         </b><input type="checkbox"><u class="d3"></u><b>
         </b><input type="checkbox"><u class="d4"></u><b>
         </b><input type="checkbox"><u class="d5"></u><b>
         </b><input type="checkbox"><u class="d6"></u><b>
         </b><input type="checkbox"><u class="d7"></u><b>
         </b><input type="checkbox"><u class="d8"></u><b>
         </b><input type="checkbox"><u class="d9"></u><b>
         </b><input type="checkbox"><u class="d10"></u><b>
         </b><input type="checkbox"><u class="dJ"></u><b>
         </b><input type="checkbox"><u class="dQ"></u><b>
         </b><input type="checkbox"><u class="dK"></u><b>
         </b><!--
          --><input type="checkbox"><u class="sA"></u><b>
         </b><input type="checkbox"><u class="s2"></u><b>
         </b><input type="checkbox"><u class="s3"></u><b>
         </b><input type="checkbox"><u class="s4"></u><b>
         </b><input type="checkbox"><u class="s5"></u><b>
         </b><input type="checkbox"><u class="s6"></u><b>
         </b><input type="checkbox"><u class="s7"></u><b>
         </b><input type="checkbox"><u class="s8"></u><b>
         </b><input type="checkbox"><u class="s9"></u><b>
         </b><input type="checkbox"><u class="s10"></u><b>
         </b><input type="checkbox"><u class="sJ"></u><b>
         </b><input type="checkbox"><u class="sQ"></u><b>
         </b><input type="checkbox"><u class="sK"></u><b>
         </b>

      </div>
   </div>
</body>

</html>
Qui un mio esempio su CodePen: https://codepen.io/OpenDec/pen/pdLpVL

In questo esempio il contenuto di ogni singola carta è definito attraverso il CSS.
Applicando una specifica classe all'elemento <u> (che identifica la parte frontale della carta) sarà costruita, da CSS, la relativa grafica.

Il nome della classe è composto da una lettera minuscola iniziale che identifica il seme: h = hearts (cuori), c = clubs (fiori), d = diamonds (quadri), s = spades (picche).
La seconda parte invece identifica il valore: A (asso), 2, 3, 4, 5, 6, 7, 8, 9, 10, J (fante), Q (regina), K (re).
Non ho incluso il Jolly (la matta) ma ovviamente chi volesse potrà provare a crearsi le proprie carte personalizzate.

In linea di massima, tutta la grafica delle varie carte è creata da CSS attraverso gli pseudo-elementi ::before e ::after, e la relativa proprietà content.
All'interno del content sono usati dei codici carattere per identificare i 4 semi (\2665 = ♥, \2663 = ♣, \2666 = ♦, \2660 = ♠) e altri caratteri particolari come il ritorno a capo (\a) per impilare i vari simboli in modo da ricreare opportunamente la grafica per ogni specifica carta.

Potrebbe essere anche possibile utilizzare font personalizzati in cui sono riportate le intere figure delle varie carte. In quel caso basterebbe un singolo carattere per definire e mostrare l'intera grafica della singola carta. In questo esempio però ho voluto "costruire" interamente la grafica in modo personalizzato.

Da tenere presente che per il testo (compresi i simboli dei semi, che si possono trovare anche in un normale carattere di sistema) ho usato un font google, incluso opportunamente col tag <link> nell'<head>.