A Adobe, Apple e Opera estão trabalhando juntas para trazer alguns efeitos no estilo Photoshop para o CSS. Esses efeitos, chamados de filtros, irão nos permitir modificar a renderização de qualquer elemento DOM, de um simples p, até elementos mais complexos como image ou video.

Alguns dos efeitos já definidos na especificação são grayscale, blur, sepia, saturate, opacity, brightness, contrast, hue-rotate e invert. Aos familiarizados com Photoshop ou qualquer programa de edição de imagem, eles devem ser bastante auto-explicativos. Mas de qualquer forma, vamos explorar cada filtro, um a um.

Em todos os exemplos, iremos usar a imagem abaixo como base. Para verificar se o seu navegador suporta o CSS Filter, apenas passe o mouse por cima da imagem. Se ela modificar (saturar), quer dizer que o seu navegador suporta e já está aplicando um filtro no evento hover desta imagem.

Grayscale

Com o filtro grayscale nós indicamos o quão preto-e-branco queremos que o elemento fique, numa escala de 0 a 1 ou 0% 100%.

img {
    -webkit-filter: grayscale(100%);
}

Blur

Com o filtro blur podemos embaçar um elemento. Algo parecido como ver uma foto sem óculos (eu imagino que seja assim). Os valores são definidos em pixels. Quanto maior o valor, mais embaçado o elemento.

img {
    -webkit-filter: blur(3px);
}

Sepia

Este efeito é normamelmente usado em fotos, dando a elas um efeito de fotos antigas. Os valores do efeito vão de 0 a 1.

img {
    -webkit-filter: sepia(1);
}

Saturate

Com o saturate modificamos o canal saturação da cores do elemento. Quanto maior a saturação, mais vivas as cores estarão, e quanto menor a saturação, mais próximas do cinza elas estarão. Com o

em 0, obtemos o mesmo resultado que o grayscale em 100%

img {
    -webkit-filter: saturate(4);
}

Opacity

Ok, esse é bastante fácil. Simplesmente mude a opacidade do elemento. Os valores vão de 0 a 1. 0 deixa o elemento invisível.

img {
    -webkit-filter: opacity(0.5);
}

Brightness

O brightness altera o brilho do elemento. 100% é o valor padrão. Diminuindo esse valor ele ficará mais escuro, ficando totalmente preto em 0%. Aumentando o valor para mais de 100%, ele irá ficar cada vez mais claro.

img {
    -webkit-filter: brightness(50%);
}

Contrast

Também bastante óbvio. Aqui alteramos a saturação do elemento. O valor desse filtro pode ser expresso em unidades (0, 1, 3, 4, …) ou em percentagem (0%, 100%, 1500%).

img {
    -webkit-filter: constrast(1.5);
}

Hue Rotate

Neste filtro podemos mover todas as cores do elemento em graus dentro da roda de cores. Com 0deg não iremos realizar nenhuma alteração, enquanto com 180deg iremos inverter todas as cores.

img {
    -webkit-filter: hue-rotate(180deg);
}

Invert

Com o invert invertemos todas as cores. Na verdade a inversão completa acontece apenas se usarmos o valor 100%. Com 50% as cores estarão no meio caminho entre suas cores invertidas, o que significa que estarão com um tom de cinza. Os valores vão de 0% a 100%.

img {
    -webkit-filter: invert(100%);
}

Vários filtros

Também é possível o uso de vários filtros em conjunto, para obtermos um efeito mais único. Na imagem acima usamos hue-rotate e sepia.

img {
    -webkit-filter: hue-rotate(60deg) sepia(1);
}

Drop shadow

Similar a propriedade box-shadow, porém um pouco mais poderoso. Com este filtro podemos aplicar sombra de forma adequada em PNGs com transparência, o que é impossível de se conseguir com o box-shadow. No exemplo acima criei o nome “Jericoacora” com transparência, e apliquei um drop-shadow. Observem que a sombra acompanha os extremos da imagem, exatamente como no Photoshop.

Os argumentos do filtro são:

• offset horizontal: distância horizontal da sombra em relação ao elemento. caso seja um valor negativo, ela irá para a esquerda.
• offset vertical: distância vertical. um valor negativo joga a sombra para cima do elemento.
• blur: valor opcional. indica o quão “embaçado” ou “desfocado” a sombra irá ficar. 0 deixa a sombra sólida.

img {
    -webkit-filter: drop-shadow(5px 5px 6px #000);
}

Como podemos ver o CSS Filters vem adicionar ainda mais poder ao HTML5. E isto é só uma prévia do que há por vir, como os CSS Shaders.

No momento em que escrevo este post, os CSS Filters rodam no Google Chrome Canary, Google Chrome dev channel e WebKit Nightly Build.