Tweet Sombras em CSS 3 com box-shadow

Criar sombras em CSS3 com o atributo box-shadow. Finalmente, poderemos aplicar sombras aos elementos da página, sem usar imagens, Javascript nem nada extra, simplesmente com um atributo de CSS 3.

 CSS 3 supõe uma nova revolução no web design, trazendo soluções a muitas das práticas que os designers utilizam para decorar as páginas web. Isto quer dizer que, muitas das coisas que antes fazíamos com técnicas de design que requeriam uso de imagens, como as sombras ou as esquinas arredondadas, a partir de agora vamos poder especificá-las simplesmente através de CSS.
Como vimos no artigo introdução a CSS 3, Não cabe dúvida que significará um grande avance para as pessoas que se dedicam a desenvolver webs, que nos permitirá poupar tempo e sobretudo, economizar código fonte, o que tornará as páginas mais leves e separará ainda mais o conteúdo da forma.
Ao longo do Manual de CSS 3 já vimos vários atributos novos de bastante importância e variedade e agora é a vez do box-shadow, o atributo de CSS3 que nos permitirá definir sombras aos elementos da página.

Atributo box-shadow

O atributo box-shadow requer vários valores para especificar as características da sombra, como esfumaçado, separação da sombra e a própria caixa ou cor. A sintaxe é como esta:

box-shadow: 5px -9px 3px #000; 

 

Por ordem de aparecimento, os valores que se indicam em box-shadow são:

Deslocamento horizontal da sombra:  A sombra de um elemento costuma estar um pouco deslocada com respeito ao elemento que a produz e sua posição será em função do ângulo com o qual chegue a luz. No caso deste exemplo, o primeiro dos valores, 5px, quer dizer que a sombra aparecerá 5 pixels à direita. Se quisermos que a sombra apareça um pouco à esquerda do elemento original que a produz, colocaríamos um valor negativo a este atributo. Quanto mais deslocamento tiver uma sombra, o elemento que a produz parecerá que está mais separado da tela da página.

Deslocamento vertical da sombra: O segundo valor que colocamos no atributo box-shadow é o deslocamento vertical da sombra com respeito à posição do elemento que a produz. Este valor é similar ao deslocamento horizontal. Valores positivos indicam que a sombra aparecerá abaixo do elemento e valores negativos farão com que a sombra apareça deslocada um pouco para cima. No caso do anterior exemplo, com -9px estamos indicando que a sombra aparecerá deslocada 9 pixels para cima do elemento.

Esfumaçado: O terceiro valor indica quanto queremos que esteja esfumaçada a borda da sombra. Se o esfumaçado fosse zero, quer dizer que a sombra não tem nenhum esfumaçado e aparece totalmente definida. Se o valor for maior que zero, como em nosso exemplo 3px, quer dizer que a sombra terá um esfumaçado dessa largura, 3 pixels no exemplo.

Cor da sombra: O último atributo que se indica no atributo box-shadow é a cor da sombra. Geralmente as sombras no mundo real têm uma cor preta ou cinza, porém com CSS3 poderemos indicar qualquer gama de cor para fazer a sombra, o que nos dará bastante mais versatilidade aos desenhos graças à possível utilização de sombras em distintas cores, que possam combinar melhor com nossa paleta. No exemplo anterior havíamos indicado uma sombra com cor preta.

Compatibilidade das sombras CSS com navegadores

O certo é que as CSS 3 ainda estão em fase de especificação, embora já se encontrem muito avançadas e os navegadores mais modernos já começaram a implementá-las. Não obstante, o W3C ainda não liberaram as especificações desta versão das Folhas de Estilo em Cascata e até que comece a recomendar sua implementação os clientes web não têm porque entendê-las. Por enquanto, podemos utilizar box-shadow nas versões mais modernas do navegador Opera. Por sua parte, navegadores baseados em Mozilla e WebKit têm suporte a esta funcionalidade de CSS3, porém, através de uns atributos CSS com uma ligeira variação em seu nome.
Atributo box-shadow para navegadores baseados em Mozilla, como Firefox: De maneira temporária, Firefox é capaz de interpretar o atributo -moz-box-shadow, por exemplo:

-moz-box-shadow: 1px 1px 0px #090; 
 
Atributo box-shadow para navegadores baseados em WebKit, como Safari ou Google Chrome: Nesses momentos e de maneira temporária, navegadores como Chrome ou Safari entendem o atributo: -webkit-box-shadow, por exemplo:

-webkit-box-shadow: 3px 3px 1px #fc8; 
 
Como poderemos imaginar, se desejamos ampliar ao máximo a compatibilidade com box-shadow, necessitaríamos indicar tanto o próprio atributo box-shadow (que funciona em Opera e no futuro funcionará em todos os navegadores), assim como -moz-box-shadow e -webkit-box-shadow para que funcione nas versões atuais de Firefox, Safari, Chrome, etc.

Exemplos de Sombras CSS3

Agora vejamos vários exemplos de sombras criadas diretamente com CSS 3 e o atributo box-shadow, com suas variantes para compatibilidade temporária nos navegadores Mozilla ou WebKit.

#caixasombra{
   background-color: #ddd;
   width: 300px;
   padding: 10px;
   
   box-shadow: 5px 5px 0 #333;
   -webkit-box-shadow: 5px 5px 0 #333;
   -moz-box-shadow: 5px 5px 0 #333;
} 
 
Isto criaria uma camada com um cinza claro como cor de fundo e uma sombra deslocada para baixo e à direita em 5 pixels e sem esfumaçado. Ademais, definimos uma cor de sombra cinza escuro para o elemento.
 

#sombraclara{
   width: 200px;
   padding: 10px;
   background-color: #999;
   color: #fff;
  
   box-shadow: 2px 2px 2px #ffc;
   -webkit-box-shadow: 2px 2px 2px #ffc;
   -moz-box-shadow: 2px 2px 2px #ffc;
} 

 
Este outro exemplo é para uma sombra um pouco menor, também deslocada para baixo e à direita e com um esfumaçado de 2 pixels. Ademais, indicamos uma cor amarela clara para a sombra, e para vê-la bem, teríamos que colocar este elemento sobre um fundo escuro.

#sombrarredondada{
   background-color: #090;
   color: #fff;
   width: 400px;
   padding: 10px;
   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
   
   box-shadow: 15px -10px 3px #000;
   -webkit-box-shadow: 15px -10px 3px #000;
   -moz-box-shadow: 15px -10px 3px #000;
} 
 
Neste terceiro exemplo, temos um caso curioso de sombra, pois está aplicada sobre um elemento que tem as esquinas arredondadas com CSS 3. Sendo assim, a sombra também deve ter as sombras arredondadas, para se ajustar ao elemento que a produz. Ambos navegadores com compatibilidade a sombras e CSS 3 funcionam corretamente com sombras e bordas arredondadas.


Tenha em conta que você deverá provar estes exemplos com Opera, Firefox, Safari ou Chrome, que são os que atualmente suportam este atributo.