Bert Boscriado em 04 Apr 2002;
atualizado $Data: 2004/12/26 13:40:31 $ GMT
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:
Copyright ©2002 W3C® (MIT, INRIA, Keio), Todos os direitos reservados. São aplicáveis as disposições do W3C relativas a responsabilidade, marcas, uso de documentos e licença de software
2. A única versão oficial deste documento é a versão em língua inglesa que se encontra no sítio do W3C.
3. O presente documento traduzido para a língua portuguesa do Brasil, pode conter erros de tradução.
Este documento foi traduzido em 12 de dezembro de 2004 e atualizado em 27 de dezembro de 2004 por: Maurício Samy Silva e encontra-se hospedado no seu sítio "CSS para WebDesign" em http://www.maujor.com/
A traduçao foi feita somente para este documento, vale dizer, as páginas remetidas pelos links aqui indicados, estão em sua versão original em língua inglesa.
Importante: O IE/Win até a presente data, não oferece o suporte CSS requerido para visualizar todos os efeitos mostrados neste tutorial. Use um browser compatível com as normas do W3C (standard-compliant).
(esta página usa Folhas de Estilos)
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>
<h2>Die Rose duftet - doch ob sie empfindet</h2>
<address>Heinrich Heine (1797-1856)</address>
<p>Die Rose duftet - doch ob sie empfindet<br>
...
</div>
</div>
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):
body {background: #9db}
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:
h3 { text-shadow: red 0.2em 0.3em 0.2em }
Nota do tradutor: À época desta tradução (Dezembro 2004) nenhum browser suporta esta propriedade.