Propriedade text-shadow
A propriedade text-shadow
é utilizada para adicionar sombras ao texto.
Sintaxe
A sintaxe da propriedade text-shadow
é a seguinte:
.seletor {
text-shadow: h-shadow v-shadow blur-radius color;
}
h-shadow
: Define o deslocamento horizontal da sombra.v-shadow
: Define o deslocamento vertical da sombra.blur-radius
: Opcional. Define o desfoque da sombra. Quanto maior o valor, mais difusa será a sombra.color
: A cor da sombra.
Exemplos
Sombra básica
.texto-sombra {
text-shadow: 2px 2px 4px #888888; /* Sombra deslocada 2px horizontal e 2px vertical, com desfoque de 4px e cor cinza */
}
Sombra com maior desfoque
.texto-desfoque {
text-shadow: 1px 1px 10px #FF4500; /* Sombra com deslocamento de 1px e desfoque de 10px, cor laranja */
}
Múltiplas sombras
.texto-multi-sombra {
text-shadow: 2px 2px 2px #FF6347, -2px -2px 2px #87CEEB; /* Duas sombras: uma deslocada para a direita e para baixo, outra deslocada para a esquerda e para cima */
}