CSS filters can achieve a variety of visual effects. 1. Use grayscale() to convert the picture into a grayscale diagram, which is often used for interactive state switching; 2. blur() realizes Gaussian blur, suitable for background blur and other scenarios; 3. Adjust the brightness, contrast and saturation through brightness(), contrast(), and saturate() respectively, and use it in combination to create a diverse tone; 4. Multiple filters can be used by superimposing spaces, but attention should be paid to the order and performance impact. These filters are simple and efficient, suitable for enhancing page expression.

CSS filters are a very practical tool that can directly realize some visual effects on web pages, such as blur, contrast adjustment, grayscale display, etc. They are not only simple and easy to use, but also have good compatibility, making them suitable for image processing or page special effects.

The following are the more commonly used effects and usages in actual development:

Gray or black and white style

Sometimes in order to unify the visual style, or highlight a certain state (such as a disabled state), the image needs to be turned into a gray tone. At this time, you can use grayscale() filter.

 img {
  filter: grayscale(100%);
}

• The parameters are percentages, 100% means complete grayscale, 0% means the original image.
• This method is often used for mouse hover switching effects, such as:

 img:hover {
  filter: grayscale(0%);
}

In this way, the picture is restored to color when the user moves it up, which has a sense of interaction, and there is no need to prepare two pictures.

Gaussian Blur

Blur effect is also a common requirement, such as pop-up background blur, picture preview blur, etc.

 .blur-effect {
  filter: blur(5px);
}

• The parameter is the pixel value, and the larger the number, the blurry it becomes.
• Note: Too large blur will affect performance, especially when using dynamic blur for large images.
• A common approach is to use blur in transition animations, such as adding a point of blur before fading, to make the visual more natural.

Adjust brightness, contrast, saturation

These filters can be used alone or combined to adjust the overall tone of the image:

 img {
  filter: brightness(80%) contrast(120%) saturate(150%);
}

• brightness() controls brightness, 100% is the original brightness, less than 100% dimming.
• contrast() controls contrast, 100% is unchanged, the higher the value, the stronger the contrast.
• saturate() controls the color saturation, 100% is the original image, the higher the value, the brighter the color.

These parameters can be flexibly matched according to design needs, such as displaying a picture in "night mode" to appropriately reduce the brightness and contrast.

Multiple filters are superimposed

CSS allows you to write multiple filter functions in a filter property, just separate them with spaces:

 .filter-combo {
  filter: brightness(90%) sepia(30%) blur(2px);
}

There is a need to pay attention to the order issue: Although order does not particularly significantly affect the final result in most cases, there may be interactions between certain filters. It is recommended to arrange it in logical order, such as color processing first and then blurring.

In addition, using multiple filters will increase the rendering burden, especially when used in large quantities of elements or animation effects, remember to test performance.

In general, CSS filters are a lightweight and effective visual enhancement method that can make good visual changes without relying on additional resources. Mastering a few commonly used functions and combining a little transition or interaction can improve the expressiveness of many pages.

The above is the detailed content of Using CSS filters for visual effects. For more information, please follow other related articles on the PHP Chinese website!