O CSS filter propriedade parece um atalho de estilo: uma linha transforma uma foto em preto e branco, desfoca um fundo ou aquece uma miniatura, sem editor de imagens envolvido É isso Também muda como o navegador posiciona e camadas o elemento que é aplicado, e é por isso que um filtro adicionado para um efeito de hover pode quebrar silenciosamente um dropdown a três componentes de distância.
Este guia cobre o que cada função de filtro faz aos valores de pixel, por que as mesmas funções em uma ordem diferente produzem uma imagem diferente, como os filtros se comportam no layout e na animação e onde custam o desempenho Ele usa o livre Gerador filtro CSS para construir as declarações, mas cada exemplo é CSS simples, você pode colar em qualquer lugar.
tl;dr: O CSS
filterpropriedade aplica efeitos gráficos como desfoque, brilho, contraste, escala de cinza, sépia, saturar, inverter, hue-rotate e opacidade a um elemento e tudo dentro dele, na ordem em que as funções são escritas Qualquer valor que não sejanonetambém cria um contexto de empilhamento e torna - se o bloco de contenção para crianças fixas e absolutamente posicionadas, o que é a causa habitual do & quot; o meu modal está preso dentro de um cartão & quot; O gerador de filtros CSS do Toolz constrói a declaração com controles deslizantes e uma antevisão ao vivo, escreve apenas as funções que alterou, e executa o lado do cliente, livre, sem inscrição.
Qual é a propriedade do filtro CSS?
A propriedade de filtro CSS aplica efeitos de processamento de imagem a um elemento antes de ser desenhado na página O efeito cobre o elemento' s toda a renderização: seu fundo, bordas, texto, imagens e elementos filhos É definido no W3 C Módulo de efeitos de filtro nível 1 e suportados em todos os navegadores atuais; o Referência MDN para filtro lista detalhes de compatibilidade.
Uma declaração é uma lista separada por espaços de funções de filtro:
img.hero {
filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%);
}
As funções são executadas da esquerda para a direita Cada um toma a saída do anterior como sua entrada, que é a chave para entender por que a ordem importa.
Os filtros não modificam o ficheiro de imagem O navegador aplica-os cada vez que pinta, pelo que o original permanece intocado e pode alterar ou remover o efeito com uma linha de CSS.
O que cada função de filtro faz?
Cada função tem um valor de identidade que deixa o elemento inalterado O gerador Toolz usa isso para manter a saída curta: qualquer função deixada em seu valor de identidade é omitida do CSS.
| Função | O que faz | Identidade | Gama deslizante do gerador |
|---|---|---|---|
blur() |
Desfoque gaussiano com o raio dado | 0px |
0 a 20px |
brightness() |
Multiplica cada canal de cor | 100% |
0 a 200% |
contrast() |
Afasta os canais ou em direção ao meio cinza | 100% |
0 a 200% |
saturate() |
Aumenta ou diminui a intensidade da cor | 100% |
0 a 200% |
grayscale() |
Mistura-se em direção a um cinza de igual luminância | 0% |
0 a 100% |
sepia() |
Mistura-se em direção a um tom marrom quente | 0% |
0 a 100% |
invert() |
Vira cada canal em direção ao seu oposto | 0% |
0 a 100% |
hue-rotate() |
Gira cores ao redor da roda de cores | 0deg |
0 a 360 graus |
opacity() |
Torna o elemento mais transparente | 100% |
0 a 100% |
A especificação permite valores além de alguns desses intervalos, como brightness(300%). Os controles deslizantes cobrem os intervalos úteis para ajustes de estilo de foto; você pode digitar manualmente um valor maior em seu CSS.
A especificação também define drop-shadow(), que o gerador não inclui. Diferente box-shadow, drop-shadow() segue a forma visível de imagens transparentes, como ícones PNG, em vez da caixa retangular element' s. Para sombras retangulares, o guia sombra caixa abrange a propriedade mais flexível.
Como os filtros de cores alteram os valores dos pixels?
A maioria dos filtros de cores são aritméticos simples nos canais vermelho, verde e azul, cada um tratado como um número de 0 a 1. a especificação Filter Effects define cada um como uma fórmula ou uma matriz 3 por 3. trabalhada em algumas cores, eles se tornam previsíveis.
brilho(150%) multiplica cada canal por 1.5. um cinza médio de rgb (100, 100, 100) torna-se rgb (150, 150, 150).Os valores que passariam de 255 são cortados, e é por isso que o alto brilho lava os destaques para branco puro.
contraste(200%) aplica (valor - 0,5) × 2 + 0,5 a cada canal Um cinza escuro a 0,25 (cerca de 64) torna-se (0,25 - 0,5) × 2 + 0,5 = 0, preto Um cinza claro a 0,75 torna-se 1,0, branco Tudo se espalha para longe do meio.
escala de cinza(100%) substitui cada pixel por um cinza com base na luminância, usando pesos de 0,2126 para vermelho, 0,7152 para verde e 0,0722 para azul Vermelho puro, rgb (255, 0, 0), torna-se 0,2126 × 255 = cerca de 54, então rgb (54, 54, 54).O verde puro torna-se um cinza muito mais claro de cerca de 182. é por isso que uma conversão em tons de cinza mantém a sensação de que o verde é mais brilhante que o vermelho.
sépia(100%) mistura canais com coeficientes ponderados a quente Para a saída vermelha a fórmula é 0,393 R + 0,769 G + 0,189 B. Branco entra como (1, 1, 1) e sai como aproximadamente (1,35, 1,20, 0,94), que se prende a rgb (255, 255, 239): branco torna-se um creme fraco.
Estes números vêm da aplicação da especificação' s fórmulas diretamente Na tela, arredondamento e gerenciamento de cores pode mover um resultado por uma unidade ou duas.
Por que a ordem das funções do filtro altera o resultado?
Os filtros são aplicados em sequência, de modo que cada função funciona na saída anterior do function' s. Quando uma função remove informações, como a remoção de cor em escala de cinza, qualquer coisa que seja executada depois dela tem menos com que trabalhar.
Pegue azul puro, rgb (0, 0, 255), e aplique escala de cinza e sépia a 100% em ambas as ordens.
filter: grayscale(100%) sepia(100%);
- Escala de cinza primeiro: o azul tem luminância 0,0722, então o pixel se torna um cinza escuro de 0,0722 em cada canal, cerca de rgb (18, 18, 18).
- Sépia em segundo lugar: o vermelho torna-se 0,0722 × (0,393 + 0,769 + 0,189) = 0,0975, o verde torna-se 0,0722 × 1,203 = 0,0869, o azul torna-se 0,0722 × 0,937 = 0,0677.
- Resultado: sobre rgb(25, 22, 17), um marrom quente muito escuro.
filter: sepia(100%) grayscale(100%);
- Sépia primeiro: o vermelho passa a ser 0,189, o verde 0,168, o azul 0,131, o marrom escuro.
- Segunda escala de cinza: a luminância é 0,2126 × 0,189 + 0,7152 × 0,168 + 0,0722 × 0,131 = 0,170.
- Resultado: sobre rgb(43, 43, 43), um cinza neutro sem nenhum tom.
As mesmas duas funções, ordem diferente, e um resultado é tonificado enquanto o outro não é A regra geral: coloque as funções de remoção de cor primeiro se você quiser que uma função posterior mande o resultado e por último se quiser uma imagem final neutra.
O gerador sempre escreve funções em uma ordem fixa: desfoque, brilho, contraste, saturação, escala de cinza, sépia, inverter, hue-rotate, opacidade Então escala de cinza sempre vem antes de sépia, que dá a versão tonificada Se você precisar de uma ordem diferente, copie o CSS e reorganize as funções à mão.
O que as predefinições produzem?
O gerador abre na predefinição Vintage. Estas são as declarações exatas que cada predefinição escreve:
| Predefinição | Css gerado |
|---|---|
| nenhum | filter: none; |
| Escala cinza | filter: grayscale(100%); |
| Vintage | filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%); |
| Quente | filter: brightness(105%) saturate(140%) sepia(25%); |
| Legal | filter: saturate(120%) hue-rotate(200deg); |
| Dramático | filter: brightness(90%) contrast(150%) saturate(120%); |
| Desapareceu | filter: brightness(110%) saturate(80%) opacity(80%); |
| Inverter | filter: invert(100%); |
| Borrão | filter: blur(4px); |
As predefinições são pontos de partida Clique em Quente, depois arraste o Borrão para 2 px, e a saída se torna filter: blur(2px) brightness(105%) saturate(140%) sepia(25%);. Clique em Nenhum ou Redefinir e ele retorna para filter: none;.
A predefinição Cool é mais forte do que o seu nome sugere: uma rotação de matiz de 200 graus move laranjas em direção ao azul e azuis em direção ao laranja Ele lê como & quot; cool" em fotos quentes e como uma mudança de cor pesada em todo o resto.
A visualização é uma amostra fixa de um gradiente azul, laranja e verde com algumas formas, não um upload Ele mostra como cada função move cor, contraste e desfoque, mas sempre teste o CSS copiado em sua imagem real, porque um filtro que achata um gradiente pode parecer lamacento em um tom de pele.
Como você constrói um filtro com o gerador?
- abra o filtro gerador CSS. Começa no Vintage.
- Escolha uma predefinição mais próxima da aparência desejada ou clique em Nenhuma para iniciar sem filtros.
- Arraste os controles deslizantes A visualização é atualizada à medida que você se move, e a linha CSS Gerada é atualizada com ela.
- Clique em Copiar CSS para colocar o completo
filter: ...;declaração na sua área de transferência. - Cole-o no seletor para sua imagem ou elemento e verifique-o na página real.
Apenas funções alteradas aparecem na saída, portanto, mover o Brilho de volta para exatamente 100% é removido brightness() da linha em vez de sair brightness(100%) atrás.
Por que um filtro quebra elementos fixos e absolutamente posicionados?
Porque qualquer filter exceto none torna o elemento um bloco de contenção para seus descendentes posicionados absolutamente e fixos, e cria um novo contexto de empilhamento A especificação Filter Effects afirma ambos Isso não é um bug do navegador; é como a propriedade é definida.
Na prática, isso produz dois bugs clássicos.
Um modal fixo que não é fixo. Normalmente position: fixed coloca um elemento relativo à janela de visualização Dentro de um ancestral filtrado é colocado em relação a esse ancestral em vez disso:
.card { filter: grayscale(100%); }
/* Meant to cover the whole screen, but now covers only .card */
.card .modal { position: fixed; inset: 0; }
Uma queda escondida sob vizinhos. O elemento filtrado torna-se seu próprio contexto de empilhamento, portanto, uma criança com z-index: 1000 não pode mais subir acima dos elementos fora do cartão Ele está apenas no topo dentro do cartão.
As correções são as mesmas para ambos Aplique o filtro em um elemento mais estreito, como o img dentro do cartão em vez do cartão em si Ou renderize o modal ou dropdown fora do elemento filtrado, que é o que o & quot; portal" componentes em estruturas de UI fazem O transform propriedade causa o mesmo comportamento de bloco de contenção, então o Guia de transformação CSS é útil se você encontrar esse bug com ambas as propriedades em jogo.
Como os filtros se comparam com o filtro de fundo e a opacidade?
Várias propriedades se sobrepõem às funções de filtro e escolher a correta evita efeitos colaterais.
| Propriedade | Afeta | Uso típico |
|---|---|---|
filter |
O elemento e seu conteúdo | Efeitos fotográficos, logotipos em tons de cinza, desfoque em uma imagem |
backdrop-filter |
O que quer que esteja por trás do elemento | Painéis de vidro fosco, sobreposições desfocadas |
opacity |
O elemento e seu conteúdo | Desaparecendo um elemento para dentro ou para fora |
filter: opacity() |
O elemento e seu conteúdo | Transparência como parte de uma cadeia de filtros |
mix-blend-mode |
Como o elemento se mistura com o que está por trás dele | Sobreposições de cores, efeitos duotônicos |
backdrop-filter assume as mesmas funções que filter, mas aplica-os ao conteúdo por trás do elemento, que é como os painéis de glassmorphism borram a página abaixo O gerador glassmorphism constrói essas declarações.
Para desvanecer um elemento por si só, simples opacity é a escolha mais clara. opacity() dentro de uma cadeia de filtros é útil quando você já está escrevendo um filtro e deseja transparência na mesma linha.
Você pode animar filtros CSS?
Sim. filter é animável e um padrão comum é um logotipo em escala de cinza que fica colorido ao passar o mouse:
.logo {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
.logo:hover {
filter: none;
}
O navegador interpola entre grayscale(100%) e none porque none é tratado como as funções correspondentes em seus valores de identidade A interpolação funciona de forma limpa quando ambos os estados listam as mesmas funções na mesma ordem Se as listas de início e fim diferirem em ordem, o resultado pode saltar em vez de animar suavemente, então escreva ambos os estados com a mesma ordem de função.
Os filtros CSS prejudicam o desempenho?
Os filtros custam tempo de renderização, e o desfoque custa mais Os navegadores geralmente executam filtros na GPU, o que torna a maioria dos filtros de cores baratos. blur() é diferente: o trabalho cresce tanto com o raio de desfoque quanto com o tamanho da área, de modo que um grande raio em um elemento de tela cheia, especialmente aquele que anima ou fica atrás do conteúdo de rolagem, pode soltar quadros em dispositivos mais lentos.
Limites práticos:
- Mantenha os raios de desfoque pequenos em elementos grandes e evite animar o próprio raio.
- Desfoque um elemento menor ou uma imagem reduzida em vez de um invólucro de página inteira.
- Para movimento, animar
transformeopacity, que os navegadores manipulam eficientemente, e mantêm o filtro estático. - Teste em um telefone de gama média, não apenas em um desktop.
Perguntas comuns sobre efeitos específicos
Alguns efeitos surgem com frequência suficiente para serem escritos.
Imagem em preto e branco: filter: grayscale(100%); Valores abaixo de 100% deixam alguma cor, então grayscale(50%) dá um olhar mudo.
Imagem de fundo diminuída atrás do texto: filter: brightness(60%); no elemento de imagem Verifique o contraste do texto depois em vez de adivinhar; o verificador do contraste da cor dá uma relação WCAG.
Modo escuro áspero para um documento ou diagrama incorporado: filter: invert(100%) hue-rotate(180deg); Inverter os flips claro e escuro, mas também transforma os tons em seus opostos; girar a tonalidade em 180 graus traz a maioria das cores de volta à sua tonalidade original É uma aproximação, e as fotos dentro parecerão erradas, então exclua-as.
Tonificado em preto e branco: filter: grayscale(100%) sepia(60%); conforme trabalhado acima.
O conjunto completo de construtores CSS, incluindo sombra e transformações de texto, está no Hub de ferramentas CSS.
O gerador é privado?
Sim. a visualização e o CSS são gerados no seu navegador com JavaScript Nada é carregado, não há imagem para fazer upload em primeiro lugar, e a ferramenta continua funcionando offline uma vez que a página tenha carregado Copiar o CSS conta para um limite de uso diário e registra apenas que uma cópia aconteceu.
