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.
