[Tutorial] Efeito Cute Outline

Olá minna!

Hoje venho trazer um dos tutoriais daqui do layout do blog.
O turorial é um efeito nas imagens super fofo mas que não é muito exagerado.
Dei o nome de Cute Outline.



Primeiro, vão ao HTML do vosso blog e procuram por:

]]></b:skin>

E em cima desse código, colam:

 .post img {
padding: 1px;
background: #f3f3f3;
-moz-opacity: 0.81;
-khtml-opacity: 0.81;
opacity: 0.81;
filter:alpha(opacity=81);
-webkit-transition-duration: .50s;
border: #ffd6de 1px solid;
box-shadow: inset 1px 1px 0 #fff5f7;
background: #ffe2e8;
padding:2px;
outline: solid 5px rgba(255, 255, 255, .5);
outline-offset: -12px;-webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out;
}
.post img:hover {
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
filter:alpha(opacity=100);
-webkit-transition-duration: .3s;
border: #ffd6de 1px solid;
box-shadow: inset 1px 1px 0 #fff5f7;
background: #ffe2e8;
padding:2px;
outline: solid 5px rgba(255, 255, 255, .5);
outline-offset: -21px;-webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out;
}

Gostaram?
Se usarem, por favor creditem o CF.

Quem quiser visualizar, o efeito está na imagem acima.

Kissus ^^