Estilizando com a propriedade CSS box-shadow
Aprenda a usar a propriedade CSS box-shadow para estilizar elementos com sombras, melhorando a estética e usabilidade.
A propriedade box-shadow do CSS permite adicionar sombras aos elementos, oferecendo controle sobre tamanho, desfoque, expansão e cor. Este recurso melhora a profundidade e o destaque visual, sendo uma escolha popular para estilizar botões, cartões e outros componentes de UI, aprimorando tanto a estética quanto a usabilidade.
Neste artigo, exploramos a fundo a propriedade box-shadow. Começamos com uma análise detalhada de sua sintaxe, explorando técnicas avançadas como sombras em camadas, neon e neumórficas. Além disso, fornecemos uma tabela de compatibilidade de navegadores, exemplos práticos e um gerador interativo de box-shadow para ajudar na aplicação eficaz desses estilos.
A sintaxe
box-shadow: ;
| Propriedade | Descrição |
|---|---|
x-offset | Define a posição horizontal da sombra. Positivo move para a direita, negativo para a esquerda. |
y-offset | Define a posição vertical da sombra. Positivo move para baixo, negativo para cima. |
blur-radius | Define a suavidade da sombra. Valores mais altos criam sombras mais difusas. |
spread-radius | Determina o tamanho da sombra. Valores positivos expandem, negativos reduzem. |
color | Especifica a cor da sombra em HEX, rgba() ou hsla(). |
Exemplo
.card-1 { box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5); }Usaremos frequentemente cores rgba() devido ao valor alfa, permitindo controle de opacidade, essencial para criar sombras realistas. Em ambientes bem iluminados, sombras não são puramente pretas; em vez disso, adotam tons sutis influenciados pela luz ambiente.
