Tutorial : Afiliados com efeito flash

Hellow ~ ((:

Todos os créditos ao Kawaii World

Trago um tutorial bem legal e fácil para vocês. É um efeito que eu criei e usava no menu do meu blog, mas eu acho que é mais útil para as pessoas que possuem elites de afiliados. É um efeito semelhante á um flash, e quando você passa o mouse, a imagem fica com o contraste mais forte. É diferente dos que você vê por ai e é bem bonitinho. Abaixo vocês podem ver como ele é.

Espero que gostem ^.^ ~

Resultado:

O resultado final é assim, só que mais rápido ok?

Primeiro: Procure pela tag   ]]></b:skin> e acima dela cole o código abaixo. Ele corresponde ao efeito do flash:

@-webkit-keyframes flash { 1% { opacity: 0.7; } 30% { opacity: 0.4; } 100% { opacity: 1; }}

Aconselho não mexer nesse código. Salve. 

Segundo: Depois de salvo, pegue o código abaixo e cole acima da mesma tag. No código á seguir, você personaliza bordas e tempo do efeito.

.ikasama{

-webkit-transition: .2s;

border: #FFEBCD 2px solid;

-webkit-filter:contrast(100%);

}

.ikasama:hover{

-webkit-animation-name: flash; -webkit-animation-duration: 0.7s; -webkit-animation-iteration-count: 1; -webkit-transition-property: opacity; opacity: 1;-webkit-filter:contrast(140%); }

Vocês podem mudar o tempo do efeito, espessura, cor e tipo de borda e o valor do contraste que eu tinha citado. Na imagem acima que mostra o resultado final, você pode ver que as cores ficam mais fortes. Aconselho não usar valores mais fortes do que 170% pois fica estranho. Mas isso são vocês quem decidem.

Por último: Adicione um novo gadget e cole o código abaixo:

<a href="LINK" title="TITULO"><img src="URL DA IMAGEM" class="ikasama" /></a>

Coloque o link, o titulo e a imagem desejada. Salve ^-^

Espero que tenham gostado e que tenha sido útil á vocês. Qualquer dúvida comente ~