Tutorial | Efeito - Tree

Aloha! Boa tarde humanos! Eu atualizei o blog de testes, onde ficam os previews de alguns tutoriais daqui! E percebi que faz um bom tempo que não posto efeitos para afiliados, etc. Procurei alguns efeitos e encontrei um que eu adoro e já usei, o Tree. Ele é do blog Kawaii World, créditos totais ♥
Blog de Testes aqui ♥
Ah, o preview do tutorial de hoje está no blog de testes c: Se gostou do efeito e quer aplicar no seu blog...
1. Cole o seguinte código em um gadget de html/javascript, edite o que achar preciso.
<style>
#comida a img{
width: auto;
height: auto;
display: inline;
margin-right: 2px;
margin-left: 1px;
margin-top: 1px;
margin-bottom: 1px;
padding: 3px;
background: #ffe8ed;
border: 1px solid #ffd1dc;
outline: solid 1px #fff;
outline-offset: -5px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#comida a:hover img{
outline: solid 3px transparent;
opacity: 0.5;
outline-offset: -20px;
}
</style>
<div id="comida"> <center>
<a href="seulinkaqui" title="Exemplo"> <img src="linkdasuaimagemaqui.png" /></a>
<a href="seulinkaqui" title="Exemplo"> <img src="linkdasuaimagemaqui.png" /></a>
</center> </div>
Se você não quiser ocupar todo esse espaço no gadget, cole de <style> até </style> no seu HTML acima do nosso querido ]]></b:skin>.

Espero que gostem desse tutorial, uma dica é usar ele em imagens de welcome e goodbye :3
Beijos, Ráh ♥

2 comentários:

  1. Oi Ráh, tudo bem? Espero que sim gata u-u
    Eu já conhecia o tutorial eu já usei muito para elite afiliados, fica bem bacana! E por falar nisso, aceita afiliação? :3 haha esperando sua resposta?
    Kisu ~ Bleeding

    ResponderExcluir
    Respostas
    1. Estou, obrigada! Eu usei para Welcome/Goodbye e ficou lindo também! Aceito sim, obrigada :3

      Excluir