Editando Imagens no CSS: Filtros

() translation by (you can also view the original English article)

Consideremos a situação onde temos que ter versões com alto contraste, embaçada e brilhosas de imagens em um site. Antes dos filtros CSS, nossa única opção era ter versões diferentes dessas imagens ou manipular a imagem via JavaScript.

A não ser que queiramos manipular pixels da imagem original, os Filtros CSs proveem uma saída fácil. Comcemos o tutorial com uma discussão rápida sobre os filtros disponíveis.

Filtro Desfocado

Esse filtro aplicará desfoque Guassiano às imagens. Teremos de prover o valor do comprimento que determinará quantos pixels precisarão ser mesclados. Isso implica que, quanto maior o valor, mais desfoque teremos. Tenhamos em mente que não podemos usar percentuais para determinar o raio do desfoque. O valor 0 será usado se não especificarmos o parâmetro. A sintaxe desse filtro é:

1	filter: blur( <length> )

O filtro blue() não aceita valores negativos.

Filtro de Brilho

Esse filtro aplicará um multiplicador linear às imagens, tornando-as mais claras ou escuras, comparando às originais. Aceita números ou valores percentuais. Com 0%, teremos uma imagem toda preta. Com 100% teremos uma imagem sem mudanças. Valores mais altos resultaram em imagens mais claras. Um valor alto suficiente deixará a imagem praticamente branca. A sintaxe para esse filtro é:

1	filter : brightness( [ <number> \| <percentage> ] )

O filtro não aceita valores negativos.

Filtro de Contraste

Esse filtro altera o contraste das imagens. Como o filtro de brilho, aceita números e valores percentuais. Um valor 0% dará numa imagem totalmente cinza. Um valor de 100% não causa qualquer efeito. Valores maiores que 100% produzirão imagems com alto contraste. Também não podemos usar valores negativos com esse filtro. A sintaxe dele é:

1	filter : contrast( [ <number> \| <percentage> ] )

Filtro de Sombra Projetada

Quase todos nós usamos sombras de caixa pelo menos 1 vez. O problema com elas é que sao bem quadradas. Não se pode usá-las para criar sombras de formas irregulares. Por outro lado, o filtro drop-shadow cria sombras ao redor dos limites da imagem. Basicamente é uma versão borrada da máscara do canal alfa da imagem usada. A sintaxe de drop-shadow é:

1	filter : drop-shadow( <length>{2,3} <color>? )

Os dois primeiros valores são obrigatórios e ajustam a distância da sombra na vertical e horizontal. O terceiro valor, <blur-radius> é opcional. Um valor grande criará uma sombra mais clara. A demo abaixo mostra o filtro em ação. Se sobrepormos o pinguim com o mouse, a cor da sombra mudará de laranja para vermelho.

Filtro de Escala de Cinza

Esse filtro tornará as imagens em tons de cinza. 0% deixa a imagem inalterada, enquanto 100% fará a imagem completamente em tom de cinza. Qualquer falor entre esses dois, será um multiplicador linear para esse efeito. Também não se pode usar valores negativos com grayscale(). A sintaxe desse filtro é:

1	filter : grayscale( [ <number> \| <percentage> ] )

Filtro de Rotação de Matiz

Esse filtro aplicará uma rotação de matiz às imagens. O parâmetro (em valor angular) determinará o número de graus ao redor do círculo de cor que a imagem será ajustada. Com 0deg, a imagem ficará inalterada. Com 360deg, o filtro será invertido. A sintaxe é:

1	filter : hue-rotate( <angle> )

Filtro Invertido

Esse filtro inverterá a imagem. A quantidade de inversão dependerá do valor passado como parâmetro. 0% causará nenhum efeito à imagem. Por outro lado, 100% inverterá completamente. 50% gerará uma imagem totalmente cinza. Qualquer valor entre os extremos será um multiplicador linear. O filtro não aceita valores negativos. A sintaxe de invert() é:

1	filter : invert( [ <number> \| <percentage> ] )

Filtro de Opacidade

O filtro de opacidade aplica transparência à imagem. 0% significa ter 0% de opacidade, ou seja, transparência total. Similarmente, 100% resulta em uma imagem totalmente opaca.

O filtro é similar à propriedade opacity do CSS. A única diferença é que nesse caso, alguns navegadores podem prover aceleração de hardware para melhor performance. A sintaxe é:

