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

Folhas de Estilo para Web
dicas & macetes CSS

(esta página usa Folhas de Estilos)

Demo

Sombras

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.

Sombras em textos

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 }

Você vê uma sombra vermelha neste texto?

Nota do tradutor: À época desta tradução (Dezembro 2004) nenhum browser suporta esta propriedade.

[CSS Feito] [CSS Válido] [XHTML1 Válido]

Bert Bos
criado em 04 Apr 2002;
atualizado $Data: 2004/12/26 13:40:31 $ GMT