Decorações com Gifs Atrás do Cabeçalho do Blog

Esse tutorial serve para adicionar efeitos atrás do cabeçalho do blog usando imagens animadas do tipo gif. Para que fique mais bonitinho, você poderá usar a imagem de cabeçalho em png (sem plano de fundo), combinando com 1 ou 2 gifs, por exemplo, daqueles transparentes com brilhinhos ou coloridinhos, enfim, deixei alguns como sugestão. Se você reparar ali no cabeçalho atual do blog, verá o resultado. Aí embaixo, outro exemplo com corações rosa caindo:

A imagem do cabeçalho não vai mudar em nada, no exemplo acima mudou porque eu fiz um gif de um vídeo capturado no meu celular

1. Acesse Tema - Editar HTML. Procure (Ctrl+F) por /b:skin e acima dele cole o código:

#Header1_headerimg {
    background-repeat: repeat-x;
    background-image: url(URL-DO-GIF);
    background-position: top;
    }

Bem básico não é? E bem simples de entender:
background-repeat: repeat-x; => é como o gif vai repetir; repeat-x significa que vai ficar repetindo na horizontal. Você pode usar repeat-y, para repetir verticalmente ou no-repeat para não repetir ou repeat para repetir por todo o plano de fundo do cabeçalho.
background-image: url(URL-DO-GIF); => aí você coloca o endereço da imagem gif, podendo usar mais de uma, já já mostro como.
background-position: top; => é a posição em que o gif vai aparecer, que pode ser no topo - top, abaixo - bottom, à esquerda - left ou direita - right, center - centro.

Se for usar mais de um gif, o código seria assim:

#Header1_headerimg {
    background-repeat: repeat-y, repeat-x;
    background-image: url(URL-DO-GIF-1), url(URL-DO-GIF-2);
    background-position: top,center;}

Aí, em background repeat e position você define de acordo com o gif 1 e 2, ou seja, no exemplo acima, repeat-y e top se referem ao GIF1, quer dizer que ele irá se repetir verticalmente desde o topo, já o GIF2 vai repetir na horizontal e no centro.

Agora os gifs; eles foram encontrados no Cantinho da Luma, e pelo tumblr.com.

                                                          












Você pode usar o Photoshop para editá-los, que nem fiz com esses:
 
Basta usar a opção de linha do tempo (Janela - Linha do tempo) que te mostrará todas as camadas e quadros de animação de uma imagem gif; selecione o quadro e a camada correspondente a ele para editar cores, girar ou fazer qualquer ajuste (Imagem - Ajustes) mudando cor, brilho, saturação, luminosidade, matiz...

É isso...
ヾ(＾∇＾) ☆

Imagem do início do post: pexels.com

0 Comments

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up