:: Desenhando com CSS ::

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:

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.
As bordas a partir do topo e no sentido horário têm a seguinte sequência de cores; vermelha, verde, azul e laranja;
As espessuras das bordas são de 5px, 10px, 25px e 50px para cada div respectivamente.

O código

O código é para a terceira div da sequência mostrada (borda de 25px).
Adotei para aquela div uma classe chamada tres

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Desenhando com bordas</title>
<style type="text/css">
div.tres {
 width:30px;
 height:30px;
 border: 25px solid; /* As 4 bordas sólidas com 25px de espessura */
 border-color: #f00 #0f0 #00f #fc0; /* cores: topo, direita, inferior, esquerda */
 }
</style>
</head>
<body>
<div class="tres"></div>
</body>
</html>

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.

O código

Utilize o mesmo código do exemplo anterior, alterando para 0 (zero), width e height na folha de estilo.
Faça algumas experiências a mais. Defina um valor para altura e deixe largura igual a zero, depois faça o contrário, a seguir defina valores diferentes, mude cores, faça suas experiências e descobertas e divirta-se.
Nota: Dependendo das regras de estilo que você defina, o resultado final pode sofrer variações de navegador para navegador. Os exemplos aqui mostrados foram testados no Firefox 1.5, Mozilla 1.4, Netscape 7.1, Ópera 7.54 e IE 6.0. Desconfiguram no IE5.0 e IE5.5 na maioria dos casos devido ao box model "quebrado" para estes navegadores.
Há um "bug" no IE 6.0 quando zeramos as dimensões da div como foi sugerido aqui. Para resolver acresente a declaração line-height:0;. Comprove você mesmo, testando o código com e sem esta declaração.

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:

Primeira div: bordas do topo e da direita vermelhas;
Segunda div: bordas da direita e inferior verdes;
Terceira div: bordas inferior e da esquerda azuis;
Quarta div: bordas da esquerda e do topo laranjas;

O código

O código é para a segunda div da sequência mostrada, bordas da direita e inferior verdes.
Adotei para aquela div uma classe chamada dois

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Desenhando com bordas</title>
<style type="text/css">
div.dois {
 line-height:0; /* correção para IE */
 width:0;
 height:0;
 border: 50px solid;
 border-color: #f00 #0f0 #0f0 #fc0;
 }
</style>
</head>
<body>
<div class="dois"></div>
</body>
</html>

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;

O código

O código é para a terceira div da sequência mostrada que tem bordas da direita e da esquerda com 50px e bordas superior com 10px e inferior com 90px.
Adotei para aquela div uma classe chamada tres

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Desenhando com bordas</title>
<style type="text/css">
div.tres {
 line-height:0;
 width:0;
 height:0;
 border-style: solid;
 border-color: #f00 #0f0 #00f #fc0;
 border-width: 10px 50px 90px;
 }
</style>
</head>
<body>
<div class="tres"></div>
</body>
</html>

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).

O código

O código é para a terceira div da sequência mostrada que tem largura de 30px, bordas da direita e da esquerda com 35px e bordas superior com 10px e inferior com 90px.
Adotei para aquela div uma classe chamada tres

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Desenhando com bordas</title>
<style type="text/css">
div.tres {
 line-height:0;
 width:30px;
 height:0;
 border-style: solid;
 border-color: #f00 #0f0 #00f #fc0;
 border-width: 10px 35px 90px;
 }
</style>
</head>
<body>
<div class="tres"></div>
</body>
</html>

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.

O código

O código é para a terceira div da sequência mostrada que tem altura de 30px, bordas da direita e da esquerda com 50px e bordas superir de 10px e inferior de 60px somando 70px.
Adotei para aquela div uma classe chamada tres

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Desenhando com bordas</title>
<style type="text/css">
div.tres {
 line-height:0;
 width:0;
 height:30px;
 border-style: solid;
 border-color: #f00 #0f0 #00f #fc0;
 border-width: 10px 50px 60px;
 }
</style>
</head>
<body>
<div class="tres"></div>
</body>
</html>

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.

O código

O código é para a primeira div da sequência mostrada
Adotei para aquela div uma classe chamada um

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Desenhando com bordas</title>
<style type="text/css">
div.um {
 line-height:0;
 width:0;
 height:0;
 border-style: solid;
 border-color: #f00 #0f0 #00f #fc0;
 border-width: 0 160px 100px 50px;
 }
</style>
</head>
<body>
<div class="um"></div>
</body>
</html>

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.

O código

E a seguir o código para você estudar

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Desenhando com bordas</title>
<style type="text/css">
div.retangulo {
 line-height:0;
 width:200px;
 height:160px;
 border: 25px solid #00f;
 }

div.metade-superior, div.metade-inferior { 
 float:left;
 width:100px; 
 height:0px;
 margin:0;
 line-height:0;
 border-style:solid; 
 }

div.metade-superior { 
 border-width:0 50px 80px ; 
 border-color:#fff #0f0 #fc0 #0f0; 
 }
div.metade-inferior { 
 border-width:80px 50px 0; 
 border-color: #fc0 #0f0 #fff #0f0; 
 }
</style>
</head>
<body>
<div class="retangulo">
<div class="metade-superior"></div>
<div class="metade-inferior"></div>
</div>
</body>
</html>

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.

Técnicas mais avançadas

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

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