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.
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.
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.
Marcadores: CSS