CSS3 Filters (Filters)

CSS3Filter effects provide a simple way to apply visual effects to images.

Learn CSS3filter functions

In this chapter, we will discuss CSS3introduced filter effects, you can perform visual effects operations on graphic elements such as images before applying filter effects to the web page, such as blurring, balancing contrast or brightness, color saturation, etc.

You can use CSS3 The filter property applies filter effects to elements, accepting one or more filter functions in the order provided. Example usage is as follows:

filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | sepia() | saturate() | url();

Warning:All versions of Internet Explorer currently do not support CSS3Filter effects. Older versions of IE support non-standard filter properties to create effects such as opacity, but this feature has been deprecated.

Blur effect

Photoshop effects such as Gaussian blur can be applied to elements using the blur() function. This function accepts CSS length values as parameters to define the blur radius. Larger values will produce more blur. If no parameter is provided, the value 0 is used.

img　{
　　　　-webkit-filter: blur(5px);　/*　Chrome,　Safari,　Opera　*/
　　　　filter: blur(5px);
}

—O resultado do exemplo acima é mostrado a seguir:

Set the image brightness

The brightness() function can be used to set the brightness of the image. A value of 0% will create a completely black image. And the value100% ou1Keep the image unchanged. Other values are linear multipliers of the effect.

You can also set the brightness to be higher than100%, which can make the image brighter. If the quantity parameter is missing, then use the value1. Negative values are not allowed.

img.bright　{
　　　　-webkit-filter: brightness(200%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter: brightness(200%);
}
img.dark　{
　　　　-webkit-filter: brightness(50%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter: brightness(50%);
}

—O resultado do exemplo acima é mostrado a seguir:

Adjust the image contrast

The contrast() function is used to adjust the contrast of the image. A value of 0% will create a completely black image. And the value100% ou1keep the image unchanged. It also allows values greater than100% value, thus providing a result with low contrast. If the quantity parameter is missing or omitted,1then use the value.

img.bright　{
　　　　-webkit-filter: contrast(200%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter: contrast(200%);
}
img.dim　{
　　　　-webkit-filter: contrast(50%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter: contrast(50%);
}

—O resultado do exemplo acima é mostrado a seguir:

para adicionar sombra à imagem

Pode usar a drop-A função shadow() aplica efeitos de sombra em imagens como o Photoshop. Este efeito é semelhante aobox-shadowAtributos.

img　{
　　　　-webkit-filter: drop-shadow(4px　4px　10px laranja);　/*　Chrome,　Safari,　Opera　*/
　　　　filter: drop-shadow(4px　4px　10px laranja);
}

—O resultado do exemplo acima é mostrado a seguir:

Converter a imagem para tons de cinza

Pode usar a função grayscale() para converter a imagem para tons de cinza. O valor100% é completamente em tons de cinza. O valor 0% mantém a imagem inalterada. O valor de 0% a100% é o multiplicador linear do efeito. Se o parâmetro 'quantity' estiver ausente, o valor 0 é usado.

img.complete-gray　{
　　　　-webkit-filter: grayscale(100%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter: grayscale(100%);
}
img.partial-gray　{
　　　　-webkit-filter: grayscale(50%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter: grayscale(50%);
}

—O resultado do exemplo acima é mostrado a seguir:

Aplicar rotação de tom na imagem

Este tom-A função rotate() aplica rotação de tom na imagem. Os parâmetros passados definem o número de graus ao redor do anel de cores da amostra da imagem. O valor 0deg mantém a imagem inalterada. Se o parâmetro angle estiver ausente39; ' Parâmetro, 0deg usa o valor. Não há valor máximo, o efeito da valor acima360deg voltar. O valor padrão para o parâmetro é 0deg. Não há valor máximo, o efeito da valor acima

img.hue-normal　{
　　　　-webkit-filter: hue-rotate(150deg);　/*　Chrome,　Safari,　Opera　*/
　　　　filter: hue-rotate(150deg);
}
img.hue-wrap　{
　　　　-webkit-filter: hue-rotate(480deg);　/*　Chrome,　Safari,　Opera　*/
　　　　filter: hue-rotate(480deg);
}

—O resultado do exemplo acima é mostrado a seguir:

Efeito de inversão

Pode usar a função invert() para aplicar efeitos de inversão em imagens, como no Photoshop. 100% ou1O valor é completamente invertido. O valor 0% mantém a entrada inalterada. O valor de 0% a10O valor entre 0% é o multiplicador linear do efeito. Se o parâmetro 'amount' estiver ausente, o valor 0 é usado. Não são permitidos valores negativos.

img.partially-inverted　{
　　　　-webkit-filter: invert(80%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter: invert(80%);
}
img.fully-inverted　{
　　　　-webkit-filter: invert(100%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter: invert(100%);
}

—O resultado do exemplo acima é mostrado a seguir:

Aplicar opacidade à imagem

A função opacity() pode ser usada para adicionar transparência à imagem. O valor 0% é completamente transparente. O valor100% ou1Manter a imagem inalterada. O valor 0% é completamente transparente e100% é o multiplicador linear do efeito. Se o ' amount'parâmetro, use o valor1。Esta função é semelhante àopacityAtributos.

img　{
　　　　-webkit-filter: opacity(80%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter: opacity(80%);
}

—O resultado do exemplo acima é mostrado a seguir:

Aplicar efeito castanho escuro na imagem

A função sepia() converte a imagem para o efeito sepia.100% ou1é completamente preto e marrom. O valor 0% mantém a imagem inalterada. Entre os valores 0% e100% é o multiplicador linear do efeito. Se o ' amount'parâmetro, use o valor 0.

img.complete-sepia　{
　　　　-webkit-filter:　sepia(100%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　sepia(100%);
}
img.partial-sepia　{
　　　　-webkit-filter:　sepia(30%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　sepia(30%);
}

—O resultado do exemplo acima é mostrado a seguir:

Ajustar a saturação da imagem

A função saturate() pode ser usada para ajustar a saturação da imagem. O valor 0% é completamente desaturado. O valor100% mantém a imagem inalterada. Outros valores são multiplicadores lineares do efeito. Também permite valores acima100%, fornecendo um resultado super-saturado. Se o 'amount 'parâmetro, use o valor1。

img.un-saturated　{
　　　　-webkit-filter:　saturate(0%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　saturate(0%);
}
img.super-saturated　{
　　　　-webkit-filter:　saturate(200%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　saturate(200%);
}

—O resultado do exemplo acima é mostrado a seguir: