[Tutorial] Efeitos nas imagens do blog

Vamos começar a brincadeirinha, já postei em mais de vinte blogs e eu continuo sem saber como começar uma postagem, esta é a triste realidade minha para o mundo -nossa que dramático- hoje me deu vontade de comer brigadeiro colorido -pra quem não sabe esse é um nome pra brigadeiro confeitado com aquelas coisinhas coloridas-. Ah é! Os efeitos serão bem simples, mas coloquei vários deles, aproveitem porque hoje o post é descente porque minha mãe liberou uma hora pra mim! Comemorem! Então vamos lá? Clique em leia mais.

Todos os códigos são usados acima de ]]></b:skin>

Sombra: (www)

img {box-shadow: inset 0 0 0 #eee, 3px 3px 5px #444}

Bordinha (www)

img {Border: 3px groove #COR;}

Opacidade: (www)

img {opacity: 1;

-webkit-transition-duration: .99s;}

img:hover {opacity: 0.8;

-webkit-transition-duration: .99s;}

Sépia discreto (www)

img {-webkit-filter: sepia(3%);

-webkit-transition-duration: .99s;}

img:hover {-webkit-filter: sepia(70%);

-webkit-transition-duration: .99s;}

Descolorir (www)

img{-webkit-transition: -webkit-filter 1s;}

img:hover{-webkit-filter: grayscale(50%); /*mude pra 100 se você quiser a imagem cinza*/

-webkit-transition-duration: .99s;}

Saturação (www)

.img{-webkit-filter: saturate(1);

-webkit-transition-duration: 1s;}

img:hover {-webkit-filter: saturate(2.5);

-webkit-transition-duration: 1s;}

Contraste (www)

img { -webkit-filter: contrast(.5);

-webkit-transition-duration: .99s;}

img:hover { -webkit-filter: contrast(1.5);

-webkit-transition-duration: .99s;}

Inverter (www)

img { -webkit-filter: invert(1%);

-webkit-transition-duration: .99s;}

img:hover { -webkit-filter: invert(80%);

-webkit-transition-duration: .99s;}

Escurecer (www)

img { -webkit-filter: brightness(1);

-webkit-transition-duration: .99s;}

img:hover { -webkit-filter: brightness(0.9);

-webkit-transition-duration: .99s;}

Matriz (www)

img {-webkit-filter: hue-rotate(0deg);

-webkit-transition-duration: 2s;}

img:hover {-webkit-filter: hue-rotate(180deg); }

-webkit-transition-duration: 2s;}

Juntei alguns efeitos que conhecia em um único post! Espero que tenham gostado!