Como criar efeito glow em texto com css3 na ação hover

O css é um permite utilizar grandes truques para mudar o estilo de um elemento quando o usuário move o curso do mouse sobre este.

Para mudar o estilo de um elemento ao passar o mouse sobre o mesmo, você precisará utilizar o pseudo elemento: hover;

Evento CSS Hover

Usando: hover, podemos mudar para usar este estilo on mouse over. Isto é usado geralmente para exibir um sublinhado no texto link.

1
2
3
4
5
6
7
a{
    text-decoration:none;
}
a:hover{
    text-decoration:underline;
}
Esta funcionalidade já é utilizada a bastante tempo, porém com os recursos disponíveis no CSS3 é possível criar efeitos diferentes.

Passos para fazer o efeito GLOW no texto

No código abaixo eu vou levá-lo através do processo de usar: hover para criar um efeito desbotado brilhando em seus links.

HTML para links

Primeiramente criaremos uma tag ancôra básica com texto dentro.

1
<a href="#">Link Text</a>

O CSS para links

Primeiramente definimos o estilo para os links

1
2
3
4
5
6
7
8
9
a{
    font-size:16px;
    color:#FFF;
    -webkit-transition: all 0.3s ease-in; /*Safari & Chrome*/
      transition: all 0.3s ease-in;
      -moz-transition: all 0.3s ease-in; /* Firefox 4 */
      -o-transition: all 0.3s ease-in; /* Opera */
      text-decoration:none;
}

Esta funcionalidade já existe a muito tempo, porém com a introdução do CSS3 permitiram que designers utilizassem fortemente estes recursos.

O evento HOVER do CSS

Iremos adicionar o estilo para o evento hover quando passar o mouse sobre o link

1
2
3
4
5
6
7
8
9
10
a:hover{
    -webkit-stroke-width5.3px;
      -webkit-stroke-color#FFFFFF;
      -webkit-fill-color#FFFFFF;
      text-shadow1px 0px 20px yellow;
      -webkit-transition: width 0.3s; /*Safari & Chrome*/
      transition: width 0.3s;
      -moz-transition: width 0.3s; /* Firefox 4 */
      -o-transition: width 0.3s; /* Opera */
}

Demo CSS Glow Text on Hover

Fonte: http://www.paulund.co.uk/how-to-create-a-pure-css-glow-text-on-hover

Um comentário sobre “Como criar efeito glow em texto com css3 na ação hover

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s