Como adicionar sombras em elementos e textos com box-shadow e text-shadow
O CSS oferece duas propriedades para adicionar sombras: box-shadow para elementos e text-shadow para textos.
A propriedade box-shadow adiciona uma sombra ao redor de um elemento. Ela aceita até cinco valores.
Carregando...Exemplo básico:
Carregando...2px: sombra deslocada 2px para a direita;4px: sombra deslocada 4px para baixo;8px: nível de desfoque da sombra;rgba(0, 0, 0, 0.15): cor preta com 15% de opacidade.Valores negativos no deslocamento movem a sombra para a esquerda e para cima:
Carregando...Adicionando a palavra inset, a sombra aparece por dentro do elemento.
Carregando...Você pode empilhar várias sombras separando com vírgula.
Carregando...Camadas múltiplas criam efeitos de profundidade mais naturais.
A propriedade text-shadow adiciona sombra ao texto. A sintaxe é mais simples: deslocamento-x, deslocamento-y, desfoque e cor.
Carregando...Também aceita múltiplas sombras separadas por vírgula, o que permite criar efeitos como brilho ou contorno:
Carregando...