Yoo + Big Tutorial : Efeito Woaltipc

acho que a ilustração está certa

Olá, boa tarde.

Acho que poucos me conhecem até porque esse é o meu  primeiro post aqui >.< . Bem, meu nome é Izzy Kinomoto ( sim meu nome é Izzy :3 ) e sou descendente de Japoneses, Italianos e Poloneses. Meu Avô é japonês e minha avó é italiana e polonesa.

Hoje eu trouxe um efeito que eu criei, se vocês leram o 1º post já estão sabendo que aqui só postamos oque criamos,  o nome do efeito é bem diferente até porque não tenho muita criatividade, você pode usar ele para afiliados,autoras etc..

                  Veja o efeito no primeiro gadget desse blog 

Acho que vocês já viram um efeito parecido, mas esse é diferente. Vamos aprender? 

                 

Acima de ]]></b:skin>, cole o seguinte código:

@-webkit-keyframes Woaltipic { 

.Woaltipic{ 

-webkit-transition-duration: .60s; 

transform: translate(-22px, 0px); 

-webkit-transform: translate(-22px, 0px); 

-moz-transform: translate(-22px, 0px); 

-o-transform: translate(-22px, 0px);

 -ms-transform: translate(-22px, 0px); 

-webkit-filter: none; -webkit-transition:all 1s ease;

 } 

.Woaltipic:hover{ 

transform: rotate(181deg) ; 

-webkit-transform: rotate(181deg) ;

 -moz-transform: rotate(181deg) ; 

-o-transform: rotate(181deg) ; 

-ms-transform: rotate(181deg) ;

border:solid 3px #C4CEDE; / cor da borda que você quer / 

-webkit-filter: brightness(0.9); 

-webkit-transition:all 1s ease; 

-webkit-transition-duration: .70s; 

}

Só edite o que está em negrito.

Personalização do efeito : 
No efeito normal eu deixei no hover a imagem preta e branca, mas você pode mudar a coloração da imagem se quiser  a parte que você vai personalizar é o que está em Itálico ou seja você irá ter que excluir esse parte se quiser outro efeito no hover: 

-webkit-filter: brightness(0.9); 

-webkit-transition:all 1s ease;

Para o efeito Blur cole esse código  : 

-webkit-filter: blur(5px); -webkit-transition:all 1s ease;

 Resultado :

Para o efeito Sépia cole esse código :

-webkit-filter: sepia(1);
-webkit-transition:all 1s ease;

 Resultado :

Para o efeito Hue cole esse código :

 -webkit-filter: hue-rotate(180deg);
-webkit-transition:all 1s ease;

 Resultado :

...................................................................................................................................................................

Agora para utilizar o Efeito, cole o seguinte código em um Gadget HTML/JavaScript:

<a href="LINK DO BLOG" title="NOME DO BLOG"><img src="LINK DA IMAGEM"class="Woaltipic" /></a>

é isso ai , Beijos >.<