- 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!

Nenhum comentário:

Postar um comentário

>> 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;