Efeitos e webkits - para imagens

Bonjour (c'est français) :)

Título possivelmente estranho, mas foi o único que me ocorreu. Este post trás vários efeitos, mas não efeitos completos, que reúnam vários elementos em Html - consistem numa única, ou talvez duas, linhas, sendo a principal delas o filtro, e hover gradual como opcional. O que são? Bem, o hover gradual é explicado pelo próprio nome, mas dou exemplos mais abaixo. Quanto aos filtros, são eles que permitem escurecer, clarear, ou dar uma certa tonalidade à imagem. Fiz este post para reunir todos os que conheço, então é só aplicar dentro de uma chaveta com o efeito, como demonstro no fim.

~Hovers~

A imagem pode ter o efeito por si só, mas eu só gosto que sejam aplicados no hover, ou seja, ao passar o rato.

efeitosemhover {-webkit-filter: grayscale(100%);}

efeitocomhover {-webkit-filter: grayscale(0%);}
efeitocomhover:hover {-webkit-filter: grayscale(100%);}

Os hovers podem surgir repentinamente, ou gradualmente. Eu indico que surjam gradualmente, dá um ar mais delicado. Para isso, dentro das chavetas deve ser acrescentada a linha abaixo, sendo que o tempo de translação pode mudar, por exemplo, para "5s", que são 5 segundos inteiros. Também têm prévias em baixo.

-webkit-transition-duration: .60s;

Troque a primeira palavra pelo navegador correspondente:

 -webkit-

 -webkit-

 -moz-

 -ms-

 -o-

~Rotação~

Há várias maneiras de fazer uma imagem rodar, e o código funciona sempre do mesmo modo. Para inverter a direção em que roda, basta trocar o número por um negativo. Aqui vale a pena considerar os ângulos, sendo que para colocar a imagem ao contrário se deve rodar 180 graus, e para dar uma volta completa, 360.
Para rodar sobre si mesma:

-webkit-transform: rotate(360deg);

Para rodar segundo o eixo do X (na horizontal):

-webkit-transform: rotateX(360deg);

Para rodar segundo o eixo do Y (na vertical):

-webkit-transform: rotateY(360deg);

~Filtros de cor~

• Opacidade

-webkit-filter: opacity(0.5);

• Grayscale

-webkit-filter: grayscale(100%); 

OU

-webkit-filter: saturate(0);

• Sépia

-webkit-filter: sepia(0.9);

• Saturação

-webkit-filter: saturate(3);

• Brightness

-webkit-filter: brightness(0.5);

• Hue Rotate

-webkit-filter: hue-rotate(480deg);

• Invert

-webkit-filter: invert(100%);

• Contrast

-webkit-filter: contrast(4);

• Blur

-webkit-filter: blur(3px);

~Como usar os filtros e webkits~

Abra o seu HTML e procure por

/b:skin

acrescente em cima

.NOME-DO-EFEITO {}

Irá colocar a linha com o filtro escolhido dentro das chavetas, e se quiser, a transição gradual. Troque o nome do efeito por um ao seu gosto. Agora, para usar numa imagem, abra um gadget HTML/Javscript, e escreva lá dentro:

<img src="URL-DA-IMAGEM" class="NOME-DO-EFEITO" />

Pronto, agora é só colocar a url da imagem que quer e trocar o nome do efeito por aquele que escolheu acima.

Ah, se quiser usar nas imagens de post, não é necessário aplicar em nenhum gadget e o nome do efeito deve ser:   .post img

Era isto, espero ter ajudado ;)