Podcast CSS - 023: Filtros
Digamos que você precise criar um elemento com um efeito de vidro fosco um pouco opaco que fica na parte de cima de uma imagem. O texto precisa ser dinâmico e não uma imagem. Como fazer isso?
Com uma combinação de filtros CSS e backdrop-filter,
podemos aplicar efeitos e desfocar o que é necessário em tempo real.
Desfoque e opacidade são dois dos muitos filtros disponíveis.
Por isso, vamos conferir o que todos fazem e como usá-los.
A propriedade filter
É possível aplicar um ou vários dos filtros abaixo como um valor para
filter.
Se você aplicar um filtro incorretamente,
os outros filtros definidos para filter não funcionarão.
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
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
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 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
Assim como em grayscale,
você pode transmitir 1 ou 0 à função invert() para ativá-la ou desativá-la.
Quando ela está ativada, as cores do elemento são 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 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 ficará 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,
o saturate aumenta ou diminui a saturação de cor.
.my-element {
filter: saturate(155%);
}
sepia
É 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
Você aprendeu sobre como a matiz em hsl referencia 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 curvas,
ele mudará a tonalidade de todas as cores do elemento,
mudando 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
É possível aplicar uma sombra projetada que abraça uma curva, como você 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.
É 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
Com o filtro url, é possível aplicar um filtro de um elemento ou arquivo SVG vinculado.
Leia mais sobre filtros SVG aqui.
Filtro de pano de fundo
A propriedade backdrop-filter aceita os mesmos valores da função de filtro que a filter.
A diferença entre backdrop-filter e filter
é que a propriedade backdrop-filter aplica apenas os filtros ao segundo plano,
onde a propriedade filter 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 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()multiply()blur()brightness()O CSS pode usar filtros SVG?
url() permite isso.