Faltam 0 dias! Inscreva-se agora! O maior encontro de profissionais web da américa latina.

As CSS são tão poderosas e flexíveis que até imagens podem ser criadas com declarações de estilos. Uma possibilidade impossível de se conseguir com HTML sem links para imagens externas do tipo .gif, .jpg , .png etc.

A propriedade CSS mais largamente empregada para construção de tais imagens é a propriedade border.

Existe um site da Inglaterra que mantém uma galeria para exposição de trabalhos de desenvolvedores do mundo todo e suas criações de imagens com CSS. No final deste tutorial você encontrará um link para a galeria e links adicionais para imagens com CSS.

A propriedade border

Vou recapitular resumidamente a propriedade border. Se você não está seguro de como escrever regras para a propriedade, sugiro uma leitura no Artigo: A propriedade border e uma passada nesta página interativa para estudo da propriedade border.

Usaremos bordas sólidas coloridas para ilustrar os exemplos. E a regra CSS em declaração única para bordas é:

seletor {border: 10px solid #f00;}

No exemplo acima estamos definindo as 4 bordas na cor vermelha (#f00) estilo sólido e com 10 pixels de espessura.

A ordem de declaração dos três valores da propriedade é indiferente, contudo é de boa prática escolher uma ordem de declaração, a gosto do desenvolvedor e adotá-la em todas as folhas de estilo. Eu uso a ordem: espessura, estilo e cor.

Aplicando bordas coloridas

Talvez você já tenha aplicado bordas em diversos elementos com variadas espessuras e de estilos diferentes. Mas, já havia pensado em aplicar bordas de cores diferentes em cada um dos lados de um elemento?

É! Exatamente o que talvez você deve estar pensando: Vai ficar um carnaval. Eu mesmo penso assim, mas vamos em frente para ver no que isso vai dar.

Observe as 4 figuras (ops! figuras?) a seguir:

São quatro elementos div nos quais foram aplicadas bordas coloridas de espessuras diferentes, como listado abaixo:

1. Todas as 4 DIVs são quadrados de 30px x 30px;
   Nota: Um efeito de ilusão de ótica faz parecer que os quadrados diminuem em tamanho a partir da esquerda.
2. As bordas a partir do topo e no sentido horário têm a seguinte sequência de cores; vermelha, verde, azul e laranja;
3. As espessuras das bordas são de 5px, 10px, 25px e 50px para cada div respectivamente.

E se eu mudar as dimensões da div ?

Nos exemplos mostrados acima foi definida uma largura e uma altura para as DIVs.
Veja o que acontece se estas dimensões forem definidas como sendo 0 (zero), isto é width:0 e height:0.

Mudando as cores das bordas

A seguir usei a quarta div da sequência mostrada anteriormente para aplicar a mesma cor em bordas adjacentes e veja como ficou na listagem e nas figuras a seguir:

1. Primeira div: bordas do topo e da direita vermelhas;
2. Segunda div: bordas da direita e inferior verdes;
3. Terceira div: bordas inferior e da esquerda azuis;
4. Quarta div: bordas da esquerda e do topo laranjas;

Mudando a espessura das bordas

Agora vamos alterar a espessura das bordas do topo e inferior, mantendo as bordas da esquerda e da direita com a mesma espessura.
Observe com atenção os seguintes itens:

• Olhe a primeira div da sequência abaixo. Ela já foi analisada e pelo que foi explicado, você facilmente concluirá que trata-se de uma div com dimensões zeradas e com espessura das 4 bordas iguais a 50px;
  Como cada borda tem 50px a div é um quadrado com 100px de lado;
• Olhe as três outras div da sequência abaixo. As bordas laterais (laranja e verde) em todas elas, têm espessura igual a 50px e como são duas, somam 100px.
  As bordas do topo e inferior (vermelha e azul) em todas elas, têm espessura diferente, contudo também somam 100px.

Com toda certeza você já deve ter concluido que:

margin-left: 50px; margin-right:50px;

soma de margin-top com margin-bottom igual a 100px.

E mais, para a quarta div temos:

margin-top:0; e margin-bottom:100px;

Combinando espessuras diferentes com uma width

Tenha certeza de que entendeu o efeito mostrado acima para continuar, porque agora usaremos a técnica anterior em uma div com uma largura diferente de zero e uma altura igual a zero.

Ou seja, vamos acresentar uma width no efeito anterior para obter formas trapezoidais.

Escolhemos para nosso exemplo width: 30px; e assim os cálculos levam a:
largura total da div (100px) = width de 30px + margin-left + margin-right
ou seja, a soma das margens laterais deve ser 70px.

Para simplificar iremos adotar as margens laterais iguais a 35px cada e para as margens do topo e inferior, os mesmos valores dos exemplos anterior (soma igual a 100px).

Combinando espessuras diferentes com uma height

Agora usaremos a técnica anterior em uma div com uma altura diferente de zero e uma largura igual a zero.

Ou seja, vamos acresentar uma height no efeito e manter width:0; para obter formas trapezoidais. O raciocínio e os cálculos são idênticos ao anterior e o resultado é mostrado a seguir.

As quatro bordas com espessuras diferentes

Tendo entendido como foram obtidos os efeitos acima fica fácil ousar combinações mais complexas como as mostradas a seguir.

As DIVs agora têm dimensão de 210px para largura e 100px para altura.
Olhando para a primeira div é imediato concluir:

. margem do topo ZERO e margem inferior 100px pois o azul ocupa toda a altura.
. soma da margem esquerda com a margem direita igual a 210px.

Como exercício e verificação do seu aprendizado escreva o código para obter o efeito mostrado na segunda div acima.

Dica: utilize o mesmo código para a primeira div mudando apenas as espessuras das bordas.

Variação do efeito anterior

Observe agora que os dois efeitos a seguir foram obtidos simplesmente mudando a cor de uma das bordas das DIVs mostradas anteriormente (compare estas DIVs com as anteriores).

Como exercício e verificação do seu aprendizado escreva o código para obter o efeito mostrado nas duas DIVs abaixo.

Juntando efeitos

Com estes conceitos iniciais você já pode dar tratos a sua imaginação e começar a juntar efeitos. O que acontecerá se eu juntar duas ou três ou mais DIVs uma ao lado da outra e/ou em cima uma da outra e/ou colocar uma dentro da outra e por ai vai numa combinação sem limites de possibilidades e de criação de efeitos/imagens.

Mostro a seguir um exemplo bem simples constituido por um hexágono (polígono de seis lados) laranja, inscrito em um retângulo de fundo verde e lados azuis.

Como obter este efeito? Existem várias maneiras e a que eu adotei é a seguinte:

. O retângulo é uma div com borda azul de 25px de espessura e dimensões de 210px x 160px;

. Dentro desta div retângulo coloquei duas DIVs uma em cima da outra fazendo as metades superior e inferior do hexágono. Estas metades foram construidas conforme o efeito da figura 4 no título "Combinando espessuras diferentes com uma width" mais acima neste artigo.

Para ajustar as DIVs dentro do retângulo usei a propriedade float-left. Maiores detalhes no código mostrado.

Conclusões

Mostrei neste artigo as técnicas básicas para obter efeitos que possibilitam construir figuras com uso de CSS.

As possibilidades são muitas e a combinação com o uso de caracteres especiais tais como
♥ ♦ ♠ ♣ e tantos outros, permitem ampliar os efeitos auxiliares para desenho com CSS.

Os fundamentos e a inspiração para escrever este tutorial veio de Slant Demo

Links relacionados a este artigo

Trabalhos mais sofisticados e que bem demonstram até onde podemos ir com esta técnica podem ser vistos nos links a seguir aos quais eu recomendo uma visita:

• Bandeira da Inglaterra
• Bandeira do Brasil
• Relógio digital
• Galeria de desenhos

Descubra a versatilidade das CSS
Projete conforme as Web Standards.

Maurício Samy Silva