A cada dia que passa o CSS tem virado de fato uma linguagem visual, para formatar como os elementos, imagens e qualquer outro tipo de informação aparece nos browsers, celulares e etc. Um bom exemplo disso são os CSS Filters, que permite aplicar filtros, antes vistos apenas em programas como Photoshop, diretamente no browser com CSS.
A filter effect is a graphical operation that is applied to an element as it is drawn into the document. It is an image-based effect, in that it takes zero or more images as input, a number of parameters specific to the effect, and then produces an image as output.
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:
Os valores possíveis por enquanto são:
- blur()
- brightness()
- contrast()
- drop-shadow()
- grayscale()
- sepia()
- hue-rotate()
- invert()
- opacity()
A imagem abaixo já está com contrast() aplicado e passando o mouse, fica com efeito blur():
Você pode passar uma ou várias funções em uma mesma propriedade filter:
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.