1	filter: opacity( [ <number> \| <percentage> ] );

Filtro de Saturação

Esse filtro determina a saturação da imagem. A saturação em si depende do valor passado. Não se pode usar valores negativos. 0%, valor mínimo, a imagem estará totalmente não saturada. Com saturação em 100%, a imagem fica inalterada. Para imagens super-saturadas, devemos usar valores acima de 100%. A sintaxe é:

1	filter : saturate( [ <number> \| <percentage> ] )

Filtro de Sépia

O filtro transforma as imagens em tons de sépia. Com 100%, será totalmente sépia e om 0% a imagem ficará inalterada. Valores intermediários serão multiplicadores lineares para o filtro. Não podemos usar valores negativos. A sintaxe de de sepia() é:

1	filter : sepia( [ <number> \| <percentage> ] )

Filtro de URL

Há situações que queremos usar nossos próprios filtros nas imagens. O filtro url receberá a localização de um arquivo XML que especifica um filtro SVG. Também aceita uma âncora para especificar o elemento filtro. Eis um exemplo que resulta em posterização da imagem:

// The filter

<svg>
  <filter id="posterize">
    <feComponentTransfer>
      <feFuncR type="discrete" tableValues="0 0.33 0.66 0.99" />
      <feFuncG type="discrete" tableValues="0 0.33 0.66 0.99" />
      <feFuncB type="discrete" tableValues="0 0.33 0.66 0.99" />
    </feComponentTransfer>
  </filter>
</svg>

// Required CSS to apply this filter

filter: url(#posterize);

O resultado finla apüos aplicar o filtro seria algo parecido com essa imagem:

Usando Vários Filtros

Se não estivermos satisfeitos com o retorno de um único filtro, podemos combinar vários em uma única imagem. A ordem usada pode produzir efeitos ligeiramente diferentes. Múltiplos filtros podem ser aplicados da seguinte forma:

1	filter : sepia(0.8) contrast(2);
2	filter : saturate(0.5) hue-rotate(90deg) brightness(1.8);

Ao usar múltiplos filtros juntos, a primeira função da lista é aplicada na imagem original. As outras funções são aplicadas no retorno do filtro anterior. Essa demo mostra duas outras combinações de filtros em ação.

Em circunstâncias especiais, a ordem dos filtros podem gerar resultados completamente diferentes. Por exemplo, usando sepia() e grayscale() produzirá um resultado sépia, por outro lado, usando grayscale() e sepia() resultará em retorno em tom de cinza.

Animando Filtros

Podemos animar a propriedade filtro. Com a combinação certa de imagens e filtros, podemos explorar esse recurso para criar efeitos estonteantes. Consideremos o código abaixo:

@keyframes day-night {
  0% {
    filter: hue-rotate(0deg) brightness(120%);
  }
  10% {
    filter: hue-rotate(0deg) brightness(120%);
  }
  20% {
    filter: hue-rotate(0deg) brightness(150%);
  }
  90% {
    filter: hue-rotate(180deg) brightness(10%);
  }
  100% {
    filter: hue-rotate(180deg) brightness(5%);
  }
}

Usamos hue-rotate() e brightness() juntos para criar ilusão de dia e noite. A imagem original em si tem matiz laranja. Por até 20% da animação, aumentamos o brilho gradualmente e mantemos a rotação de matiz em zero. O efeito criar um dia ensolarado. Quando a animação termina, rotacionamos o matiz em 180º. Isso resulta em matiz azul. Combinando isso com baixo brilho, criamos o efeito da noite.

Pensamentos Finais

Além desses 11 filtros, há, também, o filtro custom(). Ele nos permite criar tipos diferentes de efeitos usando sombreadores. Há alguns problemas com filtros custom() que interromperam seu desenvolvimento. Adobe tem trabalhado ativamente para trazer soluções para os problems de corte ao usar filtros custom(). Espera-se que logo estejam disponíveis para desenvolvedores usarem em seus projetos.

Agora, voltando ao trabalho. Filtros são aplicados em todas as partes do elemento alvo, incluindo quaisquer textos, planos de fundo ou bordas. Eis uma demo para testar combinações de filtros em várias imagens.

Como vimos nos dois artigos anteriores, filtros CSS podem mudar completamente as imagens às quais são aplicadas. Contudo, algumas vezes, não é o bastante. No próximo artigo, discutiremos como mesclar dois modos para editar imagens.