Filtros

Podcast do CSS - 023: filtros

Digamos que você precise criar um elemento que tenha uma camada ligeiramente opaca, efeito de vidro fosco que fica sobre uma imagem. O texto precisa ser dinâmico e não uma imagem. Como fazer isso?

Uma combinação de filtros CSS e o backdrop-filter nos permitem aplicar efeitos e desfocar o que é necessário em tempo real. Desfoque e opacidade são dois dos muitos filtros disponíveis, então vamos conferir o que todos eles fazem e como usá-los.

A propriedade filter

Compatibilidade com navegadores

  • Chrome: 53.
  • Borda: 12.
  • Firefox: 35.
  • Safari: 9.1

Origem

Você pode aplicar um ou mais dos seguintes filtros como um valor para filter Se você aplicar um filtro incorretamente, o restante dos filtros definidos para filter não vai funcionar.

blur

Isso aplica um desfoque gaussiano, e o único argumento que pode ser transmitido é um radius. que é o nível de desfoque aplicado. Precisa ser uma unidade de comprimento, como 10px. Porcentagens não são aceitas.

.my-element {
    filter: blur(0.2em);
}

brightness

Compatibilidade com navegadores

  • Chrome: 18.
  • Borda: 12.
  • Firefox: 35.
  • Safari: 6.

Origem

Para aumentar ou diminuir o brilho de um elemento, use a função de brilho. O valor de brilho é expresso como uma porcentagem e a imagem inalterada é expressada como o valor de 100%. Um valor de 0% torna a imagem completamente preta, portanto, valores entre 0% e 100% tornam a imagem menos brilhante. Use valores acima de 100% para aumentar o brilho.

.my-element {
    filter: brightness(80%);
}

contrast

Compatibilidade com navegadores

  • Chrome: 18.
  • Borda: 12.
  • Firefox: 35.
  • Safari: 6.

Origem

Defina um valor entre 0% e 100% para diminuir ou aumentar o contraste, respectivamente.

.my-element {
    filter: contrast(160%);
}

grayscale

Compatibilidade com navegadores

  • Chrome: 18.
  • Borda: 12.
  • Firefox: 35.
  • Safari: 6.

Origem

É possível aplicar um efeito completamente de escala de cinza usando 1 como um valor para grayscale(). ou 0 para ter um elemento completamente saturado. Também é possível usar valores percentuais ou decimais para aplicar apenas um efeito parcial de escala de cinza. Se você não transmitir argumentos, o elemento será completamente escala de cinza. Se você passar um valor maior do que 100%, ele será limitado a 100%.

.my-element {
    filter: grayscale(80%);
}

invert

Compatibilidade com navegadores

  • Chrome: 18.
  • Borda: 12.
  • Firefox: 35.
  • Safari: 6.

Origem

Assim como grayscale, Você pode transmitir 1 ou 0 à função invert() para ativá-la ou desativá-la. Quando ativado, as cores do elemento ficam completamente invertidas. Também é possível usar valores percentuais ou decimais para aplicar apenas uma inversão parcial de cores. Se você não transmitir argumentos na função invert(), o elemento será completamente invertido.

.my-element {
    filter: invert(1);
}

opacity

Compatibilidade com navegadores

  • Chrome: 18.
  • Borda: 12.
  • Firefox: 35.
  • Safari: 6.

Origem

O filtro opacity() funciona como a propriedade opacity, em que é possível transmitir um número ou uma porcentagem para aumentar ou reduzir a opacidade. Se você não transmitir argumentos, o elemento ficará totalmente visível.

.my-element {
    filter: opacity(0.3);
}

saturate

Compatibilidade com navegadores

  • Chrome: 18.
  • Borda: 12.
  • Firefox: 35.
  • Safari: 6.

Origem

O filtro de saturação é muito semelhante ao filtro brightness e aceita o mesmo argumento: número ou porcentagem. Em vez de aumentar ou diminuir o efeito de brilho, saturate aumenta ou diminui a saturação de cor.

.my-element {
    filter: saturate(155%);
}

sepia

Compatibilidade com navegadores

  • Chrome: 18.
  • Borda: 12.
  • Firefox: 35.
  • Safari: 6.

Origem

É possível adicionar um efeito de tom sépia com este filtro do tipo grayscale(). O tom sépia é uma técnica de impressão fotográfica que converte tons pretos em tons marrons para aquecê-los. É possível transmitir um número ou porcentagem como argumento para sepia() o que aumenta ou diminui o efeito. Não transmitir argumentos adiciona um efeito sépia total (equivalente a sepia(100%)).

.my-element {
    filter: sepia(70%);
}

hue-rotate

Compatibilidade com navegadores

  • Chrome: 18.
  • Borda: 12.
  • Firefox: 35.
  • Safari: 6.

Origem

Você aprendeu como a matiz em hsl faz referência a uma rotação da roda de cores na aula de cores, e esse filtro funciona de maneira semelhante. Se você passar um ângulo, como graus ou curvas, ele muda a tonalidade de todas as cores do elemento, alterando a parte da roda de cores a que se refere. Se você não transmitir nenhum argumento, ele não vai ter efeito.

.my-element {
    filter: hue-rotate(120deg);
}

drop-shadow

Compatibilidade com navegadores

  • Chrome: 18.
  • Borda: 12.
  • Firefox: 35.
  • Safari: 6.

Origem

Você pode aplicar uma sombra projetada que abraça uma curva, como faria em uma ferramenta de design, como Photoshop com drop-shadow Essa sombra é aplicada a uma máscara alfa, o que a torna muito útil para adicionar uma sombra a uma imagem recortada. O filtro drop-shadow usa um parâmetro de sombra que contém valores separados por espaços de deslocamento x, y, desfoque e cor. Ele é quase idêntico a box-shadow, mas a palavra-chave inset e o valor de propagação não são compatíveis.

.my-element {
    filter: drop-shadow(5px 5px 10px orange);
}

Saiba mais sobre os diferentes tipos de sombras no módulo shadows.

url

Compatibilidade com navegadores

  • Chrome: 5.
  • Borda: 12.
  • Firefox: 3.
  • Safari: 6.

Origem

Com o filtro url, é possível aplicar um filtro de um elemento ou arquivo SVG vinculado. Você pode leia mais sobre filtros SVG aqui

Filtro de pano de fundo

Compatibilidade com navegadores

  • Chrome: 76.
  • Borda: 79.
  • Firefox: 103
  • Safari: 18.

Origem

O filtro de fundo aceita todos os mesmos valores da função de filtro que filter. A diferença entre backdrop-filter e filter é que a propriedade backdrop-filter só aplica os filtros ao plano de fundo, em que a propriedade filter se aplica a todo o elemento.

O exemplo no início desta lição é perfeito, porque você não quer que o texto seja desfocado e, de preferência, não quer adicionar elementos HTML extras. A possibilidade de aplicar filtros apenas ao pano de fundo permite isso.

Teste seu conhecimento

Teste seus conhecimentos sobre filtros

Quais das opções a seguir são funções de filtro do CSS?

grayscale()
🎉
invert()
🎉
flip()
Tente novamente.
multiply()
Tente novamente.
blur()
🎉
brightness()
🎉

O CSS pode usar filtros SVG?

Sim
A função de filtro url() permite isso.
Não
Tente novamente.