Learn notes in CSS with filter filter

1. CSS static filter style (filter) (only IE4.0 supported)
How to use CSS static filter styles: {filter:filtername (parameters1, Parameters2, ...)}

Filter style brief description support parameters
Alpha sets the opacity of the picture or text opacity, finishopacity, style, StartX, Starty, Finishx, finishy, add, direction, strength
Blur creates a motion blur effect in the specified direction and position add, direction, strength
Chroma transparent processing of selected colors color
DropShadow produces shadow color, OFFX, Offy, positive in the specified direction and position
Fliph flips the object in a horizontal direction
FLIPV flips an object in a vertical direction
Glow Glows color around objects, strength
Gray handles the object in grayscale
Invert Invert object color
Light simulates the illumination of an object
Mask creates mask color on object
Shadow shadow color along object edges, direction
Wave creates a sine wave shape add, freq, lightstrength, phase, strength in vertical direction
Xray change the object color depth and draw black and white images

The above is the entire contents of the static filter, it is important to note that CSS is case-sensitive!
2. CSS Live Filters
Dynamic filters can add a moving fade, image conversion effect to the page, which can be divided into two blend (blend) and reveal (display), which can make the object fade away or appear, the latter provides 24 image conversion effects. The call to the dynamic filter removes the filter type, parameters, etc., as defined in the static filter, and uses the scripting language to control its state.
First, before you start a dynamic effect, you need to equip (Apply), then play the dynamic effect, and in the dynamic effect can also interrupt the dynamic effect (Stop), the above can be implemented in the following way:
The object name. Filters (filter value). Apply ()
The object name. Filters (filter value). Play ()
The object name. Filters (filter value). Stop ()
The filter state can be judged by "object name. Filters (filter value). Status", this value is 0 o'clock, indicating that the filter is not executed, which is 1 o'clock, that the filter is complete and that the filter is in execution at 2.
When you define a filter, as mentioned above, you can have a blend ("Filter:blendtrans (duration= Time Value)", duration represents the time, in seconds), and the Display ("Filter:revealtrans ( duration= time value, transition= transition type) ", the transition type is a value from 0-23) two kinds.

Filters have not yet been formally recognized by the consortium. Filters are only part of Microsoft Internet Explorer and cannot be used for Netscape browsers. Organizations that have established standards are being discussed in this regard, but no final conclusions have been reached. In my opinion, filters are a very interesting and essential part of making wonderful visual effects. Filters can save bandwidth, and you can create amazing
The visual design uses the text format without having to first make a large text bitmap 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. There are times when you have to consider making the same effect in a traditional way, and of course you have to continue to plug large GIF files into the web.
Silence... Silence...


CSS Filter Filter detailed
Syntax: style= "Filter:filtername (Fparameter1, fparameter2 ...)"
(FilterName is the filter's name, Fparameter1, Fparameter2, etc. are the parameters of the filter)

Filter Description:
Alpha: Set the transparency level
Blur: Create a high-speed move effect, which is a blur effect
Chroma: Making special color transparent
DropShadow: Creating a fixed shadow for an object
Fliph: Creating a horizontally mirrored picture
FLIPV: Creating a vertical mirror image
Glow: Gaguang Outside the edges of nearby objects
Gray: Grayscale the picture
Invert: Inverse color
Light: Creating lights on an object
Mask: Creating a transparent mask on an object
Shadow: Create Offset fixed Shadow
Wave: Ripple Effect
Xray: Makes an object look like an X-ray

1. Filter: Alpha
Syntax: style= "Filter:alpha (opacity=opacity, Finishopacity=finishopacity,style=style, Startx=startx,starty=starty, Finishx=finishx,finishy=finishy) "
Description
Opacity: The starting value, the value is 0~100, 0 is transparent, and 100 is the original.
Finishopacity: Target value.
Style:1 or 2 or 3
StartX: Any value
Starty: Any value
Example: Filter:alpha (opacity= "0", finishopacity= "," style= "2")
2. Filter: Blur
Syntax: style= "filter:blur (add = Add, Direction = Direction, strength = strength)"
Description
ADD: typically 1, or 0.
Direction: Angle, 0~315度, step is 45 degrees.
Strength: The effect increases the value, generally 5 can.
Example: Filter:blur (add= "1", direction= ", strength=" 5 ")
3. Filter: Chroma
Syntax: style= "filter:chroma (color = color)"
Description: Color: #rrggbb格式, any.
Example: Filter:chroma (color= "#FFFFFF")
4. Filter: DropShadow
Syntax: style= "Filter:dropshadow (Color=color, OFFX=OFFX, Offy=offy, positive=positive)"
Description: Color: #rrggbb格式, any.
Offx:x axis deviation value.
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)"
Description
Color: Glow Color.
Strength: Strength (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)
Description
Color: #rrggbb格式.
Direction: Angle, 0-315 degrees, step 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: typically 1, or 0.
Freq: deform value.
Lightstrength: Percent of deform.
Phase: Percentage of angular distortion.
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