22 de outubro de 2009

CSS Tutorial - Adicionando sombra nos boxes sem o uso de imagens

Mais uma propriedade do CSS3, o box-shadow, com ela podemos criar um efeito sombreado nos boxes, sem o uso de imagens. CSS3 = facilidade :)

Mas atenção, por enquanto essa propriedade é suportada por alguns browsers, nessa lista estão o Firefox 3.5+, Safari 3+, testei no Chrome 3 e funcionou .

Para que os browsers renderizem o box-shadow, temos que adicionar o prefixo -moz- (para o firefox) e o -webkit- (para o Safari e o Chrome).

-moz-box-shadow:5px 5px 10px #101010;
-webkit-box-shadow:5px 5px 10px #101010;

* Sombra vertical do box;
* sombra horizontal do box;
* Blur da sombra;
* cor da sombra.



Se você quiser deixar os boxes com cantos arredondados como na imagem acima veja esse tutorial aqui.
Espero que esse tutorial tenha sido esclarecedor =) .

Um comentário:

  1. legal o código para bordas de cantos arredondados, mas o problema é que nao funciona no IE, tem como agrupar códigos para que os outros navegadores suportem?

    ResponderExcluir