18.11.13

Efeito confused


Okaeri, meus origamis. Acho que ultimamente me tenho apaixonado por códigos >.< 

Enfim, o que trago hoje não é nenhum efeito original, mas eu gostei dele. Misturei o efeito "moderadoras" com "afiliados numa só imagem", e ainda acrescentei alterações na coloração, sépia e saturação da imagem. Não deu nada muito especial, devido a essa grande mistura, chamei-lhe confused. Então, mesmo que não dê para entender muito bem aqui, cá vai a prévia - lembrando que as imagens rodam antes de ficaram em hover, e em conjunto, fica muito bonito (ao contrário do que mostra o gif). Na verdade, o efeito está nos meus afiliados, mas para o caso de eu mudar de lay ou assim, convém deixar aqui, né?

Prévia (www):


Tutorial:

Abra o seu HTML e use Ctrl + F para procurar por:
/b:skin
Acima dessa tag, cole todo o código abaixo:
.confused { /*dados da imagem - para fazer afiliados numa só imagem, reduzi a border-bottom e right*/
width: 105px; 
height: 42px;
margin-bottom: -4px;
margin-right: -4px;
text-align: center;
}
.confused:hover { /*repetição do primeiro código, mas em hover*/
width: 105px; 
height: 42px;
margin-bottom: -4px;
margin-right: -4px;
text-align: center;
}
.efeito img { /*dimensões da imagem*/
width: 105px; 
height: 42px;
-webkit-transition-duration: .45s;
}
.efeito:hover img { /*imagens em hover - as que não estão com o rato*/
-webkit-transition-duration: .45s; 
-webkit-transform: rotate(360deg); 
-webkit-filter: sepia(0.3) hue-rotate(350deg) saturate(1);
opacity: 0.50;
}
.efeito img:hover { /*o que muda ao passar o rato*/
-webkit-transition-duration: .45s; 
opacity: 1.0;
}
Parece complicado, não? Mas não é assim tanto. As únicas coisas que você deve trocar são as dimensões da imagem, e se entender bem dos filtros, pode mudar a sépia, saturação e cor. A cor é mudada principalmente no valor que diz 350. Agora, sobre como usar...

Para aplicar, basta colar num gadget o código seguinte:
<div class="efeito">
<a href="LINK" title="NOME"><img src="URL-DA-IMAGEM" class="confused" /></a>
<a href="LINK" title="NOME"><img src="URL-DA-IMAGEM" class="confused" /></a>
<a href="LINK" title="NOME"><img src="URL-DA-IMAGEM" class="confused" /></a>
</div>

Repita a parte que diz <a href="LINK" title="NOME"><img src="URL-DA-IMAGEM" class="confused" /></a> as vezes que precisar, lembrando que tem de ser antes de fechar o </div>

Funcionou bem? Se você aplicou direitinho, sim :) Como já disse, não é nada original, apenas outra mistura de códigos. Ja nee ^^


2 comentários:

  1. Nossa adorei esse efeito! Foi vc mesma que fes? Se foi tu é muitooo esperta beijos! :D

    ResponderEliminar
    Respostas
    1. Sim claro, embora tenha adaptado de outros efeitos, o resultado é só meu. Arigatou, acho eu xD Prepare-se para ver muitos como estes ;)

      Eliminar