22 de mar de 2013

Efeito Spin-Image (#1)


Oi ^^

Hoje fiquei a tarde inteira tentando fazer um... "menu" para imagens, e acho que deu certo, mas está muito enfeitado, não sei se vão querer usar. 

Se quiser ver a preview, clique aqui
Gostou? Clique em Leia Mais.


Vá ao HTML do seu layout, procure por ]]></b:skin>, e aplique o seguinte código acima dele:

.border{

opacity: 0.6;

-webkit-transition: 0.5s;

outline: 1px dashed #000;

outline-offset: 0px;

-webkit-transition-duration: .20s;
}
.border:hover {
-webkit-transform: rotate(360deg);
opacity: 1.7;
outline: 1px solid #000;
outline-offset: 10px;
-webkit-transition-duration: .40s;
}  


Feito isso, adicione um código de HTML/Javascript e cole isso:


<a href="LINKDOBLOG" title="NOME"><img src="LINKDAIMAGEM" class="border"/></a>
Aconselho a não mexer muito no código, mas se souberem bem aonde mexem... 
(Se algo não estiver funcionando, por favor me avisem).
Espero que gostem!

Podem reblogar, mas lembrem-se dos créditos!

2 comentários:

  1. Super fofo o efeito, flor. Vou usar.
    Beijoos!
    sensatasonhadora.blogspot.com

    ResponderExcluir

• REGRAS DOS COMENTÁRIOS •

Nada de "Seguindo! Segue de volta?" ou "Legal. Visite o meu blog". Faça isso, e estará me convidando a NÃO ver o seu blog!
→ Deixe o link do seu blog para ter a visita retribuída, mas não abuse!
→ NÃO façam requests pelos comentários. Utilize a Ask.
→ Comente apenas sobre a postagem!
→ Sugestões e críticas construtivas são bem vindas, ofensas não.