- Made By Lisa ☆: Efeito Up / Down

4.8.17

Efeito Up / Down

| |
Olá, meus pudins <3

Estive viajando ultimamente, então, apesar das férias (que acabaram recentemente ç_ç), não pude fazer nada relacionado ao blog. Mas foi muito legal, fui para a Flórida e visitei a Disney <3 quero fazer alguma postagem sobre isso em breve, porém ainda preciso organizar meus pensamentos sobre isso. Foi tão lindo, nem sei direito por onde começar~

Quando finalmente pode usar meu computador novamente, resolvi mexer um pouco em HTML, e, depois de tanto tempo sem ideias para efeitos, consegui criar um que chamei de "up and down". Ele está incluído no próximo layout, porém resolvi postar logo este tutorial, já que estou muito contente com o resultado! Dividi em três categorias, "up", "down" e "up and down", para três resultados diferentes.



Parte 1: Efeito Up

Este é o efeito onde todos os ícones da sidebar irão para cima no modo hover.

Abra seu HTML, e, acima de ]]></b:skin>, cole:

.up {
float: center;
border: 1px solid #b86b63; /* cor da borda */
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
margin: -2px;
}
.up:hover {
transform: translate(0px, -10px);
-webkit-transform: translate(0px, -10px);
-moz-transform: translate(0px, -10px);
-o-transform: translate(0px, -10px);
-ms-transform: translate(0px, -10px);
}

Edite a cor em negrito. Crie um gadget de HTML / Javascript e nele cole o seguinte código:

<a href="LINK" title="NOME"><img class="up" src="URL DA IMAGEM" / /></a>
<a href="LINK" title="NOME"><img class="up" src="URL DA IMAGEM" / /></a>
<a href="LINK" title="NOME"><img class="up" src="URL DA IMAGEM" / /></a>
<a href="LINK" title="NOME"><img class="up" src="URL DA IMAGEM" / /></a>

Parte 2: Efeito Down

Este é o efeito onde todos os ícones da sidebar irão para baixo no modo hover.

Abra seu HTML e acima de ]]></b:skin> cole:

.down {
float: center;
border: 1px solid #b86b63; /* cor da borda */
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
margin: -2px;
}
.down:hover {
transform: translate(0px, 10px);
-webkit-transform: translate(0px, 10px);
-moz-transform: translate(0px, 10px);
-o-transform: translate(0px, 10px);
-ms-transform: translate(0px, 10px);
}

Edite a cor em negrito e, em um gadget de HTML / Javascript, cole:

<a href="LINK" title="NOME"><img class="down" src="URL DA IMAGEM" / /></a>
<a href="LINK" title="NOME"><img class="down" src="URL DA IMAGEM" / /></a>
<a href="LINK" title="NOME"><img class="down" src="URL DA IMAGEM" / /></a>
<a href="LINK" title="NOME"><img class="down" src="URL DA IMAGEM" / /></a>

Parte 3: Efeito Up and Down

Este é o efeito onde um ícone irá para cima enquanto o próximo irá para baixo no modo hover.

Acima de ]]><b:skin>, cole:

.up {
float: center;
border: 1px solid #b86b63; /* cor da borda */
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
margin: -2px;
}
.up:hover {
transform: translate(0px, -10px);
-webkit-transform: translate(0px, -10px);
-moz-transform: translate(0px, -10px);
-o-transform: translate(0px, -10px);
-ms-transform: translate(0px, -10px);
}
.down {
float: center;
border: 1px solid #b86b63; /* cor da borda */
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
margin: -2px;
}
.down:hover {
transform: translate(0px, 10px);
-webkit-transform: translate(0px, 10px);
-moz-transform: translate(0px, 10px);
-o-transform: translate(0px, 10px);
-ms-transform: translate(0px, 10px);
}

Edite as cores em negrito e, em um gadget de HTML / Javascript, cole:

