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, and you can perform visual effects operations on graphic elements such as images before applying filter effects to web pages, 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. An 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);
}

—The output of the above example is as follows:

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. While the value100% or1to keep 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%);
}

—The output of the above example is as follows:

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. While the value100% or1keep 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%);
}

—The output of the above example is as follows:

to add a shadow to the image

You can use the drop-The shadow() function applies a shadow effect to images like Photoshop. This feature is similar to thatbox-shadowproperty.

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

—The output of the above example is as follows:

Convert the image to grayscale

Use this grayscale() function to convert the image to grayscale. The value100% is completely grayscale. A value of 0% keeps the image unchanged. Between 0% and100% is the effect linear multiplier. If the 'quantity' parameter is missing, the value 0 is used.

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%);
}

—The output of the above example is as follows:

Apply a hue rotation to the image

This hue-The rotate() function applies a hue rotation to the image. The parameters passed define the degrees around the hue ring of the image sample to be adjusted. The value 0deg keeps the image unchanged. If angle is missing39;39; parameter, 0deg uses the value. There is no maximum value, the effect of the above value will360deg wrap.

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);
}

—The output of the above example is as follows:

Reverse effect

The invert() function can be used to apply a reverse effect to the image like Photoshop. 100% or1The value is completely inverted. A value of 0% will keep the input unchanged. Between 0% and10The value between 0% is the linear multiplier of the effect. If the 'amount' parameter is missing, the value 0 is used. Negative values are not allowed.

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%);
}

—The output of the above example is as follows:

Apply opacity to the image

The opacity() function can be used to add transparency to the image. The value 0% is completely transparent. The value100% or1to keep the image unchanged. The value 0% and100% is the effect linear multiplier. If the & is missing,39; amount'parameter, then use the value1. This feature is similar to thatopacityproperty.

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

—The output of the above example is as follows:

Apply a brownish effect to the image

The sepia() function converts the image to sepia. of the value100% or1is completely sepia. A value of 0% retains the image unchanged. Between the values 0% and100% is the effect linear multiplier. If the & is missing,39; amount'parameter, then use the value 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%);
}

—The output of the above example is as follows:

Adjust the saturation of the image

The saturate() function can be used to adjust the saturation of the image. A value of 0% is completely unsaturated. A value100% retains the image unchanged. Other values are the linear multiplier of the effect. It also allows values to exceed100%, thus providing an oversaturated result. If the & is missing,39;amount 'parameter, then use the value1。

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%);
}

—The output of the above example is as follows: