03/11/13
 |
| www |
Okaeri, meus origamis. Estou a pensar seriamente em abrir um blog de tutos e HTML só para postar estes meus códigos e outras coisas, acho que ultimamente me tenho apaixonado por códigos >.< Se o fizer, avisarei aqui ;)
Enfim, o que trago hoje também 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, mas ficou lindíssimo no lay de natal que estou a fazer. 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):
Acima dessa tag, cole todo o código abaixo:
- Código para o HTML
.afiliados { /*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;}.afiliados: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...
- Código para aplicar:
<div class="efeito"><a href="LINK" title="NOME"><img src="URL-DA-IMAGEM" class="afiliados" /></a><a href="LINK" title="NOME"><img src="URL-DA-IMAGEM" class="afiliados" /></a><a href="LINK" title="NOME"><img src="URL-DA-IMAGEM" class="afiliados" /></a></div>
Repita a parte que diz <a href="LINK" title="NOME"><img src="URL-DA-IMAGEM" class="afiliados" /></a> as vezes que precisar.
Funcionou bem? Se você aplicou direitinho, sim :) Como já disse, não é nada original, apenas outra mistura de códigos. Ja nee ^^
