Esses dias precisei entender um pouco mais sobre o uso do Box Shadow e por isso vou trazer algumas informações e dicas boas para você.
A principal função do Box Shadow é a aplicação de sombras a elementos, geralmente utilizados em caixas distrubuídas no produto.
Vamos entender a sintaxe do Box shadow e tem bonus no final do artigo.
A sintaxe do box-shadow é a seguinte:
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;Entendendo:
- Primeiro campo sombra horizontal, valores positivos para direita, valores negativos para esquerda;
- Segundo campo sombra vertical, valores positivos abaixo do elemento, valores negativos acima do elemento;
- Terceiro campo, volume do blur quando mais positivo mais esfumaçado, quanto menos mais denso;
- Quarto item, cor da sombra, No Safari (no PC), o parâmetro de cor é obrigatório. Se você não especificar a cor, a sombra não será exibida.
Para aplicar no firefox e web-kit:
-moz-box-shadow: 0 0 0 #000;-webkit-box-shadow: 0 0 0 #000;Mantendo a mesma sintaxe já explicada.
Valores utilizados:
| Valor | Descrição |
| none | Valor padrão. Nenhuma sombra é exibida |
| h-offset | Obrigatório. O deslocamento horizontal da sombra |
| v-offset | Obrigatório. O deslocamento vertical da sombra. |
| blur | Opcional. O raio do embaçamento. |
| spread | Opcional. O raio de propagação. |
| color | Opcional. A cor da sombra. O valor padrão é a cor do texto. |
| inset | Opcional. Muda a sombra de uma sombra externa (início) para uma sombra interna |
| initial | Define esta propriedade com seu valor padrão. |
| inherit | Herda essa propriedade de seu elemento pai |
Bônus 1 – Lista com 91 exemplos, basta copiar e colar.
Bônus 2 – Gerador automático para usar em projetos React Native
E ai? Gostou do conteúdo? Quais outros elementos podemos explorar?
