Filtros CSS são uma ferramenta poderosa que os autores podem usar para obter diversos efeitos visuais (como os filtros do Photoshop para o navegador). A filterpropriedade CSS fornece acesso a efeitos como desfoque ou mudança de cor na renderização de um elemento antes que o elemento seja exibido. Filtros são comumente usados para ajustar a renderização de uma imagem, um plano de fundo ou uma borda.
A sintaxe é:
.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )Existem várias funções a serem usadas para o valor:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- para aplicar filtros SVGcustom()- "em breve"
Podem ser usadas várias funções, separadas por espaço.
.do-more-things ( filter: blur(20px) grayscale(20%); )Funções de filtro
Para usar a propriedade de filtro CSS, você especifica um valor para uma das seguintes funções listadas acima. Se o valor for inválido, a função retornará “nenhum”. Exceto onde indicado, as funções que assumem um valor expresso com um sinal de porcentagem (como em 34%) também aceitam o valor expresso como decimal (como em 0,34).
Aqui está uma demonstração que permite brincar um pouco com filtros individuais:
escala de cinza ()
filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);Converte a imagem de entrada em tons de cinza. O valor de “montante” define a proporção da conversão. Um valor de 100% é totalmente em tons de cinza. Um valor de 0% não altera a entrada. Valores entre 0% e 100% são multiplicadores lineares do efeito. Se o parâmetro “quantidade” estiver faltando, um valor de 100% é usado. Valores negativos não são permitidos.
sépia()
filter: sepia(0.8); /* same as… */ filter: sepia(80%);Converte a imagem de entrada em sépia. O valor de “montante” define a proporção da conversão. Um valor de 100% é totalmente sépia. Um valor de 0 deixa a entrada inalterada. Valores entre 0% e 100% são multiplicadores lineares do efeito. Se o parâmetro “quantidade” estiver faltando, um valor de 100% é usado. Valores negativos não são permitidos.
saturar()
filter: saturate(2); /* same as… */ filter: sature(200%);Satura a imagem de entrada. O valor de “montante” define a proporção da conversão. Um valor de 0% é completamente insaturado. Um valor de 100% não altera a entrada. Outros valores são multiplicadores lineares do efeito. Valores acima de 100% são permitidos, fornecendo resultados supersaturados. Se o parâmetro “quantidade” estiver faltando, um valor de 100% é usado. Valores negativos não são permitidos.
hue-rotate ()
filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);Aplica uma rotação de matiz na imagem de entrada. O valor de “ângulo” define o número de graus ao redor do círculo de cores em que as amostras de entrada serão ajustadas. Um valor de 0deg deixa a entrada inalterada. Se o parâmetro “ângulo” estiver faltando, um valor de 0degé usado. O valor máximo é 360deg.
invertido()
filter: invert(100%);Inverte as amostras na imagem de entrada. O valor de “montante” define a proporção da conversão. Um valor de 100% é totalmente invertido. Um valor de 0% não altera a entrada. Valores entre 0% e 100% são multiplicadores lineares do efeito. Se o parâmetro “quantidade” estiver faltando, um valor de 100% é usado. Valores negativos não são permitidos.
opacidade()
filter: opacity(0.5); /* same as… */ filter: opacity(50%);Aplica transparência às amostras na imagem de entrada. O valor de “montante” define a proporção da conversão. Um valor de 0% é totalmente transparente. Um valor de 100% não altera a entrada. Valores entre 0% e 100% são multiplicadores lineares do efeito. Isso é equivalente a multiplicar as amostras da imagem de entrada pela quantidade. Se o parâmetro “quantidade” estiver faltando, um valor de 100% é usado. Esta função é semelhante à propriedade de opacidade mais estabelecida; a diferença é que, com filtros, alguns navegadores fornecem aceleração de hardware para melhor desempenho. Valores negativos não são permitidos.
brilho()
filter: brightness(0.5); /* same as… */ filter: brightness(50%);Aplica um multiplicador linear à imagem de entrada, tornando-a mais ou menos brilhante. Um valor de 0% criará uma imagem totalmente preta. Um valor de 100% não altera a entrada. Outros valores são multiplicadores lineares do efeito. Valores acima de 100% são permitidos, fornecendo resultados mais brilhantes. Se o parâmetro “quantidade” estiver faltando, um valor de 100% é usado.
contraste()
filter: contrast(4); /* same as… */ filter: contrast(400%);Ajusta o contraste da entrada. Um valor de 0% criará uma imagem totalmente preta. Um valor de 100% não altera a entrada. Valores acima de 100% são permitidos, proporcionando resultados com menos contraste. Se o parâmetro “quantidade” estiver faltando, um valor de 100% é usado.
borrão()
filter: blur(5px); filter: blur(1rem);Aplica um desfoque gaussiano à imagem de entrada. O valor de 'raio' define o valor do desvio padrão para a função gaussiana, ou quantos pixels na tela se misturam, então um valor maior criará mais desfoque. Se nenhum parâmetro for fornecido, o valor 0 será usado. O parâmetro é especificado como comprimento CSS, mas não aceita valores percentuais.
sombra projetada ()
filter: drop-shadow((2,3) ?)Aplica um efeito de sombra projetada à imagem de entrada. Uma sombra projetada é efetivamente uma versão desfocada e desfocada da máscara alfa da imagem de entrada desenhada em uma cor específica, composta abaixo da imagem. A função aceita um parâmetro do tipo (definido em Fundos CSS3), com a exceção de que a palavra-chave 'inset' não é permitida.
Esta função é semelhante à propriedade de sombra de caixa mais estabelecida; a diferença é que, com filtros, alguns navegadores fornecem aceleração de hardware para melhor desempenho.
A sombra projetada também imita o contorno dos objetos pretendidos naturalmente, ao contrário de box-shadowque trata apenas a caixa como seu caminho.
Assim como com a sombra do texto, não há parâmetro de 'propagação' para criar uma sombra sólida maior que o objeto.
url ()
filter: url()A url()função obtém a localização de um arquivo XML que especifica um filtro SVG e pode incluir uma âncora para um elemento de filtro específico. Aqui está um tutorial que funciona como uma boa introdução aos filtros SVG com uma demonstração divertida.
Filtros de animação
Como os Filtros são animáveis, eles podem abrir as portas para muita diversão.
Notas
Você pode combinar qualquer número de funções para manipular a renderização, mas a ordem ainda importa (ou seja, usar grayscale()depois sepia()resultará em uma saída completamente cinza).
Um valor calculado diferente de “nenhum” resulta na criação de um contexto de empilhamento da mesma forma que a opacidade CSS. A propriedade de filtro não tem efeito sobre a geometria do modelo de caixa do elemento de destino, embora os filtros possam causar pintura fora da caixa de borda de um elemento. Todas as partes do elemento de destino são afetadas pelas funções de filtro. Isso inclui qualquer conteúdo, plano de fundo, bordas, decoração de texto, contorno e mecanismo de rolagem visível do elemento ao qual o filtro é aplicado e os de seus descendentes. Os filtros também podem ser aplicados ao conteúdo embutido, como extensões de texto individuais.
A especificação também introduz uma filter(image-URL, filter-functions)função de invólucro para uma imagem. Isso permitiria que você filtrasse qualquer imagem no momento em que a utilizasse no CSS. Por exemplo, você pode desfocar uma imagem de fundo sem desfocar o texto. Esta função de filtro ainda não é compatível com navegadores. Nesse ínterim, você pode aplicar o fundo e o filtro a um pseudoelemento para criar um efeito semelhante.
O filtro proprietário do IE
Também utilizou a filterpropriedade, como:
.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )Principalmente usado para opacidade quando você precisava oferecer suporte ao IE 8 e versões anteriores.
Mais Informações
- Especificação de efeitos de filtro W3C
- http://html5-demos.appspot.com/static/css/filters/index.html
- Galeria de Filtros de Bennett Feely
- MDN Docs
- Eu posso usar
- http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
- https://github.com/Schepp/CSS-Filters-Polyfill
- Compreendendo os efeitos do filtro CSS
Suporte para navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 18 * | 35 | Não | 79 | 6 * |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4,4 * | 6,0-6,1 * |