Tutorial - Efeito Tree

Se sentindo : Cansada.
Boa Tarde gente boa. O único motivo de eu não postar ontem , foi por que estava tentando fazer um layout , e não consegui , comecei a pirar com um monte de códigos então resolvi usar esse layout como base , e coloquei o crédito , claro. Peço desculpas , mais é tipo , muito complicado. Por que do jeito que eu quero não dá. Então fiz as imagens de I Got A Boy , mais as cores do layout é branco , rosa e azul. Dá pra enxergar perfeitamente , não pe igual a o último , totalmente claro. Eu tentei meu máximo mais acho que ainda não é completamente perfeito. Mais acho que dá pro gasto. Créditos

Menu de hoje


Vá em adicionar um javascript e cole dentro dele :

<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: #fff;
border: 1px solid #fff;
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="http://sarang-cute.blogspot.com.br/" title="Sarang Cute"> <img src="http://1.bp.blogspot.com/-3i-DiZ5RtaI/VMPFbPxAUqI/AAAAAAAAUTs/VSrZOzrZr28/s1600/page.jpg" /></a>
<a href="http://yuukamori.blogspot.com.br/" title="Yuuka Mori"> <img src="http://1.bp.blogspot.com/-3i-DiZ5RtaI/VMPFbPxAUqI/AAAAAAAAUTs/VSrZOzrZr28/s1600/page.jpg" /></a>
<a href="http://l-ovelymilkshake.blogspot.com.br/" title="Lovely Milkshake"> <img src="http://1.bp.blogspot.com/-3i-DiZ5RtaI/VMPFbPxAUqI/AAAAAAAAUTs/VSrZOzrZr28/s1600/page.jpg" /></a>
<a href="http://www.blogger.com/" title="Exemplo"> <img src="http://1.bp.blogspot.com/-3i-DiZ5RtaI/VMPFbPxAUqI/AAAAAAAAUTs/VSrZOzrZr28/s1600/page.jpg" /></a>
<a href="http://www.blogger.com/" title="Exemplo"> <img src="http://1.bp.blogspot.com/-3i-DiZ5RtaI/VMPFbPxAUqI/AAAAAAAAUTs/VSrZOzrZr28/s1600/page.jpg" /></a>
<a href="http://www.blogger.com/" title="Exemplo"> <img src="http://1.bp.blogspot.com/-3i-DiZ5RtaI/VMPFbPxAUqI/AAAAAAAAUTs/VSrZOzrZr28/s1600/page.jpg" /></a>
<a href="http://www.blogger.com/" title="Exemplo"> <img src="http://1.bp.blogspot.com/-3i-DiZ5RtaI/VMPFbPxAUqI/AAAAAAAAUTs/VSrZOzrZr28/s1600/page.jpg" /></a><a href="http://www.blogger.com/" title="Exemplo"> <img src="http://1.bp.blogspot.com/-3i-DiZ5RtaI/VMPFbPxAUqI/AAAAAAAAUTs/VSrZOzrZr28/s1600/page.jpg" /></a>
</center>
</div>
Feito? Aperte em salva e veja o resultado. 

2 comentários:

  1. O layout esta ficando lindo {achei ele no seu perfil}, amo I got a boy é a melhor música Ever das Girls Generation♥

    Gosto desde efeito :3
    www.YuukaMori.blogspot.com || Boa Tarde♥

    ResponderExcluir
    Respostas
    1. Sim com certeza é uma das melhores musicas. Eu amo esse efeito. Vou usar em todos layouts kkk
      Volte sempre.

      Excluir

Olá , antes de você comentar , existe regras e gosto de pessoas que respeitem.
- Não fale nenhum palavra
- Aqui é proibido ofender as pessoas
- Não coloque comentários anônimos , se você tem medo , não comente
- Aceito Tags , Celinhos , etc ..

Regras básicas , porém , precisam saber que aqui é um lugar de paz. E eu não quero brigas , a não ser que de alguma form aja. Espero que gostem do blog , e se quiserem seguir , fiquem a vontade. Ate~ (Agora comente).