CSS filters common filter attributes and statements

Syntax: Style = "filter: filtername (fparameter1, fparameter2 ...)"

 

(Filtername indicates the Filter Name. fparameter1 and fparameter2 are filter parameters)

Filter description:

ALPHA: sets the transparency level.

Blur: Creates high-speed mobile effects, that is, blur effects.

Chroma: Make special colors transparent

Dropshadow: Creates a fixed shadow of an object.

Fliph: Create a horizontal Image

Flipv: Create a vertical image

Glow: glow outside the edge of a nearby object

Gray: Grayscale Images

Invert: reversed

Light: Creates a light source on an object.

Mask: create a transparent mask on the object

Shadow: creates an offset fixed shadow.

Wave: Ripple Effect

Xray: make the object look like X-ray

1. filter: Alpha

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 ")

2. filter: blur

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 ")

3. filter: chroma

Syntax: Style = "filter: chroma (color = color )"

Note: Color: # rrggbb format, any.

Example: filter: chroma (color = "# ffffff ")

4. filter: dropshadow

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 ")

5. filter: fliph

Syntax: Style = "filter: fliph"

Example: filter: fliph

6. filter: flipv

Syntax: Style = "filter: flipv"

Example: filter: flipv

7. filter: glow

Syntax: Style = "filter: glow (color = color, strength = strength )"

Note:

Color: Luminous color.

Strength: intensity (0-100)

Example: filter: glow (color = "# 6699cc", strength = "5 ")

8. filter: Gray

Syntax: Style = "filter: Gray"

Example: filter: Gray

9. filter: Invert

Syntax: Style = "filter: invert"

Example: filter: Invert

10. filter: mask

Syntax: Style = "filter: mask (color = color )"

Example: filter: mask (color = "# ffffe0 ")

11. filter: Shadow

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 ")

12. filter: Wave

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 ")

13. filter: Xray

Syntax: Style = "filter: Xray"

Example: filter: Xray

14. color change

Syntax:

Filter: progid: DXImageTransform. Microsoft. gradient (gradienttype = 0, startcolorstr = '# b5ccfa', endcolorstr = '# b5ccfa ');