Ajuste de imagem com efeitos de filtro CSS
Ajustando a imagem Brilho e Contraste, ou transformando a imagem em Escala de Cinza ou Sephia é uma característica comum que você pode encontrar no aplicativo de edição de imagens, como Photoshop. Mas, agora é possível adicionar os mesmos efeitos às imagens da Web usando CSS.
Esse recurso vem dos efeitos de filtro que, na verdade, ainda estão no estágio Working Draft. No entanto, o navegador Webkit parece ser um passo a frente na implementação desse recurso.
Então, vamos tentar e usaremos essa imagem de Mehdi Kh para demonstrar os efeitos.
Os efeitos
Aplicar os efeitos é muito fácil. Dê uma olhada no snippet abaixo, para transformar imagens em grayscale;
img -webkit-filter: escala de cinza (100%);
… E isso é para sépia ala Instagram.
img -webkit-filter: sépia (100%);
Tanto o sépia e a grayscale valores são indicados em porcentagem, onde 100% é o máximo e aplicando 0% manterá a imagem alterada, mas quando o valor não for explicitamente especificado, 100% será tomado como padrão.
O brilho da imagem também é possível, e podemos fazê-lo usando o brilho função, como segue;
img -webkit-filter: brilho (50%);
O efeito de brilho funciona como o efeito de contraste e sépia acima de onde o valor de 0% manterá a imagem como está e aplicando 100% iluminará totalmente a imagem, o que possivelmente mostraria apenas uma página em branco em vez de uma imagem.
O efeito de brilho também permite valores negativos, em que será escurecer a imagem.
img -webkit-filter: brilho (-50%);
… E podemos ajustar o contraste da imagem dessa maneira.
img -webkit-filter: contraste (200%);
Há uma pequena diferença em como o valor também funciona, como você pode ver acima, nós definimos contraste() por 200%, isso é porque o valor de 100% é o ponto de partida onde a imagem permanecerá inalterada. Quando o valor está abaixo 100%, digamos 50%, a imagem ficará menos contrastada.
Além disso, também podemos combinar o efeito em um bloco de declaração, como no exemplo abaixo. Nós transformamos a imagem em grayscale e aumentar o contraste em 50% ao mesmo tempo.
img -webkit-filter: contraste em escala de cinza (100%) (150%);
Combinando o filtro com a transição CSS3, podemos fazer um gracioso flutuar efeito.
img: hover -webkit-filter: escala de cinza (0%); img: hover -webkit-filter: sépia (0%); img: hover -webkit-filter: brilho (0%); img: hover -webkit-filter: contraste (100%);
Por fim, há mais um efeito que podemos tentar; a Desfoque Gaussiano, que vai desfocar o elemento alvo.
img: hover -webkit-filter: blur (5px);
Como no Photoshop, o valor do borrão é indicado no raio do pixel e se o valor não for explicitamente declarado, o 0 será considerado como padrão e a imagem será deixada como está..
Pensamento final
Na verdade, existem muito mais efeitos na especificação. tal como matiz-girar, invertido e saturar, mas acho que eles são menos aplicados em casos reais da Web. Assim, a discussão foi limitada a apenas quatro efeitos.
E, apesar da discussão ser aplicada às imagens neste tutorial, a propriedade também pode ser aplicada a qualquer elemento no DOM.
Finalmente, você pode ver a demonstração ao vivo a partir desses links abaixo. Por favor, tome nota que o filtro atualmente só é suportado em Chrome 19 e acima.
- Demonstração
- Fonte de download
