Design Web Design

Como fazer texto com brilho ao passar o mouse com CSS

Efeito é bem simples e usa a propriedade text-shadow, veja como funciona.
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.

Author

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.

12 Comments

  1. Luiz Henrique Reply

    Muito bom sou programador e nem tinha lembrado do box-shadow, valeu me ajudou mesmo

  2. eu nao consegui fazer isso… por favor me ajuda, me mande um email explicando exatamente oq tem que fazer (eu quero o que brilha)
    Obrigado..

    • É o seguinte: você precisa conhecer pelo menos o básico de CSS, ok? Vamos lá:

      A classe que dei de exemplo deve ser aplicada a algum elemento. Digamos que você quer todos os links de texto na página com o efeito, então é só usar na folha de estilos:

      a:hover { text-shadow: 0 0 8px #fff; }
      

      Aí todos pegam o efeito. Se quiser só em links com uma classe, é só atribuir uma e usar do jeito mostrado no artigo. Se preferir apenas os links da área de postagem, use algo como:

      #content a:hover {text-shadow: 0 0 8px #fff; }
      

      Entendeu? Só apontar onde estão os links que ganharão o efeito, e não esqueça de usar em páginas com fundo escuro, senão não aparece nada.

  3. eu nao consegui fazer isso… por favor me ajuda, me mande um email explicando exatamente oq tem que fazer (eu quero o que brilha)
    Obrigado

  4. Oi, eu queria saber se tem como colocar uma sombra nas imagens, mas não com efeito hover, só uma sombra mesmo, você sabe como?

    Abraços!!!

    • Aí, Rosiel, tem o box-shadow, mas só vai ficar legal se usar em imagens com bordas retas – se forem arredondadas, o efeito não fica legal. O CSS fica:

      box-shadow: 5px 5px 3px #888888;

      Nesse caso, seria sombra 5 pixels de deslocamento horizontal e vertical, e 3 pixels de desfoque, num tom de cinza. Aí edite como achar melhor e aponte pra imagem, seja por seletor, classe, etc.

      Abraço!

Write A Comment

Pin