Efeitos de sombra no CSS
- Página anterior Gradiente Radial CSS
- Próxima página box-shadow CSS
Crie efeitos de sombra usando CSS!
Efeitos de sombra no CSS
Usando CSS, você pode adicionar sombras aos textos e elementos.
Neste tutorial, você aprenderá as seguintes propriedades:
text-shadowbox-shadow
Sombra de texto no CSS
CSS text-shadow A propriedade adiciona uma sombra ao texto.
A forma mais simples é especificar apenas a sombra horizontal (2px) e a sombra vertical (2px):
Efeito de sombra de texto!
Exemplo
h1 {
text-shadow: 2px 2px;
}
A seguir, adicione uma cor à sombra:
Efeito de sombra de texto!
Exemplo
h1 {
text-shadow: 2px 2px red;
}
Em seguida, adicione um efeito de desfoque à sombra:
Efeito de sombra de texto!
Exemplo
h1 {
text-shadow: 2px 2px 5px red;
}
O exemplo a seguir mostra o texto branco com sombra preta:
Efeito de sombra de texto!
Exemplo
h1 {
cor: branco;
text-shadow: 2px 2px 4px #000000;
}
O exemplo a seguir mostra a sombra de brilho neon vermelha:
Efeito de sombra de texto!
Exemplo
h1 {
text-shadow: 0 0 3px #FF0000;
}
Múltiplas sombras
Para adicionar várias sombras ao texto, você pode adicionar uma lista de sombras separadas por vírgula.
O exemplo a seguir mostra a sombra de brilho neon de vermelho e azul:
Efeito de sombra de texto!
Exemplo
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
O exemplo a seguir mostra um texto branco com sombras pretas, azuis e escuroazuis:
Efeito de sombra de texto!
Exemplo
h1 {
cor: branco;
text-shadow: 1px 1px 2px preto, 0 0 25px azul, 0 0 5px escuroazul;
}
Você também pode usar a propriedade text-shadow para criar uma borda pura ao redor do texto (sem sombra):
Borda ao redor do texto!
Exemplo
h1 {
cor: amarelo;
text-shadow: -1px 0 preto, 0 1px preto, 1px 0 preto, 0 -1px preto;
}
- Página anterior Gradiente Radial CSS
- Próxima página box-shadow CSS
