Internet - CSS Comandos

CSS - Aplicação Carta de Baralho
HTML = >  ♣  
HTML = >  ♦
HTML = >   ♥
HTML = >  ♠

<div class="card_rel">
  <div class="front">
    <div class="spotA1">&clubs;</div>
    <div class="spotA2">&clubs;</div>
    <div class="spotA4">&clubs;</div>
    <div class="spotA5">&clubs;</div>
    <div class="spotB2">&clubs;</div>
    <div class="spotB4">&clubs;</div>
    <div class="spotC1">&clubs;</div>
    <div class="spotC2">&clubs;</div>
    <div class="spotC4">&clubs;</div>
    <div class="spotC5">&clubs;</div>
  </div>
</div>

9
<div class="card_rel">
  <div class="front red">
    <div class="index">9<br />&hearts;</div>

    <div class="spotA1">&hearts;</div>
    <div class="spotA2">&hearts;</div>
    <div class="spotA4">&hearts;</div>
    <div class="spotA5">&hearts;</div>

    <div class="spotB3">&hearts;</div>

    <div class="spotC1">&hearts;</div>
    <div class="spotC2">&hearts;</div>
    <div class="spotC4">&hearts;</div>
    <div class="spotC5">&hearts;</div>
  </div>
</div>

4
6
10

<div style="position:relative; margin-top: 0em;">


<div class="card" style="left:0em;top:0em; z-index: 0">
  <div class="front">
    <div class="index">4<br />&spades;</div>

    <div class="spotA1">&spades;</div>
    <div class="spotA5">&spades;</div>

    <div class="spotC1">&spades;</div>
  <div class="spotC5">&spades;</div>
</div>
</div>


<div class="card" style="left:1em;top:1em; z-index: 0" >
  <div class="front red">
    <div class="index">6<br />&diams;</div>

    <div class="spotA1">&diams;</div>
    <div class="spotA3">&diams;</div>
    <div class="spotA5">&diams;</div>

    <div class="spotC1">&diams;</div>
    <div class="spotC3">&diams;</div>
    <div class="spotC5">&diams;</div>
  </div>
</div>

</div>


Q
J
K

<div style="position:relative; margin-top: 0em;">

  <div class="card" style="left:0em;top:0em; z-index: 0">
    <div class="front red">

    <div class="index">K<br />&hearts;</div>
    <img class="face" src="king.gif" alt="" />
    <div class="spotA1">&hearts;</div>
    <div class="spotC5">&hearts;</div>

  </div>
  </div>

</div>

<div class="card_rel">
<div class="front" style="visibility:hidden;"></div>
</div>

 


Abrir em outra Página

.face {
border: 1px solid #000000;
position: absolute;
left: 0.60em;
top: 0.75em;
width: 2.6em;
height: 4.0em;
}
.card_rel {
background-image: url("fundo_carta_azul.jpg");
border-color: #808080 #000000 #000000 #808080;
border-width: 1px;
border-style: solid;
color: #000000;
font-size: 20pt;
position: relative;
width: 3.75em;
height: 5.45em;
}

.espaco {
margin: 0 auto 50px;
padding: 0 40px;
}
.card {
background-image: url("fundo_carta_azul.jpg");
border-color: #808080 #000000 #000000 #808080;
border-width: 1px;
border-style: solid;
color: #000000;
font-size: 20pt;
position: absolute;
width: 3.75em;
height: 5.45em;
}


.red { color: #ff0000; }
.front_rel {
background-color: #ffffff;
color: #000000;
position: relative;
width: 100%;
height: 100%;
}
.front {
background-color: #ffffff;
color: #000000;
position: absolute;
width: 100%;
height: 100%;
}
.topo {
box-shadow: 0 0 5px 2px rgba(0,0,0,0.6);
padding: 15px 0;
width: 100%;
position: fixed;
background-color:#000033;
top: 0; left: 0;
text-align: left;
font-weight: bold;
font-family: arial, verdana, sans-serif;
z-index: 100;
color:#FFFFFF;
}
.spotA1 { position: absolute; left: 0.60em; top: 0.5em; }
.spotA2 { position: absolute; left: 0.60em; top: 1.5em; }
.spotA3 { position: absolute; left: 0.60em; top: 2.0em; }
.spotA4 { position: absolute; left: 0.60em; top: 2.5em; }
.spotA5 { position: absolute; left: 0.60em; top: 3.5em; }

.spotB1 { position: absolute; left: 1.55em; top: 0.5em; }
.spotB2 { position: absolute; left: 1.55em; top: 1.0em; }
.spotB3 { position: absolute; left: 1.55em; top: 2.0em; }
.spotB4 { position: absolute; left: 1.55em; top: 3.0em; }
.spotB5 { position: absolute; left: 1.55em; top: 3.5em; }

.spotC1 { position: absolute; left: 2.50em; top: 0.5em; }
.spotC2 { position: absolute; left: 2.50em; top: 1.5em; }
.spotC3 { position: absolute; left: 2.50em; top: 2.0em; }
.spotC4 { position: absolute; left: 2.50em; top: 2.5em; }
.spotC5 { position: absolute; left: 2.50em; top: 3.5em; }
.index {
font-size: 50%;
font-weight: bold;
text-align: center;
position: absolute;
left: 0.25em;
top: 0.25em;
}

 

* O conteúdo desta aula tem como referência o trabalho de Mauricio Samy Silva:
http://www.maujor.com/tutorial/baralho-a.php
http://www.maujor.com/tutorial/apoio_baralho/demo.html