Efeitos em imagens usando filtros CSS

Já começo avisando que esses filtros estão em fase experimental e por enquanto só funcionam em navegadores que utilizam webkit, como Chrome, Chromium, Maxthon, Rockmelt, Flock e outros derivados.

Para compreender o post, recomendo que já saiba usar a folha de estilos do seu site, seja ele Blogger, Wordpress ou qualquer outro. Siga também as dicas do post Como começar a estudar HTML e CSS para experimentar os filtros livremente em seu computador usando bloco de notas.

Esse recurso tem sido bastante usado nos blogs para mudar a imagem quando você passa o mouse sobre ela. Exemplo de cores invertidas (negativo):

O código CSS para fazer funcionar esse efeito é o seguinte:

img:hover {-webkit-filter: invert(1); -webkit-transition:all 1s linear;}

A declaração da primeira linha vai gerar o efeito em todas as imagens do blog. A declaração da segunda linha serve para deixar a transição suave. Para limitar, você pode criar uma classe ou usar uma já existente:

img.inverte:hover {-webkit-filter: invert(1); -webkit-transition:all 1s linear;}

Sendo que no HTML da imagem você tem que chamar a classe correta:

<img src="imagem.png" alt="Imagem" class="inverte">

O contrário também é possível: as imagens aparecem negativas e o visitante tem que passar o mouse por cima para “consertar”. Vou explicar como faz, mas não recomendo se você tem muitos visitantes que usam Firefox, Opera, Internet Explorer e Safari.

* {-webkit-transition:all 1s linear;} img {-webkit-filter: invert(1);} img:hover {-webkit-filter:none;}

Para entender melhor o efeito de transição suave (-webkit-transition), visite o post Transição suave com CSS.

Até aqui eu mostrei diferentes aplicações, mas apenas um valor: o invert. Agora vou mostrar todos os valores e você pode usá-los das diferentes formas supracitadas.

★ Blur - embaçado

-webkit-filter: blur (10px);

Blur pode ter de 1px a 10px.

★ Grayscale - escala de cinza

-webkit-filter: grayscale (1);

Grayscale tem valores decimais de 0.1 a 1.

★ Sepia - sépia

-webkit-filter: sepia(1);

Sepia tem valores decimais de 0.1 a 1 ou porcentagens de 1% a 100%.

★ Brightness - brilho

-webkit-filter: brightness(1);

Brightness tem valores decimais de 0.1 a 1 ou porcentagens de 1% a 100%.

★ Contrast - contraste

-webkit-filter: contrast(20);

Fiz testes com números muito altos e não encontrei o valor limite de contrast. Você pode usar número absoluto ou porcentagem.

★ Hue-rotate - rotação de cores

Neste exemplo escolhi uma imagem com poucas cores para você perceber melhor o efeito.

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

Os valores de hue-rotate são em graus, de 30deg a 360deg, sendo que 360deg equivale a 0.

★ Invert - negativo

-webkit-filter: invert(1);

Invert aceita valores decimais de 0.1 a 1.

★ Saturate - saturação

-webkit-filter: saturate(1);

Saturate funciona bem com valores decimais de 1 a 10. Acima de 10 você ainda consegue o efeito, mas a imagem fica pixelada, bem estranha.

★ Opacity - opacidade

-webkit-filter: opacity(0.5);

Opacity aceita valores decimais de 0.1 a 1.

★ Drop-shadow

-webkit-filter: drop-shadow(7px 7px 20px black);

Prefira usar o recurso box-shadow que já funciona em todos os navegadores. Saiba mais no post CSS: sombras em caixas e imagens.

★ Vários filtros

Em uma mesma imagem você pode colocar vários filtros:

-webkit-filter: hue-rotate(50deg) blur(10px) sepia(0.5);

Divirta-se!

Imagem: Marjulio
Fonte: CSS Filter