Cartas de baralho com CSS - 2^a. Parte

Publicado em: 27/05/2006

As classes para posicionar os naipes

As regras de estilo que definem cada uma das classes para o posicionamento dos naipes são mostradas a seguir. Novamente chamamos sua atenção para o uso de unidades em no posicionamento, de modo a que o escalonamento será feito em relação ao tamanho da fonte na DIV classe .card.

.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; }

A seguir o código de marcação com as DIVs necessárias para se criar o layout de naipes para a carta "DEZ DE PAUS".

<div class="card">
  <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>

Cores

As cartas de "OUROS" e de "COPAS" têm seus naipes na cor vermelha. Isto é facilmente conseguido com o acréscimo de mais uma regra de estilo como mostrado a seguir:

.red { color: #ff0000; }

As classes .front e .red podem ser atribuidas a uma mesma DIV para se obter os naipes vermelhos.

<div class="card">
  <div class="front red">
    <div class="spotA1">&hearts;</div>
    <div class="spotA5">&hearts;</div>
    
    <div class="spotB3">&hearts;</div>
   
    <div class="spotC1">&hearts;</div>
    <div class="spotC5">&hearts;</div>
  </div>
</div>

Ao declarar as classes .front e .red para a DIV, serão aplicadas a ela as regras de estilos escritas para as duas classes.

Ases

Você deve ter notado que deixamos de fora os ases quando tratamos das cartas do baralho. Os ases possuem um naipe na parte central da carta e de tamanho maior.

Para criar um ás usaremos um tamanho de fonte maior para o caracter do naipe. Mas, ao aumentarmos o tamanho da fonte o posicionamento definido para o naipe no centro da carta ( classe . spotB3) não mais servirá pois como já dissemos anteriormento, o posicionamento com uso da unidade em é afetado pelo tamanho da fonte.

Precisamos assim de uma nova regra de estilo para os ases. O tamanho da fonte será definido com uma porcentagem do tamanho default (que é herdado da classe .card e os valores left e top serão ajustados convenientemente.

.ace {
  font-size: 300%;
  position: absolute;
  left: 0.325em;
  top:  0.100em;
}

...

<div class="card">
  <div class="front">
    <div class="ace">&diams;</div>

  </div>
</div>

E isto resultará em um caracter para o naipe, de tamanho maior e convenientemente centrado na carta, como mostrado acima.

Índice das cartas (numeração)

Cada uma das cartas de um baralho moderno possui um índice. O número e o naipe da carta é impresso nos cantos superior esquerdo e inferior direito de cada carta, facilitando sua identificação quando as cartas são abertas em leque uma sobre as outras.

Esta é uma funcionalidade que iremos acresentar às nossas cartas, permitindo sua rápida identificação quando forem colocadas uma sobre as outras na tela. Além do mais, isto é de grande ajuda ao jogador, pois para a identificação de uma carta não será necessário ter que contar a quantidade de naipes nela impresso.

O index é impresso em cantos opostos da carta de modo a ser acessível independentemente da carta estar de cabeça para cima ou para baixo.Em uma página Web as cartas estarão sempre de cabeça para cima (assim como os textos) e desta maneira basta que o índice conste de apenas apenas um canto.

Para implementar o índice basta adicionar mais uma regra de estilo e uma tag DIV para cada carta. Novamente, font-size será especificado como uma porcentagem do tamanho default e o posicionamento será ajustado de acordo.

.index {
  font-size: 50%;
  font-weight: bold;
  text-align: center;
  position: absolute;
  left: 0.25em;
  top:  0.25em;
}

...

<div class="card">
  <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>

Acima você pode observar como o índice dá um aspecto mais real às cartas além de possibilitar a identificação delas como mostrado na figura da direita.

A seguir veremos as cartas VALETE, DAMA e REI.

[ « 1^a. Parte ] [ 3^a. Parte » ]