📘 Introdução
Na aula de hoje, vamos aprender como adicionar sombras às caixas (ou blocos) dos nossos elementos em HTML usando CSS.
Esse recurso é feito com a propriedade box-shadow e serve para criar profundidade e destaque visual.
As sombras ajudam a simular luz e profundidade, deixando o design mais moderno e agradável aos olhos do usuário.
⚙️ Sintaxe básica
A sintaxe geral da propriedade box-shadow é a seguinte:
box-shadow: deslocamentoX deslocamentoY desfoque cor;
Os valores funcionam assim:
- deslocamentoX → Move a sombra na horizontal (para direita ou esquerda).
- deslocamentoY → Move a sombra na vertical (para cima ou para baixo).
- desfoque → Define o quanto a sombra será suave.
- cor → Define a cor e a transparência da sombra (com
rgba()).
🎨 Exemplos Práticos
1️⃣ Sombra Suave:
.exemplo {
box-shadow: 5px 5px 12px 6px rgba(0,0,0,0.3);
}
2️⃣ Sombra Mais Forte:
.exemplo {
box-shadow: 10px 10px 25px 10px rgba(0,0,0,0.5);
}
3️⃣ Sombra Colorida:
.exemplo {
box-shadow: 5px 5px 10px rgba(0, 128, 255, 0.6);
}
4️⃣ Sombra Interna (inset):
.exemplo {
box-shadow: inset 5px 5px 16px 5px rgba(0,0,0,0.4);
}
💡Dicas Importantes
Você pode combinar várias sombras na mesma caixa, separando-as por vírgula:
box-shadow: 2px 2px 5px rgba(0,0,0,0.4),
-2px -2px 5px rgba(255,255,255,0.3);
Isso cria um efeito de **luz dupla**, ótimo para botões, cards ou blocos com estilo “neumorphism”.
🧠 Conclusão
A propriedade box-shadow é simples, mas poderosa!
Ela permite dar vida aos seus layouts, simulando luz e profundidade sem precisar de imagens.
Experimente ajustar os valores e observe como pequenas mudanças criam efeitos completamente diferentes.