Efeito Candy

Hey! Hoje é dia de efeito em bordas! E venho trazer uma borda para quem ama layouts coloridos, por isso já aviso cuidado com a demasia para não se tornar "tosco" ou desconfortável para quem vê. O efeito candy é uma borda colorida em degrade. Os créditos vão para o blog Chá com Anjos, espero que gostem do tutorial.

Brevia do efeito

1.Escolha o blog qual deseja aplicar, e vá ate seu HTML. Chegando lá ative a pesquisa cm o atalho Ctrl+U e pesquise por ]]></b:skin>, acima dele cole:

Códigos

.candy{
transition:All 1s ease-in;
-webkit-transition:All 1s ease-in;
-moz-transition:All 1s ease-in;
-o-transition:All 1s ease-in;
transform: rotate(0deg) scale(1) skew(0deg) translate(2px);
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(2px);
-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(2px);
-o-transform: rotate(0deg) scale(1) skew(0deg) translate(2px);
-ms-transform: rotate(0deg) scale(1) skew(0deg) translate(2px);
background:-webkit-gradient(linear, 58% 100%, 0% 4%, from(#8FA8FF), to(#FF366E));
padding:5px;
}
.candy:hover{
transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
-webkit-transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
-moz-transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
-o-transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
-ms-transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
background:-webkit-gradient(linear, 58% 100%, 0% 4%, from(#8FA8FF), to(#FF366E));
padding:5px;
}

Salve!

2. Agora vá ate Layout e abra um novo gadget/javascrit, dentro dele cole:

Códigos

<a href="URL DA IMAGEM"><img border="0" class="candy" src="URL DA IMAGEM" /></a>
<a href="URL DA IMAGEM"><img border="0" class="candy" src="URL DA IMAGEM" /></a>
<a href="URL DA IMAGEM"><img border="0" class="candy" src="URL DA IMAGEM" /></a>

Salve e prontinho!