Desenhando com CSS

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.

por Maurício Samy Silva

Introdução

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 Tutorial: 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 tutorial.
Para ajustar as DIVs dentro do retângulo usei a propriedade float-left. Maiores detalhes no código mostrado.

Conclusões

Mostrei neste tutorial 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 tutorial

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

Maurício Samy Silva