O avanço das CSS3 está permitindo que sites evoluam constantemente e permitindo não ser mais necessário contar com scripts externos para criar efeitos verdadeiramente surpreendentes. Alguns desses efeitos, certamente, conseguido com filtros CSS3!

Introdução sobre filtros CSS3

O que são filtros CSS3

Filtros trazem efeitos para o DOM. Imagine ser capaz de aplicar efeitos de Photoshop, como blur, tons de cinza e brilho aos elementos HTML, tais como formulários, imagens e qualquer outra coisa possível de se criar usando HTML/CSS. Agora você pode fazer tudo isso com os filtros de CSS3!

Quando é possível usar filtros CSS3

No momento, filtros CSS 3 conseguem ser renderizados corretamente apenas no Chrome – e prestes a ficarem disponíveis no Safari 6. É possível se manter atualizado em relação à disponibilidade dos filtros CSS3 no Can I Use.

Sem mais delongas, vamos a alguns dos poderosos filtros de CSS3.

Blur

Exemplo de aplicação de filtro CSS3: blur

Filtro CSS: blur

O efeito de blur – ou, na boa e velha Língua Portuguesa, embaçado – já é consagradamente usado em montagens e ilustrações para sites em todo o mundo, já que qualquer editor de imagens mais ou menos decente já oferece a possibilidade de usar o blur. O bom da história é que, a partir de agora, é possível usar este efeito diretamente com CSS.

É possível especificar o raio do blur, em pixels, para alcançar o efeito desejado.

Greyscale

Exemplo de aplicação de filtro CSS3: greyscale

Filtro CSS3: greyscale

Antes do advento dos filtros CSS3, os desenvolvedores web usávamos uma variedade de hacks e técnicas para fazer a transição de uma imagem em preto e branco para ela ficar colorida. Mas, independentemente de existirem dezenas de técnicas para isso, agora basta usar um pouco de CSS.

Usando porcentagem, é possível especificar o quão próximo a tons de cinza a imagem deve ser apresentada.

Sepia

Exemplo de aplicação de filtro CSS3: sepia

Filtro CSS3: sepia

Para o caso de ser preciso usar um efeito sépia – tonalidades entre o acinzentado e o amarronzado -, agora também é possível usando, puramente, CSS.

Através da indicação de porcentagem, basta indicar a “quantidade de sépia” que será usada na imagem.

Brightness

Exemplo de aplicação de filtro CSS3: brightness

Filtro CSS3: brightness

Muitos são os casos em que aplicar um filtro para uma ou mais imagens ficar(em) mais “brilhantes” é necessário; portanto, a partir de agora, é possível fazer isso com o uso dos filtros de CSS3.

Especificando o quão brilhante algum(ns) seletor(s) será, numericamente, é bastante simples.

Saturation

Exemplo de aplicação de filtro CSS3: saturation

Filtro CSS3: saturation

O valor da saturação é medido em porcentagem e, neste caso, 100% é o estado inalterado, em que é possível diminuir ou aumentar este valor, ou seja, reduzindo para 0%, as cores da imagem são “removidas”.

Hue Rotate

Exemplo de aplicação de filtro CSS3: hue

Filtro CSS3: hue

Agora, com CSS3, é possível alterar o valor da matiz da(s) imagem(ns).

O valor é especificado em graus e, geralmente, isso soa confuso, inicialmente. Para facilitar, imaginem uma roda de cores; o número de graus determina o ponto dentro desta roda.

Contrast

Exemplo de aplicação de filtro CSS3: contrast

Filtro CSS3: contrast

Com os filtros de CSS3, também é possível ajustar o contraste de imagens (especificando os valores em porcentagem).

Invert

Exemplo de aplicação de filtro CSS3: invert

Filtro CSS3: invert

É fácil inverter as cores de imagens com CSS3. Através dos filtros, é possível especificar uma porcentagem de inversão de cores.