Podcast do CSS - 023: filtros
Digamos que você precise criar um elemento que tenha um efeito de vidro fosco ligeiramente opaco sobre uma imagem. O texto precisa ser um texto dinâmico, e não uma imagem. Como fazer isso?
Uma combinação de filtros CSS e backdrop-filter
permite aplicar efeitos e desfocar o que é necessário em tempo real.
Desfoque e opacidade são dois dos muitos filtros disponíveis.
Vamos conferir o que eles fazem e como usá-los.
A propriedade filter
É possível aplicar um ou vários dos filtros a seguir como um valor para
filter.
Se você aplicar um filtro incorretamente,
os demais filtros definidos para filter não vão funcionar.
blur
Isso aplica um desfoque gaussiano, e o único argumento que você pode transmitir é um radius,
que é
o quanto o desfoque é aplicado.
Precisa ser uma unidade de comprimento, como 10px. Porcentagens não são aceitas.
.my-element {
filter: blur(0.2em);
}
brightness
Para aumentar ou diminuir o brilho de um elemento, use a função de brilho. O valor do brilho é expresso como uma porcentagem, e 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%);
}
contrast
Defina um valor entre 0% e 100% para diminuir ou aumentar o contraste, respectivamente.
.my-element {
filter: contrast(160%);
}
grayscale
É possível aplicar um efeito completamente em 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 ficará completamente em escala de cinza.
Se você passar um valor maior que 100%, ele será limitado a 100%.
.my-element {
filter: grayscale(80%);
}
invert
Assim como grayscale,
você pode transmitir 1 ou 0 à função invert() para ativá-la ou desativá-la.
Quando ativada, as cores do elemento são completamente invertidas.
Também é possível usar valores percentuais ou decimais para aplicar somente uma inversão parcial de cores.
Se você não transmitir nenhum argumento para a função invert(),
o elemento será completamente invertido.
.my-element {
filter: invert(1);
}
opacity
O filtro opacity() funciona como a propriedade opacity,
em que é possível transmitir um número ou porcentagem para aumentar ou reduzir a opacidade.
Se você não transmitir argumentos, o elemento estará totalmente visível.
.my-element {
filter: opacity(0.3);
}
saturate
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
É possível adicionar um efeito de tom de sépia com este filtro que funciona como grayscale().
O tom de sépia é uma técnica de impressão fotográfica que converte tons pretos em tons marrons para aquecê-los.
Você pode transmitir um número ou uma porcentagem como argumento para sepia(),
que aumenta ou diminui o efeito.
Não transmitir nenhum argumento adiciona um efeito sépia completo (equivalente a sepia(100%)).
.my-element {
filter: sepia(70%);
}
hue-rotate
Você aprendeu como o matiz em hsl referencia a rotação da roda de cores na
lição de cores, e esse filtro funciona de maneira semelhante.
Se você passa um ângulo, como graus ou curvas,
ele muda a matiz de todas as cores do elemento,
mudando a parte da roda de cores a que ele faz referência. Se você não transmitir nenhum argumento, ele não vai fazer nada.
.my-element {
filter: hue-rotate(120deg);
}
drop-shadow
É possível aplicar uma sombra projetada em curva como você faria em uma ferramenta de design,
como o 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 de recorte.
O filtro drop-shadow usa um parâmetro de sombra que contém valores de offset-x, offset-y, desfoque e cor separados por espaço.
Ele é quase idêntico a box-shadow, mas não há suporte para a palavra-chave inset e o valor de propagação.
.my-element {
filter: drop-shadow(5px 5px 10px orange);
}
Saiba mais sobre os diferentes tipos de sombras no módulo de sombras.
url
O filtro url permite aplicar um filtro SVG de um elemento ou arquivo SVG vinculado.
Você pode
ler mais sobre filtros SVG aqui
Filtro do pano de fundo
A propriedade backdrop-filter aceita 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 os 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, idealmente, não quer adicionar mais elementos HTML. A possibilidade de aplicar filtros apenas no pano de fundo possibilita isso.
Teste seu conhecimento
Teste seus conhecimentos sobre filtros
Quais das opções a seguir são funções de filtro CSS?
grayscale()invert()flip()multiply()blur()brightness()O CSS pode usar filtros SVG?
url() permite