quinta-feira, 2 de agosto de 2012

Efeito "Vira-bola" na equipe

Boa tarde, agora que eu digo isso KKKK vou mostrar como funciona:

Agora, leia mais para poder ver como fazer..
Vá em Modelo -> Editar HTML -> Tecle F3 e procure por: body {, cole esse código abaixo depois de fechar o código do body { :
.efeito {
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
-webkit-transition-duration: .80s;
}
.efeito:hover {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-border-radius: 70px;
}
.efeito2 {
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
-webkit-transition-duration: .80s;
}
.efeito2:hover {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-border-radius: 70px;
}
Como diz na imagem abaixo:

Agora, salve. Vá em Layout -> Adicionar um Gadget, escolha HTML/Javascript e lá, cole:
<a href="URL do seu site" title="Seu nome"><img src="URL da imagem" class="efeito" /></a>
<a href="URL do site do seu companheiro" title="Nome dele"><img src="URL da imagem dele" class="efeito2" /></a>
Atenção: as imagens devem ser usadas apenas de avatares médios! Por isso, pensei melhor e trouxe algumas imagens do Garota Differente:
                     
São essas amores, muchos beijos  <:   Tutorial achado no My Best World.. Daniiela.

2 comentários: