Cartas de baralho com CSS - 1^a. Parte

Autor: Mike Hall
URL do original: https://www.brainjar.com/css/cards/
Título original: Playing Cards with CSS
Traduzido com autorização expressa do autor

Introdução

Este exemplo demonstra uma técnica CSS para representar graficamente as cartas de um baralho em uma página Web. Uma aplicação óbvia para uso do baralho seria a de se usar JavaScript para criar um jogo de cartas tal como blackjack ou poker.

Este artigo contudo não aborda a criação do jogo e limita-se a mostrar a marcação HTML e as regras de estilo para obter o desenho das cartas do baralho. Para ver um exemplo de jogo de cartas gerado com JavaScript consulte (NT: links para artigos escritos em inglês) JavaScript Card Objects ou de uma passada em jogos Blackjack.

Ver uma página demonstração com o resultado final desta técnica.

Por que usar CSS?

O método mais simples para se representar cartas de baralho um uma página web é através do uso de uma imagem para cada carta. Isto significa que para representar as 52 cartas que compõem um baralho completo você precisará de 52 imagens. Ora, isso fará sua página bem carregada e requer uma quantidade razoável de kbites para download pelo usuário.

Você poderia tentar reduzir isto, usando uma coleção de pequenas imagens comuns às cartas e fazer uma montagem para cada carta individualmente, com a técnica de fatiamento e uso de tabelas. Contudo esta solução não é tão fácil quanto parece. Os variados layouts de cada carta complicam a construção de modelos ou grades comuns para várias cartas.

Ao contrário, o método aqui explicado, usa as propriedades de posicionamento CSS, algumas poucas tags HTML, e entidades caracteres para criar um visual realístico das cartas do baralho, com uso de um mínimo de imagens e de marcação HTML. Uma pequena imagem para a face das cartas é necessária, mas é infinitamente menor do que as imagens requeridas por outros métodos. Como você poderá constatar adiante, além de redução de kilobites, o uso de CSS lhe dará maior flexibilidade.

Elementos básicos

Usaremos alguns caracteres especiais perfeitamente reconhecidos pelo HTML standard. A seguir mostro as entidades de referência para os caracteres que representam cada um dos naipes de um baralho. A maioria dos navegadores renderiza estes caracteres corretamente.

• ♣ — marcação HTML => ♣
• ♦ — marcação HTML => ♦
• ♥ — marcação HTML => ♥
• ♠ — marcação HTML => ♠

Usar estes caracteres de texto para as cartas em lugar de imagens resulta em inúmeras vantagens. Em primeiro destaca-se a redução do tempo de dowload. A seguir considere que você pode facilmente alterar seu tamanho simplesmente mudando o tamanho da fonte. Por tratar-se de caracteres de texto são automaticamente "anti-aliased" ao contrário das imagens que retém imperfeições para variações de tamanho.

A seguir vamos estabelecer algumas regras de estilo e elementos para criar uma carta do baralho. Começamos definindo duas classes.

  .card {
  background-image: url("cardback.gif");
  border-color: #808080 #000000 #000000 #808080;
  border-width: 1px;
  border-style: solid;
  color: #000000;
  font-size: 20pt;
  position: absolute;
  width:  3.75em;
  height: 5.00em;
}

.front {
  background-color: #ffffff;
  color: #000000;
  position: absolute;
  width: 100%;
  height: 100%;
}

...

<div class="card">
  <div class="front"></div>
</div>

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

A imagem de fundo ( cardback.gif ) aplicada repetida na classe .card fará o preenchimento de toda a DIV exterior, simulando a face externa da carta. A DIV interna com a classe .front cobre completamente este fundo por default, tornando-o invisível. Contudo podemos esconder facilmente esta DIV interna definindo visibility: hidden e assim mostrar a face externa da carta, conforme mostrado abaixo à direita.

Construindo nossa marcação com uso destas duas DIVs, ficará fácil fazer a mudança de face de uma carta via script.

Notar que para ambas as DIVs deveremos definir posicionamento relativo ou absoluto. Isto tem por finalidade fazer com que as DIVs tornem-se um bloco de conteúdo para fins de referência de posicionamento absoluto dos elementos nela contidos. Notar ainda o uso de unidade em para definir larguras e alturas. Isto faz as dimensões relativas ao tamanho da fonte da classe .card. A relação largura/altura adotada, está bem próxima da realidade.

Os elementos a serem colocados na DIV interna também usaram medidas em unidade em para posicionamento. Assim, você poderá alterar o tamanho de fonte font-size da classe .card e todos os elementos que constituem a carta serão escalonados e posicionados de acordo.

Construção das cartas

Vamos agora adicionar elementos na DIV de classe .front para construir as cartas individualmente .

Colocando os naipes

Se você observar as faces das cartas de uma baralho desde o ÁS até o DEZ (ver demo), você notará como os naipes são dispostos na carta.

Veja abaixo as cartas de DOIS a SEIS. Os naipes nestas cartas são colocados em uma grade de 3 x 3, como mostrado.

As cartas SETE e OITO usam a mesma grade nas duas colunas externas, mas há uma pequena varição na posição na coluna central. Na coluna central os naipes não estão alinhados horizontalmente e sim um pouco mais abaixo daqueles nas colunas externas.

As cartas NOVE e DEZ usam quatro linhas e três colunas (grade de 3 x 4) igualmente espaçadas. A carta NOVE tem um naipe no centro da coluna central e a carta DEZ usa uma coluna central com posicionamento igual àquele usado nas cartas SETE e OITO.

Conclusão: estas configurações mostradas resultam em 15 diferentes posições para os naipes. Definiremos 15 classes, cada uma delas usando posicionamento absoluto. Com isso, qualquer carta do baralho poderá ser representada por um posicionamento apropriado de DIVs com as classes criadas.

[ 2^a. Parte » ]