Layout com Sombras

Introdução

A linguagem CSS 3 ainda não está 100% pronta. Porém, ela é modular, e alguns módulos já possuem algumas especificações interessantes e já suportadas por alguns navegadores.

Algumas das especificações mais atraentes são as sombras em elementos e as sombras em textos. Estes efeitos são feitos pelas propriedades box-shadow e text-shadow respectivamente.

O valor de box-shadow pode ser o valor none (nenhuma sombra) ou uma sequência de especificações de sombra separadas por vírgula (uma sombra aplicada sobre outra). A especificação de uma sombra é:

inset? [ <tamanho>{2,4} <cor>? ]

A palavra "inset" é opcional, e indica que a sombra será aplicada para dentro do elemento. Por padrão, a sombra é para fora do elemento. Em seguida são informados de 2 a 4 valores de tamanho:

1. para especificar o deslocamento da sombra horizontalmente (positivo = direita / negativo = esquerda).
2. para especificar o deslocamento da sombra verticalmente (positivo = baixo / negativo = cima).
3. para especificar o efeito blur (embaçamento) na sombra (só são aceitos valores positivos), sendo que o valor 0 indica nenhum blur, ou seja, 100% opaco.
4. para especificar a ampliação ou redução da sombra (positivo = aumenta / negativo = diminui).

Finalmente é informada a cor da sombra, que, caso seja omitida, será determinada pelo próprio navegador.

A propriedade text-shadow é muito parecida com a especificação de box-shadow. A diferença é que ela não aceita o valor inset, logo, todas as sombras são para fora do texto e nunca para dentro.

---

Observações

Nos navegadores baseados no Geeko 1.9.1 (exemplo: Firefox 3.5), estes efeitos foram implementados nas propriedades -moz-box-shadow e -moz-text-shadow. Provavelmente no Geeko 2.0 (futuro Firefox 4), as propriedades box-shadow e text-shadow serão reconhecidas por seus nomes oficiais.

Nos navegadores baseados no Webkit (exemplo: Safari e Chrome), estes efeitos foram implementados nas propriedades -webkit-box-shadow e -webkit-text-shadow.

O navegador Opera reconhece a propriedade box-shadow a partir de sua versão 10.5, e a propriedade text-shadow a partir da versão 9.5.

O navegador Internet Explorer não implementa estas propriedades, mas permite efeitos semelhantes através de filtros Shadow e Drop Shadow.

Caso queira o efeito no máximo de navegadores possíveis, basta especificar as propriedades nas diferentes formas. Veja um exemplo e o resultado abaixo:

<style type="text/css">
.sombra {
  margin: 10px;
  border: 1px solid #000000;
  width: 200px;
  background-color: #FFFF00;
  line-height: 3em;
  text-align: center;
  -moz-box-shadow: 3px 3px 2px #000000;
  -webkit-box-shadow: 3px 3px 2px #000000;
  box-shadow: 3px 3px 2px #000000;
}
</style>
...
<div class="sombra">
Exemplo 1: sombra externa
</div>

Exemplo 1: sombra externa

<style type="text/css">
.sombra {
  margin: 10px;
  border: 1px solid #000000;
  width: 200px;
  background-color: #FFFF00;
  line-height: 3em;
  text-align: center;
  -moz-box-shadow: inset 3px 3px 2px #000000;
  -webkit-box-shadow: inset 3px 3px 2px #000000;
  box-shadow: inset 3px 3px 2px #000000;
}
</style>
...
<div class="sombra">
Exemplo 2: sombra interna
</div>

Exemplo 2: sombra interna