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?

Quem nunca recebeu aquele layout finalizado, com um título sombreado e silenciosamente pensou: “P*** ****, lá vou eu fazer um text-replacement novamente”. Essa atitude era comum entre os webdevelopers, mas finalmente o pessoal da W3C veio solucionar nossos problemas.

Definição

O text-shadow pode ser aplicado a qualquer elemento que tenha texto, lógico, e é aceito pela grande maioria dos browsers modernos: Firefox 3.5, Opera 9.5+, Safari 3+. Infelizmente, mesmo com todas as melhorias (e realmente foram muitas) no Internet Explorer 7 e mais ainda no Internet Explorer 8, eles ainda não suportam essa propriedade, ou seja, escolheram a pílula azul.

A propriedade text-shadow é usada da seguinte maneira:

text-shadow: 2px 2px 2px #00f;

Onde:

• os dois primeiros valores são as coordenadas top left, para onde a sombra será projetada;
• o terceiro valor é o blur da sombra;
• o quarto valor é a cor da sombra;

A propriedade também aceita multiplas sombras. Sim! Até degradê é possível de se implementar usando somente CSS. Para isso, é só separar a declaração das sombras usando vírgulas:

text-shadow: 2px 2px 2px #000, 4px 4px 2px #00f;

Essa propriedade não é nova. Na verdade ela foi proposta na especificação do CSS2. A definição completa da propriedade pode ser encontrada aqui.

Exemplos

Vamos então implementar então os dois exemplos acima, primeiro a sombra simples:

bittersweet dev – CSS3: Propriedade text-shadow

E também o com sombras multiplas:

bittersweet dev – CSS3: Propriedade text-shadow

Pra quem não viu nada diferente nessas frases dê uma olhada nas imagens abaixo que representam respectivamente os exemplos acima:

… e uma dica, tome a pílula vermelha, ou seja, use um browser decente!

Aguardem novos posts explicando as novas propriedades do CSS3, até lá, deixe seu comentário, dúvida ou critica

text-shadow: 2px 2px 4px #f00;