Entendendo como as sombras funcionam

Sombras com CSS são bem fáceis de criar e entender, tão fáceis, que a partir de hoje você meu caro leitor, nunca mais vai precisar de nenhum box-shadow generator em sua vida ;)

A propriedade box-shadow

Sua syntax é bem simples:

  .quadrado {
  box-shadow: 1px 1px 1px 1px #000;
}

1 - Sombra horizontal - Passamos um valor, que quando positivo gera uma sombra para a direita e quando negativo gera para a esquerda.

2 - Sombra vertical - Passamos um valor que quando positivo gera uma sombra para baixo e quando negativo gera para cima.

3 - Desfoque (opcional) - Quanto maior o valor mais desfocado :)

4 - Propagação (opcional) - Define o tamanho da sombra, se o valor for 0, a propagação fica automaticamente com o mesmo valor do desfoque.

5 - Cor - Não precisa explicar, mas vou deixar uma dica: para criar sombras com transparência vocês podem passar a cor no formato rgba(), onde a transparência é o último parâmetro.

  .quadrado {
  box-shadow: 1px 1px 1px 1px rgba(0,0,0,.5);
}

Sombra simples

Uma sombra básica, de boas, mas já é muito legal ;)

Sombra com desfoque

Desfocando nossa sombra de leve.

Sombra interna

Opa, tem coisa nova ai. Para determinarmos que uma sombra será interna, adicionamos o valor inset em nossa propriedade box-shadow.

Multiplas sombras

Da mesma forma que podemos adicionar multiplos transforms, aqui também podemos criar multiplas sombras, cada uma com seus próprios valores.

kage bunshin no jutsu (clone das sombras)

A vlw! Virou naruto agora isso aqui né. Foi mau pessoal, mas eu não resisti a fazer esse exmplo :)

Conclusão

Sombras são iradas e são grandes aliadas na hora de criar nossos desenhos, em breve quando combinarmos com outras técnicas veremos seu verdadeiro potêncial.

Até amanhã.

<-- #5 - Animações (parte 1) | Lista completa | #7 - Pseudo-elementos -->


1,154 0 3