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.