[pillola mini tutorial] Animazione carte da gioco con effetto flip - pure CSS

**KillerWorm** · 23-11-2017, 02:54

Discussione inserita tra le pillole dei link utili CSS

Questo è il remake, con descrizioni e codici aggiornati, di una vecchia pillola. La ripropongo come nuova discussione perché quella vecchia non voleva saperne di essere editata.

Si tratta di qualche snippet in puro CSS/HTML, utilizzabile per creare delle carte da gioco che al click vengono animate con un effetto flip. Il tutto utilizzando qualche proprietà CSS3 per la gestione del 3D.

Chiaramente non c'è nulla di nuovo, con qualche googleata è possibile trovare svariato materiale a riguardo.
Giusto qualche link:
https://davidwalsh.name/css-flip
http://www.gleenk.com/realizzare-una...rd-con-i-css3/
https://24ways.org/2010/intro-to-css-3d-transforms/
http://css3.bradshawenterprises.com/flip/

Ciò che ho voluto fare di diverso è una migliore elaborazione del design, cercando di dare un aspetto realistico (giocando con transizioni, luci e ombre), e dare la possibilità di organizzare una serie di carte come fossero disposte sopra un tavolo da gioco, pronte da girare e rigirare cliccandoci sopra; il tutto in puro CSS, niente JavaScript.