<a href="LINK" title="NOME"><img class="up" src="URL DA IMAGEM" / /></a>
<a href="LINK" title="NOME"><img class="down" src="URL DA IMAGEM" / /></a>
<a href="LINK" title="NOME"><img class="up" src="URL DA IMAGEM" / /></a>
<a href="LINK" title="NOME"><img class="down" src="URL DA IMAGEM" / /></a>

  • Quatro links não são suficientes para mim, o que eu faço?


Para quem tem mais experiência com HTML pode ser uma questão fácil, mas imagino que seja sempre bom deixar um adendo para quem não tem tanta facilidade.

Perceba que os códigos do efeito Up tem uma tag lá no início que o determina como Up, e o mesmo ocorre com os códigos do efeito Down:

  • .up {
  • .down {

E essas tags aparecem novamente nos códigos dos gadgets para identificar o efeito que será usado nelas.

  • <a href="LINK" title="NOME"><img class="up" src="URL DA IMAGEM" / /></a>
  • <a href="LINK" title="NOME"><img class="down" src="URL DA IMAGEM" / /></a>
Então, se você precisa de mais links para os efeitos individuais, é só copiar e colar a linha correspondente quantas vezes for necessário. No caso do efeito up and down, é só intercalar esses dois códigos até dar o número certo.



Espero que esteja bem explicado! Se tiverem alguma dúvida ou sugestão é só deixar nos comentários ^∇^

~Abraços!

6 comentários:

  1. Oi, esse título do post, lembrou sabe o quê? Aquela música do exid: Up Down. Nossa que legal você ter viajado! Deve ter sido daora. Eu também dei uma sumida do blog mas foi por causa de estudos. Faz um post sobre sim. Vou adorar ler. Deve ter sido divertido! Quanto ao tutorial: Eu adoro seus tutorias. Atualmente eu não vejo muito pessoas postando tutoriais como você. Continue fazendo seu trabalho, que eu gosto muito. Acho que eu posso usar num próximo layout. E claro vou creditar seu blog divo! Acho que ficou bem explicado sim. E ficou lindo o efeito.

    Bjinhos e feliz dia dos pais para você (adiantado).
    Snack Cheese | Porquinhos fofinhos. (っゝω・)っ~☆v i s i t e - n o s☆

    ResponderExcluir
    Respostas
    1. Também lembrei quando estava fazendo, apesar de não ouvi-la faz tempo. Simm, foi um tempo muito bom! Que bom que gostou! Sinto falta desses tutoriais também, naquela época eu não sabia criar efeitos, mas depois que aprendi, procuro trazer um pouquinho daquilo de volta :3

      ~Abraços!

      Excluir
  2. Oi Lisa, boa noite! Sou recém chegada aqui no teu blog, mas ficaria feliz em saber da sua incrível experiencia na Disney '3'
    E eu achei muito engraçadinho o efeito, quando usar vou colocar os créditos para você, gostei mesmo e está explicado sim, não se preocupe!
    Harmonizar | Beijos ♡

    ResponderExcluir
    Respostas
    1. Olá, bem vinda!
      Que bom que gostou! Fico feliz em saber disso >3<

      ~Abraços!

      Excluir
  3. Olá Lisaaa! Achei os efeitos bonitinhos. Você tem efeitos bons <33. E como sempre explicando bem explicadinho para gente entender.
    Snack Cheese | Porquinhos fofinhos. (っゝω・)っ~☆v i s i t e - n o s☆

    ResponderExcluir
    Respostas
    1. Olá! Que bom que gostou, obrigada :3

      ~Abraços!

      Excluir

>> Leia o post antes de comentar;
>> Pedir sdv é deselegante, comente sobre a postagem e então deixe seu link no final do post;
>> Se quiser afiliação, peça por aqui mesmo. Mas peço que assuma o compromisso de me colocar em sua elite, atualizar o seu blog e acompanhar o meu;