Filtros em imagens com CSS3

Vimos uma postagem no blog TABLELESS e resolvemos compartilha aqui no nosso blog.

A publicação abaixo explica, de forma bem simples, como aplicar filtros em imagens usando apenas CSS3. A possibilidade de aplicar filtros com CSS já é possível desde algo em torno de 2011, mas apenas para o motor WebKit. Agora essa possibilidade se transformou de fato em rascunho do W3C para que um dia vire uma recomendação. O suporte ainda não é muito bom, mas, dependendo do seu público, você já pode usar agora.

A sintaxe é simples e bem fácil de entender:

seletor { filter: funcao(valor) | none }

Os valores possíveis por enquanto são:

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• sepia()
• hue-rotate()
• invert()
• opacity()

O script abaixo mostra os diferentes efeitos aplicados à imagem.

 

Abaixo você pode ver alguns exemplos:

 

Existem algumas observações interessantes sobre a aplicação dos filtros. Por exemplo, se você quiser combinar os filtros sepia() e grayscale(), certifique-se de adicionar sepia() antes do grayscale(), caso contrário o resultado será apenas grayscale().

Você pode não entender o efeito de hue-rotate(), sugiro que leia mais sobre HUE aqui. Leia mais sobre cores na web aqui.