Efeito de Texto com Preenchimento Animado e Contorno

Efeito de Texto com Preenchimento Animado

Este widget cria um efeito visual impressionante de texto sendo “preenchido” por uma animação de faixa branca que revela as letras gradualmente, mantendo uma borda clara visível por todo o contorno das letras.

Recursos:

• Borda branca sutil ao redor das letras com -webkit-text-stroke.
• Preenchimento animado com gradiente linear configurável.
• Compatível com widgets de título (ex: Elementor).
• Suporte a backdrop-filter para desfoque de fundo.

Como Utilizar o Efeito

1. Adicione um widget de título no seu construtor (ex: Elementor).
2. Digite o mesmo texto que será usado na animação (por exemplo, “Sed eiusmod sed vivamus consectetur”).
3. Insira o código CSS no painel de CSS personalizado do widget ou tema.
4. Substitua selector pelo seletor real do seu título, como .elementor-heading-title ou #meu-titulo.
5. Configure o texto dentro do content e ajuste as cores de borda, preenchimento e fundo conforme sua necessidade.
6. Se houver conflitos com a cor do texto original, experimente remover a cor padrão do widget nas configurações.