Efeitos em Links Usando Gifs Animados como Imagens de Fundo
Veja como fazer efeitos em links de texto no seu blog ou efeitos em botões de menus usando gifs animados como imagem de fundo. Colocar uma imagem com movimento (animada) como imagem de fundo é da mesma forma que qualquer outra imagem de fundo, mas usando o posicionamento e controlando a repetição da imagem de fundo pode criar ótimos efeitos em links ou menus. Veja no final deste post algumas demonstrações dos efeitos nos links.
Para fazer gifs animados (imagens com movimentos ou trocando de cor) você usar um programa para editar imagens ou até mesmo algum site para criar imagens online. Veja algumas dicas:
Site para Fazer Imagens Online e Criar Banners com Efeitos
Como Fazer Banner: Criar Imagens ou Gifs Animados
Dicas sobre Colocar Efeitos em Fotos/Imagens e Como Fazer Banners
Para usar essas imagens para fazer os efeitos em links temos varias opções como, por exemplo, criar um sublinhado que muda de cor neste caso o recomendável é uma imagem com 1 ou 2 pixels de altura apenas para fazer a linha. Outro efeito interessante é o botão do menu que fica piscando (mudando de cor) neste caso pode ser uma imagem quadrada, mas pode ser de tamanho pequeno, por exemplo, 10x10 pixels.
O código para colocar as imagens animadas como imagem de fundo é o mesmo código (estilo) CSS que qualquer imagem de fundo, mas antes você precisará hospedar as imagens no Blogger ou qualquer outra hospedagem de imagens que você use e sabia como usar e pegar o direct link da imagem (Imagem não aparece no Blog ou Site).
Depois da imagem criada, hospedada e você sabendo o endereço correto da imagem apenas use neste código:
a:hover {background-image: url(endereço da imagem);
background-repeat: repeat-x;
background-position: bottom;}
Esse exemplo é um código ideal para fazer o traçado abaixo do link piscando. Podemos colocar diretamente na pagina editar HTML ou pela pagina especial para adicionar códigos CSS no Blogger. Veja aqui como controlar a repetição e posicionamento da imagem de fundo.
Se você utilizar esse código em algum menu no seu blog para criar efeitos em botões não há necessidade de controlar a repetição ou posicionamento da imagem de fundo, portanto não use o trecho: background-repeat: repeat-x; background-position: bottom.
Leia também:
Criar e Colocar um Menu com SubMenu no Blog
Menu Horizontal com Efeitos no Blogger usando CSS
Naturalmente isso é apenas o primeiro passo e serve como uma idéia inicial porque são praticamente infinitas as possibilidade de efeitos criados com imagens animadas e certamente você terá outras idéias de como usar essa dica no seu blog ou site para atrair a atenção dos seus visitantes.
Neste tutorial falamos como usar gifs animados como imagem de fundo para criar efeitos em links, mas essa mesma idéia funciona em qualquer outra parte do seu blog como, por exemplo: imagem de fundo da pagina (blog), títulos das postagens ou qualquer outra idéia que você tenha. Apenas precisa trocar os nomes dos estilos CSS e pronto. Esse código funcionará da mesma forma em qualquer outra parte do seu blog.
Demonstração de Efeitos em links com imagens de fundo:
Como Criar Gifs Animados para usar como Imagem de Fundo
Para fazer gifs animados (imagens com movimentos ou trocando de cor) você usar um programa para editar imagens ou até mesmo algum site para criar imagens online. Veja algumas dicas:
Site para Fazer Imagens Online e Criar Banners com Efeitos
Como Fazer Banner: Criar Imagens ou Gifs Animados
Dicas sobre Colocar Efeitos em Fotos/Imagens e Como Fazer Banners
Para usar essas imagens para fazer os efeitos em links temos varias opções como, por exemplo, criar um sublinhado que muda de cor neste caso o recomendável é uma imagem com 1 ou 2 pixels de altura apenas para fazer a linha. Outro efeito interessante é o botão do menu que fica piscando (mudando de cor) neste caso pode ser uma imagem quadrada, mas pode ser de tamanho pequeno, por exemplo, 10x10 pixels.
Colocar Imagens Animadas como Imagens de Fundo
O código para colocar as imagens animadas como imagem de fundo é o mesmo código (estilo) CSS que qualquer imagem de fundo, mas antes você precisará hospedar as imagens no Blogger ou qualquer outra hospedagem de imagens que você use e sabia como usar e pegar o direct link da imagem (Imagem não aparece no Blog ou Site).
Depois da imagem criada, hospedada e você sabendo o endereço correto da imagem apenas use neste código:
a:hover {background-image: url(endereço da imagem);
background-repeat: repeat-x;
background-position: bottom;}
Esse exemplo é um código ideal para fazer o traçado abaixo do link piscando. Podemos colocar diretamente na pagina editar HTML ou pela pagina especial para adicionar códigos CSS no Blogger. Veja aqui como controlar a repetição e posicionamento da imagem de fundo.
Se você utilizar esse código em algum menu no seu blog para criar efeitos em botões não há necessidade de controlar a repetição ou posicionamento da imagem de fundo, portanto não use o trecho: background-repeat: repeat-x; background-position: bottom.
Leia também:
Criar e Colocar um Menu com SubMenu no Blog
Menu Horizontal com Efeitos no Blogger usando CSS
Naturalmente isso é apenas o primeiro passo e serve como uma idéia inicial porque são praticamente infinitas as possibilidade de efeitos criados com imagens animadas e certamente você terá outras idéias de como usar essa dica no seu blog ou site para atrair a atenção dos seus visitantes.
Neste tutorial falamos como usar gifs animados como imagem de fundo para criar efeitos em links, mas essa mesma idéia funciona em qualquer outra parte do seu blog como, por exemplo: imagem de fundo da pagina (blog), títulos das postagens ou qualquer outra idéia que você tenha. Apenas precisa trocar os nomes dos estilos CSS e pronto. Esse código funcionará da mesma forma em qualquer outra parte do seu blog.
Demonstração de Efeitos em links com imagens de fundo:
Marcadores: CSS, Efeitos, Imagem de Fundo