Folhas Web de Linguagem de Estilo
Dicas e Truques CSS

Sombras em Queda

O CSS2 não tem uma propriedade para adiccionar uma sombra a uma caixa. Pode tentar adiccionar uma fronteira à direita e ao fundo da página , mas vai dar-lhe uma sensação de que algo não está bem. No entanto, se tiver dois elementos correctamente identificados (nested), pode usar a do exterior como uma sombra para a do interior. Por exemplo, se tiver um texto como este (HTML):

<div class=back>
  <div class=section>
    <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>

Podes usar o DIV exterior como uma sombra para o DIV interior. O resultado pode ser como esta página separada. Em primeiro lugar, dá ao BODY um fundo (verde leve neste exemplo), o DIV exterior um pouco mais de fundo escuro (verde-cinza) e ao DIV interior outro fundo (por exemplo, amarelo-branco):

body {background: #9db}
div.back {background: #576}
div.section {background: #ffd}

A seguir, ao usar margens e o preenchimento, compensa o DIV interior um pouco para a esquerda:

div.back {padding: 1.5em}
div.section {margin: -3em 0 0 -3em}

Pode também movimentar o DIV exterior um pouco para a direita. E se tiver multiplas secções, provavelmente vai querer algum espaço entre elas, para:

div.back {margin: 3em 0 3em 5em}

Basicamente é isto. Pode acrescentar um fronteira à volta o DIV interior se quiser. Provavelmente também vai querer um preenchimento denntro:

div.section {border: thin solid #999; padding: 1.5em}

Claro que pode variar o tamanho da sombra ao seu gosto.

Sombras do Texto

CSS tem uma propriedade para adiccionar sombra ao texto. Tem quatro argumentos: a cor da sombra, o deslocamento horizontal (positivo é para a direita), o deslocamento vertical (positivo significa para baixo) e o borrão (0 significa sombra acentuada). Por exemplo:

h3 { text-shadow: red 0.2em 0.3em 0.2em }