CSS Filter reference _ CSS/HTML

CSS filter reference Syntax: STYLE = "filter: filtername (fparameter1, fparameter2 ...)"
(Filtername indicates the Filter Name. fparameter1 and fparameter2 are filter parameters)
Script Syntax: HTMLElement. filters. filterName. fParameter = value;

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