Como criar seu próprio efeito HTML? + Enssinamento

Okaeri minna! =♥=

Parei de lamentar pelo que poderia ter sido, e comecei a dar valor para o que pode ser.

Como criar seu próprio efeito HTML? + Enssinamento

Tadaima,hoje trago um tutorial enssinando á muitos iniciantes como criar seus próprios efeitos Html,isso não é fácil,pois os códigos são em inglês , e não é muito fácil de entender,eu geralmente tenho umas ajudinhas de ums programas que podem fazer o efeito que você quer.Algum dia eu venha trazer este tutorial dos programas,como usá-los,criar suas próprias coisas,mais por enquanto estou sem tempo e não poderei trazer este tutorial.Enfim,este tutorial não vai ser muito fácil fazer,mais espero que te ajude com seus efeitos e tudo mais,espero que seja útil,eu queria agradecer se você deixar um comentário aki no blog. ^^ 

♥ Primeiramente,os comandos:

Dica - Comandos: Comandos são o que define o efeito da sua imagen,deixando toda enfeitada do jeito que quiser.

Ex: Se ela irá girar,aumenta,diminuir,fica cinza, com brilho,e outras coisas.

Agora os comandos básicos são:

-webkit-transform: rotate(NUMEROdeg); (a imagem gira)

-webkit-transform: scale(NUMERO); (a imagem aumenta ou diminui)

-webkit-filter: blur(NUMEROpx); (a imagem fica borrada)

-webkit-transform: skew(NUMEROdeg); (a imagem fica esticada)

-webkit-filter: grayscale(NUMERO%); (a imagem fica com efeito preto e branco)

-webkit-filter: sepia(NUMERO%); (a imagem fica com efeito sepia)

-webkit-filter: brightness(NUMERO); (a imagem fica com efeito de brilho)

-webkit-filter: opacity(NUMERO); (a imagem fica com efeito de opacidade)

-webkit-filter: contrast(NUMERO%); (a imagem fica com efeito de contraste)

-webkit-transform: rotateX(NUMEROdeg); (faz a imagem girar como uma plaquinha para o lado)

-webkit-transform: rotateY(NUMEROdeg);(faz a imagem como uma plaquinha para baixo)

-webkit-transform: invert(NUMERO%);(faz a imagem ficar com cores invertidas)

Bem,espero que entenda esses comandos,na primeira vez,não entendi nada,mais é bem provável que você tenha uma mente bem mais esperta que a minha. ;)

Agora monte seu efeito com esta base:

@-webkit-keyframes NOME DO EFEITO {

1% {-webkit-transform: COMANDO(NÚMEROpx); }
25% {-webkit-transform: COMANDO(NÚMEROpx);  }
50% {-webkit-transform: COMANDO(NÚMEROpx); }
75% {-webkit-transform: COMANDO(NÚMEROpx);  }
100% {-webkit-transform: COMANDO(NÚMEROpx);  }
}
@-moz-keyframes NOME DO EFEITO {
1% {-moz-transform: COMANDO(NÚMEROpx); }
25% {-moz-transform: COMANDO(NÚMEROpx);  }
50% {-moz-transform: COMANDO(NÚMEROpx);  }
75% {-moz-transform:COMANDO(NÚMEROpx); }
100% {-moz-transform: COMANDO(NÚMEROpx);  }
}
@-o-keyframes NOME DO EFEITO {
1% {-o-transform: COMANDO(NÚMEROpx); }
25% {-o-transform: COMANDO(NÚMEROpx); }
50% {-o-transform: COMANDO(NÚMEROpx); }
75% {-o-transform: COMANDO(NÚMEROpx);  }
100% {-o-transform: COMANDO(NÚMEROpx); }
}
.NOME DO EFEITO {-webkit-transition: .7s; border-radius: NÚMERO DO ARREDONDAMENTO DAS BORDASpx; box-shadow: 1px 1px #COR DA SOMBRA;}
.NOME DO EFEITO:hover {-webkit-animation: NOME DO EFEITO .7s alternate infinite linear;}

E seu efeito está criado,mais ainda resta uma parte, e é esta parte:

Como colocar meu efeito no gadget?:

- Você vai precisar completar este código,mais sugiro não completar tudo só coloque o nome do efeito para que o efeito seja visualisado,mais se for pra teste vc completa todos os lugares !  ^^

<a href="URL DO LINK" target="_blank" style="font-style: normal;"><img src="URL DA IMAGEM" border="0" class="NOME DO EFEITO" title="NOME DO LINK" /></a>

Espero ter ajudado,e se foi útil,deixe um recadinho aki nos comentários. Origato!

Ja nee ^^