CSS Filters - Efeitos em Imagens

Há algum tempo descobri que tem como colocar efeitos de imagens do Photoshop com CSS, são vários efeitos como sépia, preto e branco, saturação, opacidade e outros. Podemos utilizar estes efeitos ao colocar o mouse em cima de uma imagem e dar efeitos nas imagens do seu blog/site.

Primeiramente devemos usar o código de acordo com o navegador:

 -webkit-
 -webkit-
 -moz-
 -ms-
 -o-

Isto serve para que os efeitos funcionem corretamente nos navegadores (se for usar os efeito no template do blog/site deve usar todos os códigos para todos os navegadores)

Os Códigos

   Grayscale

Efeito grayscale, indica o quanto preto e branco queremos que fique a imagem, vai de 0% a 100%

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

   Blur 

O efeito Blur da o efeito de imagem embaçada, seus valores são definidos em pixels.

img { -webkit-filter: blur(3px); }

Sépia

O efeito Sépia da um estilo envelhecido para a imagem. seus valores vão de 0 a 1

img { -webkit-filter: sepia(1); }

Saturação 

O efeito aturação deixa as cores mais vivas. quanto menor o seu valor mais perto do cinza estarão.

img { -webkit-filter: saturate(4); }

Opacidade 

O efeito Opacidade deixa as imagens transparentes. seus valores vão de 0 a 1.0

img { -webkit-filter: opacity(0.5); }

Brightness

O efeito Brightness altera o brilho da imagem. Seu valor padrão e 100%, diminuindo irá ficar mais escuro (0%)

img { -webkit-filter: brightness(0.5); }

Hue Rotate

O efeito Hue Rotate da um tom azulado a imagem (não sei bem como funciona!). seus valores são de 0deg a 180deg

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

Invert 

O efeito Invert irá inverter todas as cores da imagem. Os valores vão de 0% a 100%.

img { -webkit-filter: invert(100%); }

Contrast 

O efeito Contrast deixará as cores da imagem mais vivas. seus valores podem ser: (1, 2, 3,...) ou (0%, 100%, 150%)

img { -webkit-filter: contrast(4); }