Planos a partir de R$ 32/mês Inscreva-se Agora

CSS – Box Shadow

Código | 2.171 | 4 de maio de 2015
CSS Box Shadow

Com o CSS3 é possível projetar sombras a partir de qualquer elemento. A propriedade box-shadow é muito simples, o primeiro valor corresponde à distância horizontal da sombra, o segundo à vertical, o terceiro o blur(“o quanto borrada a sombra deve ser”), o quarto valor é o tamanho da sombra, o quinto a cor e o sexto se ela é interna ou não(inset cria uma sombra interna).

O erro do iniciante é achar que por ter o nome de box-shadow a propriedade só serve para criar sombras. É possível criar diversos efeitos com o box-shadow, como por exemplo o da imagem acima, onde um box-shadow: 0 0 0 20px #693AB6; é utilizado para criar uma sombra que se projeta após a borda do elemento. Como a sombra possui um blur 0, este efeito cria o que se parece com uma moldura de um quadro.

No exemplo, a sombra não sofreu movimentações horizontais ou verticais, por isso o 0 0 inicial. No quarto valor aumentamos a sombra em 20px, por isso ela se projeta para fora do elemento, parecendo ser a borda do mesmo.

Lembrando que é possível usar valores negativos nas distâncias horizontais e verticais. Valores positivos movem para baixo e para a direita, valores negativos movem para cima e para a esquerda.

Mais Dicas

Círculos com CSS

Scroll Suave para Link Interno

Para que serve o Clearfix

Otimize seu CSS com Mixins de SASS

Colapso entre margin-top e margin-bottom