Efeito "Tree"

Wopie!
Eu realmente adorei esse layout,exceto pelos comentários é claro. Eu não sei,mais determinado uma numeração de códigos a tag ]]>< não funciona,queria aprender a prolongar ela e tals. Mas infelizmente não sei. Ter feito um layout próprio é muito bom,eu adoro coisas só minhas hehe'. Eu demorei muito para reabrir o blog,eu sei é que aqui faltou luz por umas três horas aqui e ai enrolou bastante porque eu contava em abri-lo lá pelas oito da noite. Tirando que fiquei brigando com a burra mulher da Globo News que ficou falando "kawaii" errado,ela falava: Cauai e não Acai que é o certo (pelo menos na internet falam assim). Mas chega de enrolar vamos falar do post.

Essa postagem foi feita porque primeiramente o KW está naquilo de "fecha/abre" e ai não dá para pegar os códigos que quer mesmo. Mas ai eu fui lá hoje de tarde (umas duas horas que o KW ficou aberto pelo menos para mim que fiquei 2 anos sem luz) e peguei uns códigos bem úteis tanto para mim quanto para vocês e salvei num bloquinho. Ai quando a falta de inspiração mandar beijos eu pego e posto. Mas vamos falar desse post,eu como disse salvei um monte mas esse...eu amo acho muito cute e principalmente porque não precisa ir no Html é só ficar no HTML/JS. É o primeiro tutorial (de html) que eu posto aqui então espero que eu não goste porque ai vou postar sempre e fica chato,demais.
Como é bem fácil,é só ir em html/java script e colar o código abaixo:

<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="LINK" title="TITULO"> <img src="http://static.tumblr.com/0xqvkot/XWpmsgcou/1850.png" /></a>

<a href="LINK" title="TITUTLO">  <img src="LINK" /></a>

</center>

</div>

Para trocar a borda fininha pela mais grossinha é só trocar a cor #ffe8ed pela #ffd1dc.
Beijos! E digam o que acharam do layout!