Tutorial - Efeito Broken

Yoo meus yorguts ^^

Como vão? Eu estou bem :) E espero que com vocês estejam o mesmo!

Ahh, antes de mais nada, eu vou passar bastantes dias ausente, até porque estou viajando, e acho que essa vai ser minha unica postagem daqui onde eu to, até porque vou sair, passear, e taals ;)

O efeito que eu  to trazendo é MUITO lindo, pelomenos eu acho, e eu to tipo, "in love" mesmo com esse efeito :3

E eu acabei de colocar ele na imagem de welcome daqui do blog o//

PREVIEW.

Aperte F3 ou ctrl + F e procure por ]]></b:skin> e a cima cole:

.icons { background-image: url(http://media.tumblr.com/tumblr_m390unzbo31qmub55.png);

background-position: top;

padding: 4px;

margin: 6px;

border: 1px solid #ffffff;

-webkit-box-shadow: 0 0 5px #d1a7a4; 

-moz-box-shadow: 0 0 5px #d1a7a4; 

box-shadow: 0 0 5px #d1a7a4;

-moz-border-radius: 10px 0px 10px 0px;

-webkit-border-radius: 10px 0px 10px 0px;

border-radius: 10px 0px 10px 0px;

opacity:.70;

filter: alpha(opacity=70);

-moz-opacity: 0.7;

-moz-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-moz-transition-duration: 2s;

-webkit-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-webkit-transition-duration: 2s;

-o-transition-property: background-position, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-o-transition-duration: 2s;}

.icons:hover { background-position: bottom;

border: 1px solid #ffffff;

opacity:1.0;

filter: alpha(opacity=100);

-webkit-box-shadow: 0 0 5px #cabbac; 

-moz-box-shadow: 0 0 5px #cabbac; 

box-shadow: 0 0 5px #cabbac;

-moz-opacity: 1.0;

-moz-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-moz-transition-duration: 2s;

-webkit-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-webkit-transition-duration: 2s;

-o-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-o-transition-duration: 2s;}

Onde tá em negrito, é a imagem que vai rolar atrás da sua foto principal, que é uma textura ><

Então eu recomendo que você coloque uma textura , a que você quiser , aí :)

Agora, onde você quiser utilizar o código, 

um gadget javascript, ou outra coisa aí, você cola:

<a href="O LINK"></a><img align="center" class="icons" src="URL DA IMAGEM" width="LARGURA DA IMAGEM" />

Pronto, ai onde tá em negrito é as partes que você pode alterar :)

É isso. Espero que tenham gostado!

E lembrem, se tiverem alguma duvida, me perguntem :3 

E comentem amores ^^

- O código não é meu, então se é seu, avise!