Design

Como fazer texto com brilho ao passar o mouse com CSS

Efeito é bem simples e usa a propriedade text-shadow, veja como funciona.
Google+ Pinterest LinkedIn Tumblr
Anúncios Google

O básico de CSS pode fazer quase milagre no visual e funcionalidades de um site ou blog. Um efeito agradável, especialmente para uso em fundo escuro, é o de texto com link que se ilumina, brilha ao passar o mouse.

Pra criar tal efeito, nada mais que umas poucas regras de CSS. A base é o evento hover (quando passamos o mouse sobre o link) para alterar sua aparência, com a propriedade text-shadow. Sim, sombra. Calma que a gente já explica.

O efeito só fica interessante se o texto for claro sobre fundo escuro.

Antes de começar, abra a página de exemplos, aqui. Ou abra a cada exemplo.

Exemplo básico 1

.exemplo1 {
color: #fff;
font-weight:bolder;
text-decoration:none !important
}
.exemplo1:hover {
text-shadow: 0 0 4px #fff;
}

A classe .exemplo1 é só para melhorar o texto. Estamos indicado que o texto será da cor branca, que a fonte será mais forte (bolder), e não haverá decoração no texto (útil para links que podem ter underline.

Importante é a classe .exemplo1:hover. Ela usa o pseudosseletor hover para ser ativada quando o elemento tiver o mouse passado sobre ele. Será então ativado a propriedade text-shadow, com 3 valores em pixels e um hexadecimal. Os três valores são respectivamente:

  • Distância x: aumente e a sombra se desloca mais para a direita do texto
  • Distância y: aumente e a sombra se desloca mais abaixo do texto
  • Desfoque do efeito de sombra: aumente e a sombra fica mais desfocada, borrada.
  • O hexadecimal indica sombra

“Mas como assim sombra? Não era texto brilhante?” Sim, usamos a propriedade de criar sombras para criar sombras mais claras que o fundo e com desfoque, simulando brilho externo.

Veja o Exemplo 1 na página de exemplos, aqui.

“Mas esse brilho é muito fraquinho…”

Pra nossa sorte, o text-shadow aceita múltiplos valores separados por vírgula, e cada uma cria uma “camada” de sombra/brilho. Para entender, veja o…

Exemplo 2

.exemplo2 {
color: #fff;
font-weight:bolder;
text-decoration:none !important
}
.exemplo2:hover {
text-shadow: 0 0 4px #fff, 0 0 4px #ff0;
}

Veja o exemplo 2 aqui. Note como o brilho é bem mais intenso — porque tem duas camadas de sombra, observe o .exemplo2:hover.

Exemplo 3

Usando esses múltiplos valores, podemos criar efeitos muito interessantes, como um texto em “etapas”.

.exemplo3 {
color: #fff;
font-weight:bolder;
font-size: 3em;
text-decoration:none !important
}
.exemplo3:hover {
text-shadow: 
3px 3px 0px #eaeaea,
6px 6px 0px #ccc,
9px 9px 0px #777,
12px 12px 0px #333;
}

Veja o exemplo 3 aqui.

A imagem, para quem usa Internet Explorer e não verá nada de anormal ao passar o mouse nos links…

efeitos de text-shadow vistos no Chrome

Com criatividade, você consegue efeitos muito bacanas, como esses de neon, por exemplo. Ou brilhos em várias direções, como textos-fantasma:

.exemplo4 {
color: #fff;
font-weight:900;
font-size: 2.5em;
text-transform: capitalize;
text-decoration:none !important
}
.exemplo4:hover {
text-shadow: 
3px 3px 6px #ccc,
-6px -6px 3px #333,
-9px 9px 7px #555,
12px -12px 7px #444
}

Exemplo 4 aqui.

Vale notar que neles vai bem mais coisa na receita (css transitions), mas a base também é com css text-shadow.

Navegadores antigos?

Só um problema: não funciona no Internet Explorer (ah, Internet Explorer…). Existem alguns métodos, usando filters, mas não recomendo, já que apresentam inconsistências mesmo entre versões do Internet Explorer. E honestamente, não acho legal ficar criando alternativas para um único navegador que não se adapta às novidades.

O filtro Glow pode ser usado para dar brilho em texto no Internet Exploder, digo Explorer, mas sem o efeito hover.

filter:progid:DXImageTransform.Microsoft.Glow(Color=#ffffff, Strength=1); 
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#ffffff, Strength=1)";
}

Com isso, temos uma sombra na cor branca, com força 1.

Se tiverem dúvidas, comentem.

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

Pin