CSS: Sombras CSS
Esta é a tradução do tutorial "Drop Shadows " de autoria de Bert Bos publicado no site do W3C.
1. A versão oficial e original, em inglês, deste tutorial, encontra-se em: http://w3.org/Style/Examples/007/shadows.html e os seus direitos são conforme:
Em CSS2 não existe uma propriedade para colocar um efeito de sombra em uma caixa (box). Se você definir uma borda direita e uma borda inferior para a caixa, irá simular o efeito de sombra, mas este artifício fornece um resultado precário. Por outro lado se você definir dois elementos aninhados, e usar o elemento exterior como sombra para o interior obterá um resultado melhor. Para exemplificar vamos considerar a marcação HTML abaixo:
<div class=fundo>
<div class=texto>
usaremos a DIV externa - .fundo - como uma sombra para a DIV interna - .texto. O efeito obtido com esta técnica pode ser visto nesta página. Comece atribuindo uma cor para BODY (no exemplo usei verde clara); para a DIV externa que servirá de sombra atribua uma cor escura (verde escura) e, finalmente para a DIV interna uma outra cor de fundo (por exemplo: amarela clara):
div.fundo {background: #576}
div.texto {background: #ffd}
A seguir atribua margins e padding, para deslocar a DIV interna para à esquerda e para cima em relação à DIV externa:
div.fundo {padding: 1.5em}
div.texto {margin: -3em 0 0 -3em}
Desloque a DIV externa para a direita. E, se você usar mais de um bloco de texto, talvez precise espaços entre eles, então mais regra CSS:
div.fundo {margin: 3em 0 3em 5em}
Básicamente é isto. Como acabamento pode-se opcionalmente usar borda e padding na DIV interior, como a seguir:
div.texto {border: thin solid #999; padding: 1.5em}
O tamanho da sombra é controlável ao seu gosto.
Em CSS existe uma propriedade para colocar sombra em textos. Esta propriedade tem quatro argumentos (variáveis para seu valor): a cor da sombra, o deslocamento horizontal da sombra (valores positivos deslocam para a direita), o deslocamento vertical da sombra (valores positivos deslocam para baixo) e o "blur" (esfumaçamento da sombra - valor 0, não há esfumaçamento ou seja sombra sólida). Veja o exemplo a seguir: