Propriedade Box Shadow do CSS3

Conforme o próprio nome indica, a propriedade box-shadow do CSS3 serve para criar sombras em “caixas”.

Atualmente [21/06/2010] a propriedade só é suportada em navegadores baseados no Webkit ou no Firefox, através das propriedades -webkit-box-shadow e -moz-box-shadow, respectivamente. No entanto, implementei-os em um projeto pessoal, e percebi que a renderização se tornou lenta no scroll de textos longos.

Traduzindo a documentação da W3C:

A propriedade ‘box-shadow’ anexa uma ou mais sombras à caixa. A propriedade é uma lista de sombras separadas por vírgulas, cada uma especificada por 2 a 3 medidas de largura, uma cor opcional, e uma palavra-chave ‘insert’ opcional. Larguras omitidas são iguais a zero; cores omitidas são iguais à cor escolhida pelo usuário.

Onde

<sombra> = inset? && [ <largura>{2,4} && <cor>? ]

Os parâmetros informados para cada sombra são:

• inset – indica que a sombra é “interna”, isto é, fica dentro da caixa. [opcional]
• deslocamento horizontal, à direita. Utilize valores negativos para deslocar à esquerda.
• deslocamento vertical, para baixo. Utilize valores negativos para deslocar a sombra para cima.
• raio de desfoque: o quão “borrada” ficará a sombra. O padrão é 1 pixel. [opcional]
• raio de propagação: o quão distante a sombra se expandirá além da caixa. [opcional]
• cor: a cor da sombra. [opcional]

Um exemplo vale mais do que mil palavras:

#box {
 background: #ff0;
 box-shadow: 2px 2px 6px 3px #f00;
 -moz-box-shadow: 2px 2px 6px 3px #f00;
 -webkit-box-shadow: 2px 2px 6px 3px #f00;
 padding: 10px;
 width: 150px;
}

O código acima irá renderizar:

Um exemplo de sombra interna:

#box2 {
 background: #ccc;
 box-shadow: inset 2px 2px 5px #000;
 -moz-box-shadow: inset 2px 2px 5px #000;
 -webkit-box-shadow: inset 2px 2px 5px #000;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 padding: 10px;
 width: 150px;
}

Resultado 2:

Múltiplas sombras, de diversas cores:

#box3 {
 background: #000;
 color: #fff;
 box-shadow: -5px -5px 10px #f00,
 -5px  5px 10px #00f,
 5px -5px 10px #ff0,
 5px  5px 10px #0f0
 ;
 -moz-box-shadow: -5px -5px 10px #f00,
 -5px  5px 10px #00f,
 5px -5px 10px #ff0,
 5px  5px 10px #0f0
 ;
 -webkit-box-shadow: -5px -5px 10px #f00,
 -5px  5px 10px #00f,
 5px -5px 10px #ff0,
 5px  5px 10px #0f0
 ;
 padding: 10px;
 width: 150px;
}

Resultado 3:

Exemplo do quarto parâmetro “spread”:

#box4 {
 background: #000;
 color: #fff;
 box-shadow: 0 0 1px 10px #f00,
 0 0 1px 20px #00f,
 0 0 1px 30px #ff0,
 0 0 1px 40px #0f0
 ;
 -moz-box-shadow: 0 0 1px 10px #f00,
 0 0 1px 20px #00f,
 0 0 1px 30px #ff0,
 0 0 1px 40px #0f0
 ;
 -webkit-box-shadow: 0 0 1px 10px #f00,
 0 0 1px 20px #00f,
 0 0 1px 30px #ff0,
 0 0 1px 40px #0f0
 ;
 padding: 10px;
 width: 150px;
}

Resultado 4:

Divirta-se!