Filtros

The CSS Podcast - 023: Filters

Digamos que você precise criar um elemento com um efeito de vidro fosco ligeiramente opaco que fica sobre a parte de cima de uma imagem. O texto precisa ser dinâmico, não uma imagem. Como fazer isso?

Uma combinação de filtros CSS e backdrop-filter permite aplicar efeitos e desfocar o que for necessário em tempo real. O desfoque e a opacidade são dois dos muitos filtros disponíveis. Vamos conferir rapidamente o que eles fazem e como usá-los.

Observação : ao colocar texto sobre imagens, tenha cuidado para que o texto ainda seja legível caso o efeito de filtro não seja compatível com o navegador do usuário.

A propriedade filter

Browser Support

• 53
• 12
• 35
• 9.1

Source

É possível aplicar um ou vários dos filtros a seguir 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 você pode transmitir é um radius, que é a intensidade do desfoque aplicado. Ele precisa ser uma unidade de comprimento, como 10px. Porcentagens não são aceitas.

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

brightness

Browser Support

• 18
• 12
• 35
• 6

Source

Para aumentar ou diminuir o brilho de um elemento, use a função de brilho. O valor de brilho é expresso como uma porcentagem, com a imagem inalterada expressa como um 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%);
}

Observação : também é possível usar valores decimais em vez de valores percentuais em filtros como brightness. Para definir o brilho em 80% com um número decimal, digite 0.8.

contrast

Browser Support

• 18
• 12
• 35
• 6

Source

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

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

grayscale

Browser Support

• 18
• 12
• 35
• 6

Source

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

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

invert

Browser Support

• 18
• 12
• 35
• 6

Source

Assim como grayscale, é possível transmitir 1 ou 0 para a função invert() para ativar ou desativar. Quando ele está ativado, as cores do elemento são completamente invertidas. Você também pode usar valores percentuais ou decimais para aplicar apenas uma inversão parcial das cores. Se você não transmitir argumentos para a função invert(), o elemento será completamente invertido.

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

opacity

Browser Support

• 18
• 12
• 35
• 6

Source

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

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

saturate

Browser Support

• 18
• 12
• 35
• 6

Source

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 cores.

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

sepia

Browser Support

• 18
• 12
• 35
• 6

Source

É possível adicionar um efeito de tom sépia com esse filtro que funciona como grayscale(). O tom sépia é uma técnica de impressão fotográfica que converte tons pretos em tons marrons para aquecer a imagem. É possível transmitir um número ou uma porcentagem como o argumento para sepia(), o que aumenta ou diminui o efeito. Transmitir nenhum argumento adiciona um efeito sepia completo (equivalente a sepia(100%)).

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

hue-rotate

Browser Support

• 18
• 12
• 35
• 6

Source

Você aprendeu como a matiz em hsl faz referência a uma rotação da roda de cores na lição sobre cores, e esse filtro funciona de maneira semelhante. Se você transmitir um ângulo, como graus ou voltas, ele mudará a matiz de todas as cores do elemento, alterando a parte da roda de cores a que ele se refere. Se você não transmitir nenhum argumento, ele não fará nada.

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

drop-shadow

Browser Support

• 18
• 12
• 35
• 6

Source

Você pode aplicar uma sombra projetada que acompanha a curva, como faria em uma ferramenta de design, como o Photoshop com drop-shadow. Essa sombra é aplicada a uma máscara alfa, o que é muito útil para adicionar uma sombra a uma imagem recortada. O filtro drop-shadow usa um parâmetro de sombra que contém valores de desfoque, cor e deslocamento x e y separados por espaços. Ela é quase idêntica 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

Browser Support

• 5
• 12
• 3
• 6

Source

O filtro url permite aplicar um filtro SVG de um elemento ou arquivo SVG vinculado. Saiba mais sobre os filtros SVG.

Filtro de pano de fundo

Browser Support

• 76
• 79
• 103
• 18

Source

A propriedade backdrop-filter aceita todos os mesmos valores de função de filtro que filter. A diferença entre backdrop-filter e filter é que a propriedade backdrop-filter aplica os filtros apenas ao plano de fundo, enquanto a propriedade filter os aplica a todo o elemento.

O exemplo no início desta lição é perfeito, porque você não quer que o texto fique desfocado e, idealmente, não quer adicionar elementos HTML extras. Isso é possível ao aplicar filtros apenas ao plano de fundo.

Teste seu conhecimento

Teste seus conhecimentos sobre filtros

Quais das opções a seguir são funções de filtro 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.