Transição com CSS: Transições de Cores (Degrade) nos links

Veja como mudar a cor dos links lentamente criando um efeito degrade na transição das cores usando CSS. Este é um código simples para você acrescentar ao HTML do seu blog ou site e criar o efeito de transição (css transition) para que ao passar o mouse sobre os links eles mudem de cor devagar como se fosse um degrade entre a cor atual e o efeito hover (mouse sobre o link). Além da cor do texto esse código faz o mesmo com as cores de fundo do blog.


Código CSS do Efeito Transição


Passe o mouse sobre o link abaixo para ver a demonstração do efeito de transição:


O código para fazer isso é:

a {transition: all 0.5s linear;}

As cores do texto, borda e fundo são códigos CSS comuns que você pode ver nos links abaixo:
Colocar ou alterar as bordas
Como Formatar Texto do Blog: Mudar Cor, Tamanho e Tipo das Letras

Você pode colocar esse código no Blogger pela pagina Modelo > Personalizar > Avançado > Adicionar CSS ou se achar mais fácil diretamente na pagina editar HTML do Blogger.

O funcionamento do código é muito simples ele cria uma transição de cores entre a cor padrão do link e a cor do efeito hover (quando o mouse está sobre o link) tanto na cor do texto como na cor de fundo se houver.

A única coisa que você precisa alterar é o tempo da transição: 0.5s. Neste exemplo é meio segundo então altere como desejar.

Leia também:
Como Fazer Efeitos em Fotos e Imagens do Blog com CSS
Como Colocar Efeito Arco-Íris nos Links do Blog
Efeito Estrelinhas Coloridas no Mouse

O código CSS transition tem varias outras configurações e aplicações que vamos falar futuramente porque seriam muitos detalhes sobre funções diferentes num único post. Então esperamos seus comentários ou duvidas sobre o assunto.

3 comentários :