Qui un primo snippet di base in cui è possibile personalizzare i contenuti delle carte modificando direttamente la parte html:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Pure CSS Flip Playing Cards - Custom Text</title>
    <meta charset="utf-8">
    <style type="text/css">
      /* --- MAIN --- */

      body {
         background: #000408;
         text-align: center;
      }

      h1 {
         position: relative;
         font: bolder 22px/30px "Arial Black", Gadget, sans-serif;
         color: #fff;
         z-index: 1;
      }

      .table {
         position: relative;
         width: 650px;
         height: 480px;
         background: #0470d2;
         background: linear-gradient(#039cfc, #053fa0);
         margin: 0 auto;
         padding: 18px 18px 30px;
         display: table;
         line-height: 0;
         border-radius: 15px;
         box-sizing: border-box;
         box-shadow: 1px 1px 4px 1px rgba(255, 250, 255, .5) inset, -1px -1px 4px 1px #002 inset, 3px 3px 80px 15px #000;
      }

      .deck {
         display: table-cell;
         vertical-align: middle;
      }

      /* --- CARD SETTINGS --- */

      .deck>input,
      .deck>u,
      .deck>b {
         width: 86px;
         height: 129px;
         position: relative;
      }

      .deck>input {
         margin: 0 5px 10px;
         z-index: 999;
         cursor: pointer;
         opacity: 0;
      }

      .deck>u,
      .deck>b {
         left: -5px; /* Subtract margin value */
         margin-left: -86px; /* Subtract width value */
         display: inline-block;
         text-align: center;
         vertical-align: top;
         border: 5px solid #f8fff9;
         box-sizing: border-box;
         border-radius: 8px;
         -webkit-user-select: none;
            -moz-user-select: none;
             -ms-user-select: none;
                 user-select: none;
      }

      /* --- FRONT CONTENT --- */

      .deck>u{
         background: #f8fff9;
         text-decoration: none;
         font: italic 12px Arial, Helvetica, sans-serif;
         color: grey;
      }
      
      .deck>u::first-line{
         font: 50px/70px Arial, Helvetica, sans-serif;
         color: orange;
      }

      .deck>u>b {
         font: bold 14px "Comic Sans MS", cursive, sans-serif;
         color: teal;
         display: block;
         margin-top: -10px;
      }

      /* --- BACK CONTENT --- */

      .deck>b {
         background: #ebe119;
         background: linear-gradient(#fede1e, #dabb1e);
      }

      .deck>b::before,
      .deck>b::after {
         content: '';
         display: block;
         position: absolute;
         right: 0;
         left: 0;
         top: 0;
         bottom: 0;
         background: url('http://forum.html.it/forum/images/statusicon/forum_new-48.png') center/36px;
         border-radius: inherit;
         opacity: .2;
      }

      .deck>b::after {
         background-position: calc(50% + 18px) calc(50% + 18px);
      }

      /* --- ANIMATION AND 3D SETTINGS --- */

      .deck {
         perspective: 1450px;
      }

      .deck>u,
      .deck>b {
         transition: all .8s;
         backface-visibility: hidden;
         transform-style: preserve-3d;
         z-index: 0;
      }

      .deck>input:checked + u,
      .deck>input:checked + u + b {
         z-index: 100;
      }

      .deck>input:focus + u,
      .deck>input:focus + u + b {
         transition-property:  transform, filter, box-shadow; /* Exclude z-index to immediately overlay */
         outline: 0;
         z-index: 900;
      }

      /* --- FRONT ANIMATION --- */

      .deck>u {
         transform: translateX(160%) rotateY(-180deg);
         transform-origin: -30% center;
         box-shadow: 130px 30px 40px -20px rgba(0, 0, 0, 0);
         filter: brightness(3);
      }

      .deck>input:checked + u {
         transform: translateX(0%) rotateY(0deg);
         box-shadow: 1px 1px 2px rgba(0, 0, 0, .4);
         filter: brightness(1);
      }

      /* --- BACK ANIMATION --- */

      .deck>b {
         transform: translateX(0%) rotateY(0deg);
         transform-origin: 130% center;
         box-shadow: 1px 1px 2px rgba(0, 0, 0, .4);
         filter: brightness(1);
      }

      .deck>input:checked + u + b {
         transform: translateX(-160%) rotateY(180deg);
         box-shadow: 80px 10px 20px -40px rgba(0, 0, 0, 0);
         filter: brightness(0);
      }

      /* Edge hack - Prevent click during transition, otherwise the animation breaks */

      @supports (-ms-ime-align:auto) {
         .deck>input {
            animation: step-end .8s; // Time is the same as the main transition
         }
         .deck>u,
         .deck>b {
            cursor: pointer;
         }

         .deck>input:checked {
            animation-name: noclick1;
         }

         .deck>input:not(:checked) {
            animation-name: noclick2;
         }

         @keyframes noclick1 {
            0%   { visibility: hidden; }
            100% { visibility: visible; }
         }

         @keyframes noclick2 {
            0%   { visibility: hidden; }
            100% { visibility: visible; }
         }
      }
    </style>
  </head>
  <body>
   <h1>Pure CSS Flip Playing Cards<br><small>Custom Text</small></h1>
   <div class="table">
      <div class="deck">

             <input type="checkbox"><u>☼<b>SUN</b>clear</u><b>
         </b><input type="checkbox"><u>☺<b>SMILE</b>happy</u><b>
         </b><input type="checkbox"><u>♫<b>NOTE</b>music</u><b>
         </b><input type="checkbox"><u>♥<b>HEART</b>love</u><b>
         </b>

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

Qui un mio esempio su CodePen: https://codepen.io/OpenDec/pen/dZmdYM

Testato su attuali versioni di CH (62), FF (57) e Edge (40).

Il tutto è inglobato dentro un primo contenitore .table, dove è definita la grafica del piano di gioco, e un contenitore generale deck che, in sostanza, contiene le carte disposte sul tavolo.

Il sistema di interazione e animazione avviene tramite dei checkbox e la loro proprietà checked. Quando la carta è scoperta (girata con la parte frontale visibile) il checkbox risulta :checked. Il css si appoggia su questo comportamento per cui, cliccando sulle singole carte, avviene un "toggle" con effetto "flip", cioè un'animazione di ribaltamento della carta, la quale può essere rigirata cliccandoci nuovamente sopra.

A seguire l'elemento checkbox ci sono due elementi,  e  posti uno di seguito all'altro, che identificano rispettivamente fronte e retro della carta. Dentro l'elemento  (fronte) è quindi possibile inserire, per ogni singola carta, i contenuti che saranno mostrati sulla parte frontale, quando la carta è scoperta; mentre la grafica del retro sarà impostata, per l'elemento , con qualche regola CSS (uguale per tutte le carte).

Da notare che ho utilizzato questi due tag per una semplice questione di "sinteticità" del codice. In teoria si potrebbero anche utilizzare due semplici , come contenitori generici, anziché utilizzare degli elementi che, nello specifico, nascono per la formattazione del testo. In questo caso, però, ho preferito ottenere un codice più stringato. Ad ogni modo tutto il codice qui proposto risulta essere validato.

I due elementi  e  sono resi, tramite CSS, come inline-block (mentre di norma sono inline), quindi dimensionati e riposizionati (assieme al checkbox) in modo da sovrapporsi l'uno con l'altro creando "virtualmente" un oggetto unico per ogni singola carta.

Da tenere presente che gli elementi inline-block (come quelli inline) seguono il flusso del testo. Per questo, se tra l'uno e l'altro fossero presenti degli spazi (come caratteri testuali), il browser li terrebbe in considerazione distanziando, appunto, gli elementi tra loro. Questo potrebbe creare degli "errori" inattesi sul posizionamento; per evitare quindi che si presentino degli spazi non voluti (sia tra gli elementi di una singola carta sia tra le diverse carte), è necessario disporre tutti gli elementi uno accanto all'altro, senza lasciare ne spazi ne caratteri di ritorno a capo. Ecco perché sull'esempio ho usato la tecnica (una tra varie) di portare a capo la chiusura dell'ultimo tag per ogni riga, così che questi risultino attaccati l'uno con l'altro.

L'aspetto dei contenuti delle carte è gestito dal css nella parte sotto il commento "--- FRONT CONTENT ---".

In questo esempio ho voluto usare delle "icon font" adoperando semplicemente i simboli grafici disponibili sul font di sistema. E' comunque possibile usare un qualsiasi font, anche font personalizzati incorporati sulla pagina, per avere diverse altre icone.

Oltre l'icona è possibile definire un testo/titolo (che potrebbe identificare, ad esempio, il nome della figura, come nell'esempio) da inserire tra i tag  (quelli dentro ) e un ulteriore testo in cui specificare qualcos'altro.

**KillerWorm** · 23-11-2017, 02:54

Altro esempio. Qui ho voluto provare a creare un mazzo completo di comuni carte da gioco francesi:

codice:

<!DOCTYPE HTML>
<html>

<head>
   <title>Pure CSS Flip French Playing Cards</title>
   <meta charset="utf-8">
   <link href='https://fonts.googleapis.com/css?family=Marvel:700' rel='stylesheet' type='text/css'>
   <style type="text/css">
      /* --- MAIN --- */

      body {
         background: #000408;
         text-align: center;
      }

      h1 {
         position: relative;
         font: bolder 22px/30px "Arial Black", Gadget, sans-serif;
         color: #fff;
         z-index: 1;
      }

      .table {
         position: relative;
         width: 1230px;
         background: #082;
         background: linear-gradient(#093, #082, #070);
         margin: 0 auto;
         padding: 18px 18px 30px;
         display: table;
         line-height: 0;
         border-radius: 15px;
         box-sizing: border-box;
         box-shadow: 1px 1px 4px 1px rgba(255, 250, 255, .5) inset, -1px -1px 4px 1px #002 inset, 3px 3px 80px 15px #000;
      }

      .deck {
         display: table-cell;
         vertical-align: middle;
      }

      /* --- CARD SETTINGS --- */

      .deck>input,
      .deck>u,
      .deck>b {
         width: 84px;
         height: 126px;
         position: relative;
      }

      .deck>input {
         margin: 0 5px 10px;
         z-index: 999;
         cursor: pointer;
         opacity: 0;
      }

      .deck>u,
      .deck>b {
         left: -5px; /* Subtract margin value */
         margin-left: -86px; /* Subtract width value */
         display: inline-block;
         text-align: center;
         vertical-align: top;
         border-radius: 8px;
         -webkit-user-select: none;
            -moz-user-select: none;
             -ms-user-select: none;
                 user-select: none;
      }

      /* --- FRONT CONTENT --- */

      .deck>u{
         background: #f8fff9;
         text-decoration: none;
         font-size: 16px;
      }

      .deck>u::before,
      .deck>u::after {
         position: absolute;
         display: block;
         font-family: Marvel, "Trebuchet MS", Helvetica, sans-serif;
      }

      .deck>u::before {
         top: 10px;
         left: 2px;
         width: 20px;
         font-size: 1.38em;
         line-height: 1em;
      }

      .deck>u::after {
         bottom: 14px;
         right: 7px;
         width: 63%;
         height: 70%;
         padding-top: 5%;
         white-space: pre;
         border: 1px solid;
         border-radius: 4px;
         overflow: hidden;
         box-sizing: border-box;
      }

      /* --- COMMON RULES FOR CARD SUIT --- */

      .deck>[class^=h],
      .deck>[class^=d]{
         color: #f21;
         border-color: #f21;
      }
      .deck>[class^=c],
      .deck>[class^=s]{
         color:#123;
         border-color: #123;
      }

      /* --- COMMON RULES FOR CARD VALUE --- */

      .deck>[class$=A]::after{font-size:4em;line-height:1.2em}
      .deck>[class$='2']::after,
      .deck>[class$='3']::after,
      .deck>[class$='4']::after,
      .deck>[class$='5']::after,
      .deck>[class$='6']::after,
      .deck>[class$='7']::after{font-size: 1.6em;line-height:.6em}
      .deck>[class$='8']::after,
      .deck>[class$='9']::after,
      .deck>[class$='0']::after{font-size: 1.6em;line-height:.2em}
      .deck>[class$=J]::after,
      .deck>[class$=Q]::after,
      .deck>[class$=K]::after{font-size:3em;line-height:.8em}

      /* Hearts */

      .deck>.hA::before{content:'A \2665'}
      .deck>.hA::after{content:'\2665';}
      .deck>.h2::before{content:'2 \2665'}
      .deck>.h2::after{content:'\2665\a\a\a\a\2665'}
      .deck>.h3::before{content:'3 \2665'}
      .deck>.h3::after{content:'\2665\a\a\2665\a\a\2665'}
      .deck>.h4::before{content:'4 \2665'}
      .deck>.h4::after{content:'\2665    \2665\a\a\a\a\2665    \2665'}
      .deck>.h5::before{content:'5 \2665'}
      .deck>.h5::after{content:'\2665    \2665\a\a\2665\a\a\2665    \2665'}
      .deck>.h6::before{content:'6 \2665'}
      .deck>.h6::after{content:'\2665    \2665\a\a\2665    \2665\a\a\2665    \2665'}
      .deck>.h7::before{content:'7 \2665'}
      .deck>.h7::after{content:'\2665    \2665\a\2665\a\2665    \2665\a\a\2665    \2665'}
      .deck>.h8::before{content:'8 \2665'}
      .deck>.h8::after{content:'\a\2665    \2665\a\a\a\a\2665    \2665\a\a\a\a\2665    \2665\a\a\a\a\2665    \2665'}
      .deck>.h9::before{content:'9 \2665'}
      .deck>.h9::after{content:'\a\2665    \2665\a\a\2665\a\a\2665    \2665\a\a\a\a\2665    \2665\a\a\a\a\2665    \2665'}
      .deck>.h10::before{content:'10 \2665'}
      .deck>.h10::after{content:'\a\2665    \2665\a\a\2665\a\a\2665    \2665\a\a\a\a\2665    \2665\a\a\2665\a\a\2665    \2665'}
      .deck>.hJ::before{content:'J \2665'}
      .deck>.hJ::after{content:'J\a\2665'}
      .deck>.hQ::before{content:'Q \2665'}
      .deck>.hQ::after{content:'Q\a\2665'}
      .deck>.hK::before{content:'K \2665'}
      .deck>.hK::after{content:'K\a\2665'}

      /* Clubs */

      .deck>.cA::before{content:'A \2663'}
      .deck>.cA::after{content:'\2663'}
      .deck>.c2::before{content:'2 \2663'}
      .deck>.c2::after{content:'\2663\a\a\a\a\2663'}
      .deck>.c3::before{content:'3 \2663'}
      .deck>.c3::after{content:'\2663\a\a\2663\a\a\2663'}
      .deck>.c4::before{content:'4 \2663'}
      .deck>.c4::after{content:'\2663    \2663\a\a\a\a\2663    \2663'}
      .deck>.c5::before{content:'5 \2663'}
      .deck>.c5::after{content:'\2663    \2663\a\a\2663\a\a\2663    \2663'}
      .deck>.c6::before{content:'6 \2663'}
      .deck>.c6::after{content:'\2663    \2663\a\a\2663    \2663\a\a\2663    \2663'}
      .deck>.c7::before{content:'7 \2663'}
      .deck>.c7::after{content:'\2663    \2663\a\2663\a\2663    \2663\a\a\2663    \2663'}
      .deck>.c8::before{content:'8 \2663'}
      .deck>.c8::after{content:'\a\2663    \2663\a\a\a\a\2663    \2663\a\a\a\a\2663    \2663\a\a\a\a\2663    \2663'}
      .deck>.c9::before{content:'9 \2663'}
      .deck>.c9::after{content:'\a\2663    \2663\a\a\2663\a\a\2663    \2663\a\a\a\a\2663    \2663\a\a\a\a\2663    \2663'}
      .deck>.c10::before{content:'10 \2663'}
      .deck>.c10::after{content:'\a\2663    \2663\a\a\2663\a\a\2663    \2663\a\a\a\a\2663    \2663\a\a\2663\a\a\2663    \2663'}
      .deck>.cJ::before{content:'J \2663'}
      .deck>.cJ::after{content:'J\a\2663'}
      .deck>.cQ::before{content:'Q \2663'}
      .deck>.cQ::after{content:'Q\a\2663'}
      .deck>.cK::before{content:'K \2663'}
      .deck>.cK::after{content:'K\a\2663'}

      /* Diamonds */

      .deck>.dA::before{content:'A \2666'}
      .deck>.dA::after{content:'\2666'}
      .deck>.d2::before{content:'2 \2666'}
      .deck>.d2::after{content:'\2666\a\a\a\a\2666'}
      .deck>.d3::before{content:'3 \2666'}
      .deck>.d3::after{content:'\2666\a\a\2666\a\a\2666'}
      .deck>.d4::before{content:'4 \2666'}
      .deck>.d4::after{content:'\2666    \2666\a\a\a\a\2666    \2666'}
      .deck>.d5::before{content:'5 \2666'}
      .deck>.d5::after{content:'\2666    \2666\a\a\2666\a\a\2666    \2666'}
      .deck>.d6::before{content:'6 \2666'}
      .deck>.d6::after{content:'\2666    \2666\a\a\2666    \2666\a\a\2666    \2666'}
      .deck>.d7::before{content:'7 \2666'}
      .deck>.d7::after{content:'\2666    \2666\a\2666\a\2666    \2666\a\a\2666    \2666'}
      .deck>.d8::before{content:'8 \2666'}
      .deck>.d8::after{content:'\a\2666    \2666\a\a\a\a\2666    \2666\a\a\a\a\2666    \2666\a\a\a\a\2666    \2666'}
      .deck>.d9::before{content:'9 \2666'}
      .deck>.d9::after{content:'\a\2666    \2666\a\a\2666\a\a\2666    \2666\a\a\a\a\2666    \2666\a\a\a\a\2666    \2666'}
      .deck>.d10::before{content:'10 \2666'}
      .deck>.d10::after{content:'\a\2666    \2666\a\a\2666\a\a\2666    \2666\a\a\a\a\2666    \2666\a\a\2666\a\a\2666    \2666'}
      .deck>.dJ::before{content:'J \2666'}
      .deck>.dJ::after{content:'J\a\2666'}
      .deck>.dQ::before{content:'Q \2666'}
      .deck>.dQ::after{content:'Q\a\2666'}
      .deck>.dK::before{content:'K \2666'}
      .deck>.dK::after{content:'K\a\2666'}

      /* Spades */

      .deck>.sA::before{content:'A \2660'}
      .deck>.sA::after{content:'\2660'}
      .deck>.s2::before{content:'2 \2660'}
      .deck>.s2::after{content:'\2660\a\a\a\a\2660'}
      .deck>.s3::before{content:'3 \2660'}
      .deck>.s3::after{content:'\2660\a\a\2660\a\a\2660'}
      .deck>.s4::before{content:'4 \2660'}
      .deck>.s4::after{content:'\2660    \2660\a\a\a\a\2660    \2660'}
      .deck>.s5::before{content:'5 \2660'}
      .deck>.s5::after{content:'\2660    \2660\a\a\2660\a\a\2660    \2660'}
      .deck>.s6::before{content:'6 \2660'}
      .deck>.s6::after{content:'\2660    \2660\a\a\2660    \2660\a\a\2660    \2660'}
      .deck>.s7::before{content:'7 \2660'}
      .deck>.s7::after{content:'\2660    \2660\a\2660\a\2660    \2660\a\a\2660    \2660'}
      .deck>.s8::before{content:'8 \2660'}
      .deck>.s8::after{content:'\a\2660    \2660\a\a\a\a\2660    \2660\a\a\a\a\2660    \2660\a\a\a\a\2660    \2660'}
      .deck>.s9::before{content:'9 \2660'}
      .deck>.s9::after{content:'\a\2660    \2660\a\a\2660\a\a\2660    \2660\a\a\a\a\2660    \2660\a\a\a\a\2660    \2660'}
      .deck>.s10::before{content:'10 \2660'}
      .deck>.s10::after{content:'\a\2660    \2660\a\a\2660\a\a\2660    \2660\a\a\a\a\2660    \2660\a\a\2660\a\a\2660    \2660'}
      .deck>.sJ::before{content:'J \2660'}
      .deck>.sJ::after{content:'J\a\2660'}
      .deck>.sQ::before{content:'Q \2660'}
      .deck>.sQ::after{content:'Q\a\2660'}
      .deck>.sK::before{content:'K \2660'}
      .deck>.sK::after{content:'K\a\2660'}

      /* --- BACK CONTENT --- */

      .deck>b {
         background: #ebe119;
         background: linear-gradient(#ebe119, #dabb1e);
         border: 5px solid #f8fff9;
         box-sizing: border-box;
      }

      .deck>b::before,
      .deck>b::after {
         content: '';
         display: block;
         position: absolute;
         right: 0;
         left: 0;
         top: 0;
         bottom: 0;
         background: url('http://forum.html.it/forum/images/statusicon/forum_new-48.png') center/36px repeat;
         border-radius: inherit;
         opacity: .2;
      }

      .deck>b::after {
         background-position: calc(50% + 18px) calc(50% + 18px);
      }

      /* --- ANIMATION AND 3D SETTINGS --- */

      .deck {
         perspective: 1450px;
      }

      .deck>u,
      .deck>b {
         transition: all .8s;
         backface-visibility: hidden;
         transform-style: preserve-3d;
         z-index: 0;
      }

      .deck>input:checked + u,
      .deck>input:checked + u + b {
         z-index: 100;
      }

      .deck>input:focus + u,
      .deck>input:focus + u + b {
         transition-property:  transform, filter, box-shadow; /* Exclude z-index to immediately overlay */
         outline: 0;
         z-index: 900;
      }

      /* --- FRONT ANIMATION --- */

      .deck>u {
         transform: translateX(160%) rotateY(-180deg);
         transform-origin: -30% center;
         box-shadow: 130px 30px 40px -20px rgba(0, 0, 0, 0);
         filter: brightness(3);
      }

      .deck>input:checked + u {
         transform: translateX(0%) rotateY(0deg);
         box-shadow: 1px 1px 2px rgba(0, 0, 0, .4);
         filter: brightness(1);
      }

      /* --- BACK ANIMATION --- */

      .deck>b {
         transform: translateX(0%) rotateY(0deg);
         transform-origin: 130% center;
         box-shadow: 1px 1px 2px rgba(0, 0, 0, .4);
         filter: brightness(1);
      }

      .deck>input:checked + u + b {
         transform: translateX(-160%) rotateY(180deg);
         box-shadow: 80px 10px 20px -40px rgba(0, 0, 0, 0);
         filter: brightness(0);
      }

      /* Edge hack - Prevent click during transition, otherwise the animation breaks */

      @supports (-ms-ime-align:auto) {
         .deck>input {
            animation: step-end .8s; // Time is the same as the main transition
         }
         .deck>u,
         .deck>b {
            cursor: pointer;
         }

         .deck>input:checked {
            animation-name: noclick1;
         }

         .deck>input:not(:checked) {
            animation-name: noclick2;
         }

         @keyframes noclick1 {
            0%   { visibility: hidden; }
            100% { visibility: visible; }
         }

         @keyframes noclick2 {
            0%   { visibility: hidden; }
            100% { visibility: visible; }
         }
      }
    </style>
</head>

segue...

**KillerWorm** · 23-11-2017, 02:54

...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  (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>.

**KillerWorm** · 23-11-2017, 02:55

Ecco un terzo e ultimo esempio.
Un set di carte dello staff attuale di questo forum. Una cosa tipo gioco di ruolo.

codice:

<!DOCTYPE HTML>
<html>

<head>
   <title>Pure CSS Flip Playing Cards - Deck of HTML.it Staff 2017</title>
   <meta charset="utf-8">
   <style type="text/css">
      /* --- MAIN --- */

      body {
         background: #000408;
         text-align: center;
      }

      h1 {
         position: relative;
         font: bolder 22px/30px "Arial Black", Gadget, sans-serif;
         color: #fff;
         z-index: 1;
      }

      .table {
         position: relative;
         width: 1230px;
         background: #8f0222;
         background: linear-gradient(#a90329, #8f0222, #6d0019);
         margin: 0 auto;
         padding: 18px 18px 30px;
         display: table;
         line-height: 0;
         border-radius: 15px;
         box-sizing: border-box;
         box-shadow: 1px 1px 4px 1px rgba(255, 250, 255, .5) inset, -1px -1px 4px 1px #002 inset, 3px 3px 80px 15px #000;
      }

      .deck {
         display: table-cell;
         vertical-align: middle;
      }

      /* --- CARD SETTINGS --- */

      .deck>input,
      .deck>u,
      .deck>b {
         width: 80px;
         height: 120px;
         position: relative;
      }

      .deck>input {
         margin: 0 5px 10px;
         z-index: 999;
         cursor: pointer;
         opacity: 0;
      }

      .deck>u,
      .deck>b {
         left: -5px; /* Subtract margin value */
         margin-left: -80px; /* Subtract width value */
         display: inline-block;
         text-align: center;
         vertical-align: top;
         border-radius: 8px;
         -webkit-user-select: none;
            -moz-user-select: none;
             -ms-user-select: none;
                 user-select: none;
      }

      /* --- FRONT CONTENT --- */

      .deck>u {
         padding: 5px;
         font: bold 11px/1 Arial, Helvetica, sans-serif;
         color: #148;
         background: #f8fff9;
         overflow: hidden;
         text-decoration: none;
         text-overflow: ellipsis;
         box-sizing: border-box;
      }

      .deck>u>img {
         display: block;
         width: 64px;
         height: 64px;
         margin: 3px auto 10px;
         background: #fff;
         background: linear-gradient(rgba(255,255,255,.8) 20%, rgba(218,218,222,.6));
         border: 1px solid #ccc;
         border-radius: 4px;
         box-sizing: border-box;
      }

      .deck>u>i {
         display: block;
         margin: 1px 4px 0;
         font: 9px/.9 Arial, Helvetica, sans-serif;
         color: #a00;
      }

      /* Special Cards */

      .deck>.platinum+u {
         background: #e5e4e2;
         background: linear-gradient(rgba(255,255,255,0) 60%,rgba(255,255,255,.5) 70%,rgba(255,255,255,1))
                   , linear-gradient(135deg, #cdcdcd 0%,#e4e4e4 50%,#ababab 51%,#f7f7f9 100%);
      }

      .deck>.gold+u {
         background: gold;
         background: linear-gradient(rgba(255,255,255,0) 60%,rgba(255,255,255,.5) 70%,rgba(255,255,255,1))
                   , linear-gradient(135deg, #fceabb,#fccd4d 50%,#f8b500 51%,#fbdf93);
      }

      /* --- BACK CONTENT --- */

      .deck>b {
         background: #ebe119;
         background: linear-gradient(#fede1e, #dabb1e);
         border: 5px solid #f8fff9;
         box-sizing: border-box;
      }

      .deck>b::before,
      .deck>b::after {
         content: '';
         display: block;
         position: absolute;
         right: 0;
         left: 0;
         top: 0;
         bottom: 0;
         background: url('http://forum.html.it/forum/images/statusicon/forum_new-48.png') center/36px;
         border-radius: inherit;
         opacity: .2;
      }

      .deck>b::after {
         background-position: calc(50% + 18px) calc(50% + 18px);
      }

      /* --- ANIMATION AND 3D SETTINGS --- */

      .deck {
         perspective: 1450px;
      }

      .deck>u,
      .deck>b {
         transition: all .8s;
         backface-visibility: hidden;
         transform-style: preserve-3d;
         z-index: 0;
      }

      .deck>input:checked + u,
      .deck>input:checked + u + b {
         z-index: 100;
      }

      .deck>input:focus + u,
      .deck>input:focus + u + b {
         transition-property:  transform, filter, box-shadow; /* Exclude z-index to immediately overlay */
         outline: 0;
         z-index: 900;
      }

      /* --- FRONT ANIMATION --- */

      .deck>u {
         transform: translateX(160%) rotateY(-180deg);
         transform-origin: -30% center;
         box-shadow: 130px 30px 40px -20px rgba(0, 0, 0, 0);
         filter: brightness(1.45);
      }

      .deck>input:checked + u {
         transform: translateX(0%) rotateY(0deg);
         box-shadow: 1px 1px 2px rgba(0, 0, 0, .4);
         filter: brightness(1);
      }

      /* --- BACK ANIMATION --- */

      .deck>b {
         transform: translateX(0%) rotateY(0deg);
         transform-origin: 130% center;
         box-shadow: 1px 1px 2px rgba(0, 0, 0, .4);
         filter: brightness(1);
      }

      .deck>input:checked + u + b {
         transform: translateX(-160%) rotateY(180deg);
         box-shadow: 80px 10px 20px -40px rgba(0, 0, 0, 0);
         filter: brightness(0);
      }

      /* Edge hack - Prevent click during transition, otherwise the animation breaks. */

      @supports (-ms-ime-align:auto) {
         .deck>input {
            animation: step-end .8s; // Time is the same as the main transition
         }
         .deck>u,
         .deck>b {
            cursor: pointer;
         }

         .deck>input:checked {
            animation-name: noclick1;
         }

         .deck>input:not(:checked) {
            animation-name: noclick2;
         }

         @keyframes noclick1 {
            0%   { visibility: hidden; }
            100% { visibility: visible; }
         }

         @keyframes noclick2 {
            0%   { visibility: hidden; }
            100% { visibility: visible; }
         }
      }
   </style>
</head>

<body>
   <h1>Pure CSS Flip Playing Cards<br><small>Deck of HTML.it Staff 2017</small></h1>
   <div class="table">
      <div class="deck">

         
             <input type="checkbox" class="platinum"><u><img alt="" src="http://forum.html.it/forum/image.php?u=15165" style="padding:8px;">HTML.it<i>the Staff</i></u><b>
         </b><input type="checkbox" class="gold"><u><img alt="" src="http://forum.html.it/forum/image.php?u=67090">Rebelia<i>Madame Centaur</i></u><b>
         </b><input type="checkbox" class="gold"><u><img alt="" src="http://forum.html.it/forum/image.php?u=25368">Andimar<i>the Grey</i></u><b>
         </b><input type="checkbox" class="gold"><u><img alt="" src="http://forum.html.it/forum/image.php?u=4000">NetKiLLeR<i>Desaparecido</i></u><b>
         </b><input type="checkbox" class="gold"><u><img alt="" src="http://forum.html.it/forum/image.php?u=7018">Saibal<i>the Executioner</i></u><b>
         </b>
         
         <br><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=64394">Alhazred<i>the Druid</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=25128">Alka<i>the Consultant</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=37766">Amvinfe<i>Suspect File</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=175069">Astro<i>We have<br>a problem!</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=499">Br1<i>the Shame</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=183553">Carlo Marangoni<i>the Wise</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=22245">Cavicchi Andrea<i>No Problemo</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=28537">Cesar<i>Free Pattern</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=10311">Ciro78<i>the Choice</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=48810">Daniele_dll<i>Political Correctness</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=67747">Darkkik<i>Clearer</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=48607">Djciko<i>Vinyl Amulet</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=30667">Electric_g<i>Nope</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=19530">Fivendra<i>Powered</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=22896">Francofait<i>a Intruder</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=20187">Habanero<i>the Honest</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=22378">Jonnym78<i>le Grand Prêtre</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=145671">K.B<i>Immunity</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=20902">Kalosjo<i>Suspension dots</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=74013">KillerWorm<i>I'm here</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=59870">LeleFT<i>Knowledge</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=130755">Lucavizzi<i>Odds</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=23595">Marketto<i>NFZ</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=2646">Memole<i>Dead Elf</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=124300">Myaku<i>Ultimate Warrior</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=14016">Olivs<i>Dark Madness</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=143929">Resian<i>Lady Red</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=97641">Rigby76<i>Burnt Earth</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=22448">Roby_72<i>Mental Immunity</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=7840">Sky<i>Senses Collision</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=77597">Sparwari<i>Optical Illusion</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=20337">SuperMiky<i>Gadget</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=107181">Teo1964<i>Infinity Loop</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=29827">Trinityck<i>Stability Theory</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=2840">Uranio<i>Missed Target</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=58291">Vincent.Zeno<i>Cryptic Code</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/image.php?u=65458">Webdemo<i>the Inventory</i></u><b>
         </b><input type="checkbox"><u><img alt="" src="http://forum.html.it/forum/images/avatars/avatar_bilancia.gif">Yassassin<i>Double Standard</i></u><b>
         </b>

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

</html>

In questo esempio ogni carta contiene un elemento <img> e del testo.
A parte avatar e nick, gli altri testi sono puramente inventati per questo esempio.

Qui un esempio analogo che ho creato su CodePen (le immagini proposte sono random): https://codepen.io/OpenDec/pen/YEYEoX

Buon divertimento

Discussione: [pillola mini tutorial] Animazione carte da gioco con effetto flip - pure CSS

Strumenti discussione

Ricerca discussione

Visualizza

[pillola mini tutorial] Animazione carte da gioco con effetto flip - pure CSS

Tag per questa discussione

Permessi di invio