Filter study notes in CSS_html/css_WEB-ITnose

1． CSS static filter style (filter) (only supported by IE4.0 or above)
How to use CSS static filter style: { filter : filtername(parameters1, parameters2, ...) }

Filter style Brief description of supported parameters
alpha Set the opacity of images or text opacity, finishOpacity, style, startX, startY, finishX, finishY, add, direction, strength
blur Produce a dynamic blur effect in the specified direction and position add , direction, strength
chroma Make the selected color transparent color
dropShadow Generate a shadow in the specified direction and position color, offX, offY, positive
flipH Flip the object in the horizontal direction
flipV Flip the object in the vertical direction
glow Glow color and strength around the object
gray Process the object in grayscale
invert Reverse the color of the object
light Simulate lighting on the object
mask Generate the object Mask color
shadow generates shadows along the edge of the object color, direction
wave generates sine waveforms in the vertical direction add, freq, lightStrength, phase, strength
xray changes the color depth of the object and draws a black and white image

The above is the entire content of static filters. Please note that CSS is case-sensitive!
2. CSS dynamic filter
Dynamic filter can add moving fade in and fade out and image transformation effects to the page. It can be divided into two types: blend (mixing) and reveal (display). The former can make the object gradually disappear or appear, and the latter The author provides 24 image transformation effects. For the call of dynamic filters, in addition to the filter type, parameters, etc. that need to be defined in static filters, scripting language is also used to control its status.
First of all, before starting a dynamic effect, you need to apply (Apply) and then play (Play) the dynamic effect. You can also interrupt the dynamic effect (Stop) while the dynamic effect is in progress. The above can be achieved by the following method:
　Object name.filters(filter value).Apply()
　Object name.filters(filter value).Play()
　Object name.filters(filter value).Stop()
Judging the filter status can be judged by "object name.filters (filter value).status". When the value is 0, it means that the filter has not been executed. When it is 1, it means that the filter has been completed. When it is 2, it means that the filter has been completed. Filter is executing.
When defining a filter, as mentioned above, you can have blending ("filter:blendTrans(duration=time value)", duration represents the time required for filter execution, in seconds) and display ("filter: revealTrans(duration=time value, transition=transition type)", the transition type is a value from 0 to 23).

Filters are not yet officially recognized by W3C. Filters are only part of Microsoft's IE browser and cannot be used in Netscape browsers. Organizations that formulate relevant standards are discussing this, but have not yet reached a final conclusion. In my opinion, filters are a really fun and essential part of creating great visuals. Filters save bandwidth and allow you to use text formatting when creating fantastic
visual designs without having to create huge text bitmaps first to achieve the same effect.
But since these features have not yet become a formal part of HTML, not all browsers can see these features. Sometimes, you have to consider creating the same effect the traditional way, and of course, you have to continue stuffing huge GIF files into web pages.
Silence...Silence...


Detailed explanation of CSS filter filter
Syntax: STYLE="filter:filtername(fparameter1, fparameter2...)"
（Filtername is the name of the filter, fparameter1, fparameter2, etc. are the parameters of the filter)

Filter description:
alpha: Set the transparency level
blur: Create a high-speed movement effect, that is, a blur effect
chroma: Make a special color transparent
DropShadow: Create a fixed shadow of the object
FlipH: Create a horizontal mirror image
FlipV: Create a vertical mirror image
glow: Add glow to the outside of nearby objects
gray: Grayscale the image
invert: Invert color
light: Create a light source on the object
mask: Create a transparent mask on the object
shadow: Create an offset fixed shadow
wave: ripple effect
Xray: makes the object look like it is illuminated by x-rays

1. Filter: Alpha
Syntax: STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity , Style = style, StartX = start picture.
FinishOpacity: target value.
Style: 1 or 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)"
Explanation:
Add: Generally 1, or 0.
Direction: Angle, 0~315 degrees, step size is 45 degrees.
Strength: The value of effect growth, generally 5 is enough.
Example: filter:Blur(Add="1",Direction="45",Strength="5")
3. Filter: Chroma
Syntax: STYLE="filter:Chroma(Color = color)"
Description: color: #rrggbb format, any.
Example: filter:Chroma(Color="#FFFFFF")
4. Filter: DropShadow
Syntax: STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive =positive)"
Description: Color: #rrggbb format, any.
Offx: X-axis deviation value.
Offy: Y-axis offset 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)"
Description:
Color: Glow 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)
Instructions:
Color: #rrggbb format.
Direction: angle, 0-315 degrees, step size is 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)
Description:
Add: Generally 1, or 0.
Freq: deformation value.
LightStrength: Deformation percentage.
Phase: Angle 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: >