2012/11/29

Afiliados com efeito flash


Olá meus Dengos (uahsu') esse tuto é bem legal,muitos já viram esse efeito em alguns Blogs por ai,e agora eu trago para vocês! Lembrando que eu achei esse tuto no Kawaii World,portanto mantenham os créditos.Boom mas vamos ao tutorial.

Aqui está um pequena prévia de como ele ficara:

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>

Depois é só salvar e pronto,espero que gostem,e até ^^.

Um comentário: