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
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
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 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
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
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
É 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 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
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
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
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?
brightness()
multiply()
blur()
flip()
invert()
grayscale()
O CSS pode usar filtros SVG?