Como criar multiplas sombras em CSS?
Neste artigo, vamos explorar como criar múltiplas sombras em CSS, utilizando a propriedade filter.
Exemplo simples
Para começar, imagine que você tem um elemento <span> no seu HTML com o texto @martinscode. Para aplicar o efeito de múltiplas sombras com filter, basta adicionar o seguinte código CSS:
span {
color: blue;
filter:
drop-shadow(1px 1px 0px black)
drop-shadow(1px 1px 0px white)
}
~ tã-dã ~ temos o nosso efeito!
Note que: É importante ajustar onde sua sombra irá ficar. Mas como fazer isso?
O comando drop-shadow recebe 4 propriedades referentes a:
- posição da sombra no eixo X (obrigatório)
- posição da sombra no eixo Y (obrigatório)
- quantidade de blur aplicado na sombra (opcional)
- cor da sombra (opcional)
Resumidamente... o eixo X define se a sombra será mais para esquerda ou direita e o eixo Y define se a sombra será mais para cima ou para baixo e o blur é a quantidade de desfoque na sombra.
No nosso exemplo, talvez, você nem consiga visualizar isso direito. Para ficar mais nítido recomendo a você a criar um projetinho e ir testar esses parâmetros!
Mais Dicas
- Quando estiver utilizando um texto a cor principal será definida por color
- Já quando estiver utilizando um outro elemento a cor principal será definida por background-color