Efeitos de sombra com CSS3
Criando sombras com a propriedade box-shadow.
Os efeitos de sombra que antes só podiam ser feitos com uso de imagens (geralmente feitas no Photoshop, CorelDraw entre outros programa do gênero), com o CSS3 pode ser feito de uma forma bem simples usando uma única propriedade: box-shadow.
A propriedade box-shadow permite que você adicione múltiplas sombras, que podem ser externas ou internas. Os valores que devem ser inseridos na propriedade são: distância da sombra do eixo X, distância da sombra do eixo Y, desfocagem, deslocamento da sombra e cor.
Vamos aos exemplos:
Exemplo 1:
Código HTML (irei usar essa mesma estrutura para todos os exemplos)
<html>
<body>
<div class="caixa">
</body>
</html>
Código CSS
.caixa {
margin: 20px auto;
width: 800px;
height: 200px;
-webkit-box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.5);
-ms-box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.5);
-o-box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.5);
box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.5);
background: rgba(230,230,230,1);
}
O primeiro valor inserido na propriedade box-shadow define a distância da sombra do eixo X, ou seja, a distância da sombra do lado esquerdo da div, o segundo valor define a distância do eixo Y, ou seja, a distância do topo da div, o terceiro define a desfocagem da sombra (quanto maior o valor mais desfocada será a sombra), o quarto valor define a expansão da sombra (que irá se expandir para todos os lados na mesma proporção) e por último é definida a cor da sombra.
Resultado final:
Exemplo 2:
Código CSS
.caixa {
margin: 20px auto;
width: 800px;
height: 200px;
-webkit-box-shadow: inset 0px 0px 10px 10px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0px 0px 10px 10px rgba(0,0,0,0.1);
-ms-box-shadow: inset 0px 0px 10px 10px rgba(0,0,0,0.1);
-o-box-shadow: inset 0px 0px 10px 10px rgba(0,0,0,0.1);
box-shadow: inset 0px 0px 10px 10px rgba(0,0,0,0.1);
background: rgba(230,230,230,1);
}
Nesse exemplo, assim como no Exemplo 1, defino a distância da sombra dos eixo X e Y, a desfocagem, a expansão da sombra e a cor. O que tem de diferente é o valor inset que serve para altera o modo de sombra externa para sombra interna, como pode ser visto à seguir.
Resultado final:
Exemplo 3:
Código CSS
.caixa {
margin: 20px auto;
width: 800px;
height: 200px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1), 0px 0px 20px 10px rgba(0,0,0,0.3), inset 0px 0px 20px 0px rgba(100,100,100,0.5);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1), 0px 0px 20px 10px rgba(0,0,0,0.3), inset 0px 0px 20px 0px rgba(100,100,100,0.5);
-ms-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1), 0px 0px 20px 10px rgba(0,0,0,0.3), inset 0px 0px 20px 0px rgba(100,100,100,0.5);
-o-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1), 0px 0px 20px 10px rgba(0,0,0,0.3), inset 0px 0px 20px 0px rgba(100,100,100,0.5);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,1), 0px 0px 20px 10px rgba(0,0,0,0.3), inset 0px 0px 20px 0px rgba(100,100,100,0.5);
background: rgba(230,230,230,1);
}
Nesse exemplo usei três sombras, cada uma com seus respectivos posicionamentos, desfocagem e cor, seguindo o mesmo padrão dos Exemplos 1 e 2. A primeira sombra adicionada ficará em cima da segunda e assim por diante. Como podemos perceber os valores estão separados por vírgula e o ponto e vírgula (;) é adicionado só no fim, fechando assim a propriedade box-shadow.
Resultado final:
Exemplo 4:
Código CSS
.caixa {
display: block;
position: relative;
margin: 20px auto;
width: 800px;
height: 200px;
background: rgba(230,230,230,1);
}
.caixa::before,
.caixa::after {
content: "";
z-index: -1;
position: absolute;
top: 80%;
bottom: 15px;
width: 50%;
max-width: 400px;
background: rgba(0,0,0,0.5);
-webkit-box-shadow: 0 15px 10px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0 15px 10px 0px rgba(0,0,0,0.5);
-ms-box-shadow: 0 15px 10px 0px rgba(0,0,0,0.5);
-o-box-shadow: 0 15px 10px 0px rgba(0,0,0,0.5);
box-shadow: 0 15px 10px 0px rgba(0,0,0,0.5);
}
.caixa::before {
left: 1%;
right: auto;
transform: rotate(-3deg);
}
.caixa::after {
left: auto1%;
right: 1%;
transform: rotate(3deg);
}
Nesse exemplo fiz um pouco diferente, optei por usar as pseudo-classes :before e :after na div caixa. Na propriedade box-shadow não há novidades, é igual nos exemplos anteriores, o que muda é que adicionei o box-shadow nas pseudo-classes e não na div caixa, assim como o box-shadow cada pseudo-classe tem seus respectivos posicionamentos e rotação (feitas com a propriedade transform).
Resultado final:
Resumindo: Esqueçam o uso de imagens para fazer efeitos de sombra! Com a propriedade box-shadow dá para criar vários tipos de sombra com formatos, direções e cores diferente e o melhor de tudo: é fácil!
Dica: A propriedade box-shadow junto com a propriedade transform e as pseudo-classes :after e :before podem fazer coisas incrivéis!