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:
mto bom o blog
ResponderExcluirValeu mesmo
ResponderExcluir