Efeito "Candy"

Ainda não respondi os comentários do post passado, tenham calma que vou fazer isso logo. Como eu disse, meu PC está sem espaço, e eu vou precisar fazer uma limpa nele, quero baixar alguns animes e não vai caber no HD. Enquanto isso talvez eu fique um pouco sumida, além da limpa no PC, vou tentar ir à aula pelo menos metade da semana, estou com medo de repetir por frequência, e faz quase um mês que não vou a aula de química. Estou com saudades de aprender a nomenclatura de algum composto que nunca vou saber o que é de verdade. Sabem uma coisa chata? Odeio quando estou escrevendo e a última palavra fica na linha de baixo -.-

Faz tempo eu eu não posto aqui um efeito para imagens. Ultimamente todo mundo anda usando o mesmo efeito (até eu!) e eu achei legal postar um efeito simples, mas que ao mesmo tempo fosse bonito. O nome do efeito é "candy" e fui eu mesma que bolei ele. O efeito pode ser usado em elites de afiliados, e fica mais bonito em blogs que tem duas cores no layout. Quem tiver layout azul e rosa vai dar sorte, porque fiz o efeito com essas cores mesmo. Quem tiver um layout de outra cor terá que editar os códigos. Vamos logo ao efeito:

Live Preview

1- No HTML do seu blog, cole o seguinte código:

.chocolate {
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;
}
.chocolate: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;
}

2- Para usar:

<a href="LINK DO BLOG"><img border="0" class="chocolate" src="LINK DA IMAGEM" /></a>

Explicando

transition:All 1s ease-in;

-webkit-transition:All 1s ease-in;

-moz-transition:All 1s ease-in;

-o-transition:All 1s ease-in;

Se refere a transição, que seria o tempo que o efeito demora a acontecer. 

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);

Transformação da imagem. Recomendo não alterar nada.

background:-webkit-gradient(linear, 58% 100%, 0% 4%, from(#8FA8FF), to(#FF366E));

Edite esta linha, que corresponde ao fundo das imagens (borda em degradê). O primeiro código é a cor da parte de cima da borda (primeira cor do degradê) e o segundo da cor parte debaixo da borda (segunda cor do degradê).

padding:5px;

Tamanho da borda.

Os códigos com ":hover" são os mesmos que o de cima, a única diferença é que eles se referem apenas quando passa o mouse.

Espero que gostem do efeito.

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar