Div + CSS advanced: CSS Filter tutorial

 

What is a CSS Filter?

CSS Filter is an extension subset of conventional CSS. It can make the application objects (text, images, HTML elements...) produce blur, transparency, edge light, and other effects similar to those in Photoshop. The rational use of the CSS Filter can reduce the number of images used by the web page to reduce the size of the web page. You can also directly modify the filter parameters in CSS or use js to dynamically modify the CSS Filter parameters, to quickly update the page. CSS Filter enriches the web page as a multimedia display mode that provides users with rich information content.
 

How to Use CSS Filters

Filter: filtername (parameters): filter: Filter Name (parameter)

Filters for CSS
1. Alpha-set transparent Layers
2. Blur-create a high-speed mobile effect, that is, blur effect
3. chroma-make special colors transparent
4. dropshadow-create a fixed shadow of an object
5. fliph-create a horizontal Image
6. flipv-create a vertical image
7. Glow-shining outside the edge of the nearby object
8. Gray-Grayscale Images
9. Invert-reversed
10. Light-create a light source on an object
11. Mask-create a transparent mask on the object
12. Shadow-create an offset fixed shadow
13. Wave-Ripple Effect
14. Xray-make the object look like X-ray

 

How to Apply Filters

1. Define CSS first, and then use pre-defined CSS on the objects required on the page. In fact, the syntax of these filters has been set in the CSS Settings dialog box in advance, we only need to fill in the appropriate specific parameters:
2. Write CSS Filter directly on HTML control elements that support CSS Filter EffectsCode.

Filter syntax

Alpha filter: When you hear this name, you may think of flash and Photoshop. A little good, they basically play a similar role, that is, to mix a target element with the background. You can specify a value to control the degree of mixing. In general, this "mixed with the background" is the transparency of an element.
Syntax: Style = "filter: alpha (opacity = opacity, finishopacity = finishopacity, style = style, startx = startx, starty = starty, finishx = finishx, finishy = finishy )"
Note:
Opacity: start value. value range: 0 ~ 100, 0 is transparent, and 100 is the source image.
Finishopacity: target value.
Style: 1, 2, or 3
Startx: any value
Starty: any value
Example: filter: alpha (opacity = "0", finishopacity = "75", style = "2 ")

For more information about how to use the filter, see the example of the CSS Filter Application-Alpha filter.

 

Blur filter: It is one of CSS filters. loading it to text can produce the effect of three-dimensional characters, which will bring great convenience for you to use three-dimensional words as titles on the webpage, it also reduces the size of your web page. By loading the blur filter to an image, you can increase the color of your image. Even though you can use image processing software to achieve the same effect, but it is much easier to use the blur filter.
Syntax: Style = "filter: blur (add = add, direction = direction, strength = strength )"
Note:
Add: generally 1, or 0.
Direction: angle, 0 ~ 315 degrees. The step size is 45 degrees.
Strength: the number of results that increase, generally 5.
Example: filter: blur (add = "1", direction = "45", strength = "5 ")
For more information about how to use the filter, see the example of the CSS Filter Application-blur filter.

Chroma Filter: Set the color concentration of the object.
Syntax: Style = "filter: chroma (color = color )"
Note: Color: # rrggbb format, any.
Example: filter: chroma (color = "# ffffff ")

For more information about how to use the filter, see the example of the CSS Filter Application-chroma filter.

Dropshadow Filter: As the name implies, the shadow effect of the object is added. It looks like the original object leaves the page, and the projection of the object is displayed on the page. The working principle is to create an offset and add the color.
Syntax: Style = "filter: dropshadow (color = color, offx = offx, offy = offy, positive = positive )"
Note: Color: # rrggbb format, any.
Offx: returns the offset of the X axis.
Offy: Y-axis deviation value.
Positive: 1 or 0.
Example: filter: dropshadow (color = "# 6699cc", offx = "5", offy = "5", positive = "1 ")
 

Fliph Filter: Horizontal reversal
Syntax: Style = "filter: fliph"
Example: filter: fliph
Flipv filter: vertical inversion of filters
Syntax: Style = "filter: flipv"
Example: filter: flipv

Glow filter: After you use the "Glow" attribute for an object, the edge of the object will produce a similar luminous effect.
Syntax: Style = "filter: glow (color = color, strength = strength )"
Note:
Color: Luminous color.
Strength: intensity (0-100)
Example: filter: glow (color = "# 6699cc", strength = "5 ")

Gray Filter: Use the gray filter to convert an image to a grayscale image.
Syntax: Style = "filter: Gray"
Example: filter: Gray

Invert Filter: As the name suggests, invert the object
Syntax: Style = "filter: invert"
Example: filter: Invert

Mask filter: You can use the "Mask" attribute to create a film covering the surface of the object. The effect is the same as watching an object with colored glasses.
Syntax: Style = "filter: mask (color = color )"
Example: filter: mask (color = "# ffffe0 ")

Shadow Filter: The "shadow" attribute can be used to establish the object projection in the specified direction. color is the projection color, and direction is the projection direction. Where 0 degrees indicates vertical up, and then every 45 degrees is a unit. The default value is 270 degrees to the left.
Syntax: filter: Shadow (color = color, direction = direction)
Note:
Color: # rrggbb format.
Direction: angle, 0-degrees, step size: 45 degrees.
Example: filter: Shadow (color = "# 6699cc", direction = "135 ")

Wave Filter: Depending on its name, you may be able to think of its effect. as you think, its function is to distort the object according to the vertical waveform style, thus generating a special effect.
Syntax: filter: Wave (add = add, freq = freq, lightstrength = strength, phase = phase, strength = strength)
Note:
Add: generally 1, or 0.
Freq: deformation value.
Lightstrength: Deformation percentage.
Phase: angular deformation percentage.
Strength: deformation strength.
Example: filter: Wave (add = "0", phase = "4", freq = "5", lightstrength = "5", strength = "2 ")

Xray Filter: Only display the outline of the object
Syntax: Style = "filter: Xray"
Example: filter: Xray