Voltar para o site

Cartas de baralho com CSS - 3a. Parte

Publicado em: 27/05/2006

Cartas figuras

Para finalizarmos o visual das nossas cartas vamos usar algumas imagens para construir as cartas com figuras na face. A seguir, as imagens a serem usadas para o valete a dama e o rei, nesta demonstração.

jack.gif jack.gif        queen.gif queen.gif        king.gif king.gif

As imagens foram obtidas por escaneamento de um baralho real e posterior edição e otimização da imagem para uso na web. Embora um baralho real use diferentes imagens de acordo com o naipe, nós usaremos estas três para todos os naipes em favor da redução do número de imagens necesssárias e de um menor tempo de carregamento. Cada imagem tem um tamanho aproximado de 8K.

Assim como os símbolos de texto usados para os naipes, estas imagens podem também ser redimensionadas com regras de estilos. Contudo, ao contrário dos textos, o redimensionamento das imagens fará com que haja uma perda de qualidade gráfica conforme você pode observar nas figuras a seguir onde mostramos uma redução e um aumento de 50% na imagem original.

king.gif at 50%         king.gif at 100%         king.gif at 200%

Ainda assim podemos redimensionar em uma escala ampla, sem degradação inaceitável.

Agora, para usarmos as imagens basta criar uma nova regra de estilo. As cartas com figuras usarão a tag IMG com a classe .face.

  .face {
  border: 1px solid #000000;
  position: absolute;
  left: 0.50em;
  top:  0.45em;
  width:  2.6em;
  height: 4.0em;
}

...

<div class="card" style="left:20em;top:6em;">
  <div class="front red">

    <div class="index">Q<br />&diams;</div>
    <img class="face" src="queen.gif" alt="" />
    <div class="spotA1">&diams;</div>
    <div class="spotC5">&diams;</div>

  </div>
</div>

Novamente, o uso de unidades em para tamanho e posicionamento, permite dimensionar as imagens em relação ao tamanho de fonte da div com a classe card. Acresentando a DIV index e mais duas DIVs para os naipes obteremos o resultado final como mostrado abaixo:

Q
♦
♦
♦

Finalmente, com todas as coisas no lugar, podemos formar um "straight flush."

10
♠
♠
♠
♠
♠
♠
♠
♠
♠
♠
♠
J
♠
♠
♠
Q
♠
♠
♠
K
♠
♠
♠
A
♠
♠

Conclusão

Esta assim explicado como obter o visual de cartas de baralho com amplo uso de CSS e os artigos citados na 1 a. Parte deste tutorial mostram como tornar prática esta criação, desenvolvendo jogos ou entertenimentos com as cartas movimentadas por script. Aqueles artigos mostram como criar objetos JavaScript capazes de representar e manipular um baralho completo de cartas e como apresená-las dinamicamente em uma página web.

Comece seus experimentos com a demo para verificar quão flexíveis as CSS podem ser.

[ « 2 a. Parte ]

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

topo