segunda-feira, 4 de novembro de 2013

Tutorial: Efeito fash nos Afliados




Ohayo fofis  ^-^
Hoje o meu dia foi mais um daqueles secantes, tive teste a ET, e depois ainda por cima tive também um mini-teste a Ciências que a professora nem avisou :'c
Só cheguei a casa ás 18:40 e ainda por cima tive a sorte de a mãe de uma amiga minha me trazer a casa de carro, pois está a chover.
Bem continuando, hoje vim vos trazer um tutorial que está a ser usado aqui no blog, o efeito de "flash" nos Afiliados, ali de lado, exemplo:


Cliquem em Ler Mais...



Primeiro Passo: Vão em Modelo > Html, e depois apertem Ctrl+F e coloquem lá: ]]></b:skin>
Em cima ponham o seguinte código(para o efeito de flash):

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

Não mexam no código e guardem.

Segundo Passo: Depois de salvarem, acima do mesmo código que acabaram de por, ponham este aqui (refere-se ás bordas e á duração do 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%); }

Neste código podes mudar o contraste, espessura, cor e tipo da borda e o tempo do efeito do fash.

Terceiro e último Passo: Vaia a Esquema, crie um novo gadget de Html/JavaScript, ponhe o código abaixo, e guarde (cada código representa apenas o código num afiliado, por exemplo se tiver 5 afiliados, terá de por 5 códigos).

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

O que está a cor-de-rosa, é o que tens de preencher, para este funcionar.
E prontinho, espero que tenham gostado! c:

Créditos a: Kawaii World


Nenhum comentário:

Postar um comentário

Comenta, e damos-te um cupcake! x3