Drop-shadows são muito fáceis de criar usando a tecnica de pseudo-elementos. É uma maneira agradável e robusta para progressivamente melhorar um projeto. Este post é um resumo da técnica e algumas das possíveis aplicações.

Suporte: Firefox 3.5 +, 5 + Chrome, Safari 5 +, Opera 10,6 +, IE 9 +

A técnica básica


Não há necessidade de marcação extra, o efeito pode ser aplicado a um único elemento. Um grupo de pseudo-elementos são gerados a partir de um elemento e, em seguida, empurrado para trás dele. 

.drop-shadow {
   position:relative;
   width:90%;
}
.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
}



Os pseudo-elementos necessitam ser posicionados e dadas as dimensões explícitas ou implícitas.

.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
}



O próximo passo é adicionar uma caixa de sombra CSS3 e aplicar as transformações. Diferentes tipos de sombra-gota podem ser produzidos através de variação desses valores e os tipos de transformações inseridas.

.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
   transform:rotate(-3deg);
}



Um dos pseudo-elementos, que precisa ser posicionado do outro lado do elemento é girado na direção oposta. Isso é feito facilmente, substituindo apenas as propriedades que precisam ser diferentes.

.drop-shadow:after{
   right:10px;
   left:auto;
   -webkit-transform:rotate(3deg);
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
 }



O código do núcleo final é como apresentado abaixo. Existe apenas mais uma adição max-width para evitar a queda de sombra e estender muito para abaixo ou deformandar o mesmo.

.drop-shadow {
   position:relative;
   width:90%;
}
.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   max-width:300px;
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
   transform:rotate(-3deg);
}
.drop-shadow:after{
   right:10px;
   left:auto;
   -webkit-transform:rotate(3deg);
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
 }

Firefox 3.0 sem problemas neste momento


Alguns pseudo-elemento requerem uma solução alternativa para evitar a quebra no Firefox 3.0, porque o navegador não suporta muito bem o posicionamento dos pseudo-elementos. Isso geralmente envolve implicitamente suas dimensões usando deslocamentos.

No entanto, estamos apenas usando box-shadow que o Firefox 3.0 não suporta e também irá ignorar o position:absolute na declaração dos pseudo-elementos. Isto deixará com o padrão de estilo display:inline . Como resultado, não há nenhum problema ajustar explicitamente o pseudo-elemento width e height , porque não vai ser aplicado ao pseudo-elementos no Firefox 3.0.

Outras possiveis melhorias


A partir desta base, existem muitas maneiras de ajustar o efeito, aplicando inclinação para os pseudo-elementos e modificar os estilos do próprio elemento.Ao adicionar um border-radius ao elemento que você pode dar a aparência de ondulações página.

.drop-shadow {
   -moz-border-radius: 0 0 120px 120px / 0 0 6px 6px;
   border-radius: 0 0 120px 120px / 0 0 6px 6px;
}