Tutorial: Afiliados com Efeito Flash

Yo, mais você aqui denovo Keelh? Tou aproveitando minha inspiração.

Agora, eu trago um tutorial, para acompanhar.. Agorinha vou trazer alguns For You, nesse tutorial, e um efeito para afiliados, mais pode usar para oque preferir, o nome é flash que ao passar o mouse, a imagem recebe um toque de luz, igual um flash.. Vamos ver um exemplo:

Créditos: KW

1. 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.

2. 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.

3. Adicione um novo gadget HTML/Javascript e nele cole:

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

Créditos: Kawaii

World