2.3 KiB
2.3 KiB
title | localeTitle |
---|---|
CSS3 Shadow Effects | Efeitos de sombra CSS3 |
Efeitos de sombra CSS3
Com CSS3 você pode criar dois tipos de sombras: text-shadow
(adiciona sombra ao texto) e box-shadow
(adiciona sombra a outros elementos).
Sombra de Texto CSS3
A propriedade text-shadow
pode levar até quatro valores:
- a sombra horizontal
- a sombra vertical
- o efeito de borrão
- a cor
Exemplos:
- Sombra de texto normal
h1 {
text-shadow: 2px 2px 5px crimson;
}
- Efeito de texto brilhante
h1 {
text-shadow: 0 0 4px #00FF9C;
}
Múltiplas Sombras
Para conseguir isso, você simplesmente adiciona uma vírgula entre dois (ou mais) conjuntos de valores:
h1 {
color: white;
text-shadow: 0 0 3px #F10D58, 0 0 7px #4578D5;
}
Sombra de Caixa CSS3
A propriedade box-shadow
pode levar até seis valores:
- (opcional) a palavra-chave
inset
(altera a sombra para uma dentro do quadro) - a sombra horizontal
- a sombra vertical
- o efeito de borrão
- a propagação
- a cor
Exemplos:
.first-div {
box-shadow: 1px 1px 5px 3px grey;
}
.second-div {
box-shadow: 0 0 5px 1px lightgrey;
}
.third-div {
box-shadow: inset 0 0 15px 5px rgba(0,0,0,0.75);
}
Mais Informações:
- MDN web docs
- Verificar o suporte do navegador
- Gerador de sombra de caixa CSS (sinta-se livre para experimentar com sombras de caixa)