bittersweet dev

Continuando o assunto CSS3 e as maravilhas que ele nos trará, hoje apresentarei a propriedade box-shadow. Com esta propriedade podemos aplicar sombras em elementos utilizando somente CSS. Assim como o text-shadow, essa propriedade veio trazer um pouco de alívio para webdevelopers e webdesigners. Onde antes eram necessárias imagens, definições de backgrounds, POG’s e outras práticas não menos nocivas, agora há possibilidade de definição direto no seu CSS. Não é uma maravilha esse pessoal da W3C?

Definição

A propriedade box-shadow pode ser aplicada a qualquer elemento e é aceito atualmente pelo Firefox 3.5+ (utilizando o prefixo -moz a propriedade) e pelo Safari 3.1+ (utilizando o prefixo -webkit a propriedade). Não preciso dizer que os –projetos de browsers– de Redmond não aceitam (ainda) esta propriedade.

O box-shadow não faz parte do box-shadow, ou seja, não influencia no tamanho total que o elemento terá na tela.

A propriedade é declarada da seguinte maneira:

box-shadow:5px 5px 10px #ccc;
/* implementação para o firefox */
-moz-box-shadow:5px 5px 10px #ccc;
/* implementação para safari */
-webkit-box-shadow:5px 5px 10px, #ccc;

Onde:

• o primeiro valor é a posição horizontal da sombra em relação ao elemento. Valor positivo projeta a sombra para a direita e negativo para a esquerda;
• o segundo valor é a posição vertical da sombra em relação ao elemento. Valor positivo projeta a sombra para baixo e negativo, adivinhem?, para cima;
• o terceiro valor é o blur da sombra, só aceita valores positivos ou 0 (zero);
• o quarto e último valor é a cor da sombra;

A propriedade aceita multiplas sombras. Podemos implementar inúmeros efeitos desta forma. Para isso é só separar a declaração de cada sombra com vírgulas:

box-shadow: 5px 5px 10px #333, -5px -5px 10px #ccc;

Exemplos

Vamos então colocar a mão na massa e implementar os dois exemplos acima, primeiro a sombra simples:

E agora o exemplo com múltiplas sombras:

Para aqueles que estão me taxando de louco ou acham que essa é a versão web do conto A Roupa Nova do Rei, seguem as respectivas imagens com o que você deveria ter visto aqui:

Sombra Simples

Sombra Múltipla

E por hoje é só pessoal! Dúvidas, críticas, sugestões?

Leia também:

1. CSS3: propriedade text-shadow