7.1 Propriedade text-shadow
A propriedade text-shadow no CSS permite adicionar sombras ao texto, criando um efeito de profundidade e melhorando a percepção visual. Essa propriedade oferece flexibilidade na configuração das sombras, incluindo controle do deslocamento, desfoque e cor da sombra.
A propriedade text-shadow define a sombra para o texto dentro de um elemento. Ela permite controlar a posição, o desfoque e a cor da sombra, adicionando um destaque visual aos elementos de texto.
Sintaxe:
element {
text-shadow: offset-x offset-y blur-radius spread-radius color;
}
Parâmetros:
offset-x: deslocamento da sombra na horizontaloffset-y: deslocamento da sombra na verticalblur-radius: raio de desfoque da sombra (opcional)color: cor da sombra (opcional)
Valores:
offset-xeoffset-y: definem o deslocamento da sombra em relação ao texto. Podem ser valores positivos ou negativosblur-radius: determina o grau de desfoque da sombra. Quanto maior o valor, mais desfocada será a sombra. Valor padrão é 0 (sem desfoque)color: define a cor da sombra. Se a cor não for especificada, a cor do texto é usada
Exemplo de uso:
.shadow-basic {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
.shadow-blur {
font-size: 24px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.shadow-color {
font-size: 24px;
text-shadow: 2px 2px 2px red;
}
.shadow-multiple {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5), -2px -2px 2px rgba(0, 0, 0, 0.3);
}
<body>
<p class="shadow-basic">Sombra básica</p>
<p class="shadow-blur">Sombra com desfoque</p>
<p class="shadow-color">Sombra com cor</p>
<p class="shadow-multiple">Várias sombras</p>
</body>
Explicação do código:
.shadow-basic: aplica uma sombra simples com deslocamento de2pxna horizontal e vertical, raio de desfoque de2pxe cor preta semitransparente.shadow-blur: adiciona um maior grau de desfoque (5px), criando uma sombra mais desfocada.shadow-color: aplica uma sombra com cor (vermelha).shadow-multiple: aplica duas sombras com diferentes deslocamentos e desfocagens, criando um efeito complexo e em camadas
7.2 Exemplos
1. Sombra suave
Sombra suave com grande raio de desfoque:
.soft-shadow {
font-size: 24px;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
<body>
<p class="soft-shadow">Sombra suave do texto</p>
</body>
Explicação do código:
.soft-shadow: aplica uma sombra suave sem deslocamento e com grande raio de desfoque (10px), criando um leve efeito de brilho ao redor do texto
2. Sombra vibrante
Sombra com cor vibrante e pequeno desfoque:
.colorful-shadow {
font-size: 24px;
text-shadow: 3px 3px 5px blue;
}
<body>
<p class="colorful-shadow">Sombra com cor vibrante</p>
</body>
Explicação do código:
.colorful-shadow: aplica uma sombra com cor vibrante (azul), deslocamento de3pxe raio de desfoque de5px
3. Várias sombras
Várias sombras com diferentes parâmetros:
.multi-shadow {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5), -2px -2px 5px rgba(255, 0, 0, 0.5);
}
<body>
<p class="multi-shadow">Várias sombras de texto</p>
</body>
Explicação do código:
.multi-shadow: aplica duas sombras com diferentes parâmetros: uma com pequeno deslocamento e desfoque, e outra com grande deslocamento e desfoque em cor vermelha
7.3 Pontos importantes
Pontos importantes ao usar text-shadow
Compatibilidade de navegadores
A propriedade text-shadow é suportada por todos os navegadores modernos, incluindo Google Chrome, Firefox, Safari, Edge e Opera. No entanto, é importante verificar a exibição das sombras em versões mais antigas dos navegadores para garantir a compatibilidade cross-browser.
Desempenho
O uso de sombras complexas com muitos deslocamentos e desfoque pode afetar o desempenho, especialmente em dispositivos móveis. Otimize as sombras para melhor desempenho e teste em vários dispositivos.
Acessibilidade
Certifique-se de que as sombras não prejudiquem a leitura do texto. O contraste entre o texto e o fundo deve permanecer suficiente para todos os usuários, incluindo aqueles com deficiências visuais.
A propriedade text-shadow fornece ferramentas sólidas para criar sombras de texto em CSS. Ela permite adicionar vários efeitos, desde sombras simples até sombras complexas em camadas com diferentes cores e desfoque.
O uso de text-shadow ajuda a melhorar a percepção visual do texto, adicionando profundidade e volume ao design das páginas web. É importante lembrar da compatibilidade de navegadores e do desempenho ao aplicar sombras complexas, assim como da acessibilidade para todos os usuários.
GO TO FULL VERSION