CSS3 Box Shadow

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (0)  (0)

Veja nesta dica como inserir sombras em qualquer elemento HTML usando códigos CSS3.

Olá pessoal, a dica que irei passar para vocês é bem simples e muito útil para quem quer usar css3 em seus projetos.

Antigamente quando se queria inserir sombras, as famosas drop-shadows, em algum elemento html, era preciso tornar esse elemento uma imagem e inserir a sombra direto na imagem.

Com a chegada do css3 houve muita revolução e mudança no desenvolvimento, e essa foi uma delas. Agora é possível inserir sombras (CSS Box Shadow) em qualquer elemento html diretamente pelo css, querem ver como?

Irei mostrar o código usado para inserir em todos os navegadores, como chrome, Firefox, safari.

Listagem 1: Inserindo drop-shadows com CSS3

.shadow {
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000;
}

Para o Internet Explorer nas versões antigas foi feito um “hack” para que isso funcionasse também, ficando dessa forma:

Listagem 2: Hack para IE nas versões antigas

.shadow {
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4,
 Direction=135, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4,
 Direction=135, Color='#000000');
}

A versão mais atualizada do Internet Explorer não precisa desse hack para funcionar.

Bom, é isso. Espero que tenham gostado da dica de hoje sobre CSS Box Shadow e até a próxima.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?