A propriedade box-shadow do CSS3 nos permite obter facilmente efeitos de sombra de camada. Vamos explicar esse atributo detalhadamente na prática.
1. Compatibilidade do navegador do atributo box-shadow Vamos primeiro dar uma olhada na compatibilidade do navegador deste atributo:
Opera: Não sei qual versão ele passou a suportar. Quando postei este artigo para teste, acabei de atualizar o Opera para a versão mais recente 10.53, que já suporta o atributo box-shadow.
O Firefox suporta isso através da propriedade privada -moz-box-shadow.
Safari e Chrome suportam isso através da propriedade privada -webkit-box-shadow.
Não é compatível com todos os IEs (não sei se o IE9 melhorou). Não se preocupe, apresentaremos alguns Hacks para IE no final do artigo.
2. Sintaxe do atributo box-shadow
box-shadow tem seis valores configuráveis:
img{box-shadow: tipo de sombra deslocamento do eixo X deslocamento do eixo Y tamanho da sombra extensão da sombra cor da sombra}
Quando nenhum tipo de sombra estiver definido, o padrão será efeito de sombra. Quando definido para inserção, é um efeito de sombra interna.
O deslocamento do eixo X e do eixo Y não é equivalente, mas semelhante a "ângulo" e "posição" no Photoshop.
O tamanho, a extensão e a cor da sombra são iguais aos do Photoshop.
3. Análise de exemplo Vejamos o efeito de uma sombra de caixa através de vários exemplos. Primeiro, faça um HTML simples para teste:
<html>
<cabeça>
<style type="text/css">Escreva a parte CSS aqui</style>
</head>
<corpo>
<img src="test.jpg" />
</body>
</html>
Observação: para evitar problemas, apenas box-shadow está escrito no código CSS abaixo. No uso real, você também deve escrever -moz-box-shadow e -webkit-shadow. O que você precisa fazer é muito simples, copiar duas box-shadows e adicionar -moz- e -webkit- na frente delas.
imagem {
-moz-box-shadow:2px 2px 10px #06C;
-webkit-box-shadow:2px 2px 10px #06C;
sombra da caixa:2px 2px 10px #06C;
}
(1).Sombra projetada, sem deslocamento, tamanho de sombra de 10px, sem expansão, cor #06C.
img{box-shadow:0 0 10px #06C;}
O valor da cor aqui é o valor HEX. Também podemos usar o valor RGBA. A vantagem do valor RGBA é que ele possui um valor de transparência alfa adicional e você pode controlar a transparência da sombra.
img{box-shadow: 0 0 10px rgba(0, 255, 0, .5)}
(2). Adicione uma extensão de 20px ao acima.
img{box-shadow:0 0 10px 20px #06C;}
(3). Sombra interna, sem deslocamento, tamanho 10px, sem expansão, cor #06C.
img{box-shadow:inserir 0 0 10px #06C;}
(4). Vários efeitos de sombra.
Box-shadow pode ser usado várias vezes ao mesmo tempo. Vamos usar uma sombra de quatro cores.
img{box-shadow:-10px 0 10px vermelho, box-shadow:10px 0 10px azul,box-shadow:0 -10px 10px amarelo,box-shadow:0 10px 10px verde}
(5) A ordem de uso de vários atributos de sombra Ao usar vários atributos de sombra para o mesmo elemento, você precisa prestar atenção à sua ordem. Por exemplo, no código a seguir, primeiro escrevemos uma sombra verde de 10px e, em seguida, escrevemos um tamanho de 10px, mas estendido por uma sombra de 20px. O resultado é: uma camada sombreada verde sobre uma camada sombreada amarela.
img{box-shadow:0 0 10px verde;box-shadow:0 0 10px 20px amarelo}
Mas se mudarmos a ordem, assim:
img{box-shadow:0 0 10px 20px amarelo,box-shadow:0 0 10px verde;}
Não conseguiremos ver a camada sombreada verde escrita posteriormente porque ela está coberta pela camada amarela escrita primeiro e com raio maior.
4. Deixe o IE também suportar box-shadow
O próprio IE usa um filtro de sombra para obter efeitos semelhantes, e também existem alguns arquivos de hack js e .htc que podem ajudá-lo a obter esse efeito no IE. Não posso experimentar todos, então aqui apresento apenas aquele que usei.
ie-css3.htc é um arquivo htc que permite que o navegador IE suporte algumas propriedades CSS3, não apenas box-shadow, mas também permite que seu navegador IE suporte o atributo de canto arredondado border-radius e o atributo text-shadow text-shadow .
Como usar: baixe e coloque no diretório do servidor
Escreva o seguinte código em seu <head></head>:
<!--[se IE]>
<style type="texto/css">
img, #testdiv, .testbox{comportamento: url( http://seudominio.com/js/ie-css3.htc );}
</estilo>
<![endif]-->
Na parte azul, insira o seletor usando o atributo box-shadow, e na parte verde, insira o caminho absoluto ou relativo de ie-css3.htc. De qualquer forma, certifique-se de que esteja acessível.
Então está tudo bem. Mas ainda há algumas coisas a serem observadas:
Quando você usa este arquivo htc, contanto que box-shadow, -moz-box-shadow ou -webkit-box-shadow esteja escrito em seu CSS, o IE irá renderizá-lo.
Ao usar este arquivo htc, você não pode escrever box-shadow: 0 0 10px red; mas box-shadow: 0px 0px 10px red;
A transparência alfa em valores RGBA não é suportada.
Sombras internas inseridas não são suportadas.
A expansão de sombra não é suportada.
As sombras só aparecerão em preto no IE, independentemente das outras cores que você definir para elas.
Portanto, este script permite apenas que o IE suporte alguns valores de box-shadow. Se você tiver outros scripts de hacks do IE melhores, deixe uma mensagem para compartilhar.