Inserindo sombras sem precisar de imagens

Quem desenvolve para web há mais tempo, sabe como era difícil inserir sombras nos elementos. Você tinha que ser, praticamente, um designer gráfico, um guru do Photoshop (tá, exagerei). Antes do CSS era pior, você tinha que usar tabelas para isso e ficava sofrível quando o site era visualizado em outro browser.

Graças à W3C (com um pouquinho de pressão da comunidade) hoje ficou muito mais fácil fazer isso. Com apenas 1 linha no seu CSS, inserimos sombra em qualquer elemento. Veja abaixo um exemplo.

div { box-shadow: 5px 5px 5px rgba(0,0,0,.5); }

O atributo box-shadow permite que utilizemos estes 4 parâmetros: 3 números e a cor no final. No exemplo utilizei o RGBA para poder controlar a transparência da cor. Há um ótimo artigo sobre RGBA no Tableless neste link.

O primeiro número refere-se a posição horizontal da sombra a partir da esquerda do elemento, o segundo número refere-se a posição vertical a partir do topo e por último, o número que refere-se ao Blur. Com esse parâmetro, você controle a rigidez da sua sombra. Quanto maior esse número, mais esfumaçada será a sombra.

Nos 2 primeiros número você pode utilizar números negativos, para direcionar o ponto de iluminação do seu elemento. Com números negativos a sombra ficará acima e à direita do elemento, enquanto que com números positivos a sombra ficará abaixo e à direita do elemento.

Com o exemplo acima, estamos mostrando apenas os parâmetros principais deste atributo, mas nós temos mais algumas opções conforme sintaxe abaixo.

box-shadow: h-shadow v-shadow blur spread color inset;

Parâmetro Descrição
h-shadow Obrigatório. Posição horizontal da sombra. São permitidos valores negativos.
v-shadow Obrigatório. Posição vertical da sombra. São permitidos valores negativos.
blur Opcional. Rigidez da sombra.
spread Opcional. Tamanho da sombra.
color Opcional. Cor da sombra.
inset Opcional. Insere a sombra no interior do elemento.

Codifique você mesmo e teste todas as opções. Utilize os comentários para expor os seus resultado com o restante dos leitores.

UPDATE: Depois da dica dada pelo Oswaldo nos comentários, coloquei aqui um exemplo de utilização do box-shadow.

Leave a Reply