CSS filter learning notes, CSS filter learning notes

CSS filter learning notes, CSS filter learning notes

1. CSS static filter style (filter) (only supported by IE4.0 or later)
How to Use CSS static filter styles: {filter: filtername (parameters1, parameters2 ,...)}

Filter style Brief description of supported Parameters
Alpha sets the opacity of an image or text, opacity, finishOpacity, style, startX, startY, finishX, finishY, add, ction, strength
Blur produces dynamic blur effects in the specified direction and position: add, direction, strength
Chroma transparently processes the selected color.
DropShadow generates shadows such as color, offX, offY, and positive in the specified direction and position.
FlipH flipped objects horizontally
FlipV flipped objects along the vertical direction
Glow emits color and strength light around the object.
Gray processes the object in grayscale Mode
Invert reversed object color
Light simulates illumination of Objects
Mask generates mask color for the object
Shadow shadows along the edge of the object. color and ction
Wave generates sine waves such as add, freq, lightStrength, phase, and strength in the vertical direction.
Xray changes the color depth of an object and creates a black/white image.

The above is all the content of the static filter. It should be noted that CSS is case sensitive!
2. CSS Dynamic Filter
A dynamic filter can add a moving fade-in and fade-out effect and an image conversion effect to a page. It can be divided into two types: blend and reveal. The former can gradually disappear or appear an object, the latter provides 24 types of image conversion effects. To call a dynamic filter, remove the filter type and parameters that need to be defined in the static filter, and control its status using the script language.
First, you need to Apply the dynamic effect before starting a dynamic effect, and then Play the dynamic effect. In the dynamic effect, you can also Stop the dynamic effect ), the above can be implemented using the following method:
Object Name. filters (filter value). Apply ()
Object Name. filters (filter value). Play ()
Object Name. filters (filter value). Stop ()
You can use the object name to determine the filter status. filters (filter value ). status. If the value is 0, the filter is not executed. If the value is 1, the filter is completed. If the value is 2, the filter is in progress.
When defining a filter, as mentioned above, there can be a mixture ("filter: blendTrans (duration = Time Value)", duration indicates the time required for filter execution, in seconds) and display ("filter: revealTrans (duration = Time Value, transition = transition type)", transition type is a value from 0 to 23.

Filters are not officially recognized by W3C. Filters are only part of Microsoft Internet Explorer and cannot be used in Netscape browsers. Organizations that set standards are currently under discussion, but no final conclusion has been reached. In my opinion, filters are a very interesting and essential part of creating brilliant visual effects. Filters save bandwidth, and you can create amazing filters.
The text format is used for visual design, instead of creating a large text bitmap to achieve the same effect.
However, since these features have not yet become an official part of HTML, not all browsers can see these features. Sometimes, you have to consider making the same effect in a traditional way. Of course, you have to continue to plug a huge GIF file into the webpage.
Silence... silence...


CSS filter
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

Can Multiple Static filters be used in CSS?

--Do not use semicolons '''. Just add a space '''
For example:
Filter: alpha (opacity = 30) blur (amount = 10)

Question html: the filter attribute cannot be found in css.

Filters are not integrated in dreamweaver, so you cannot think of them in style!
You must find the relevant information on your own and then click it on your own!
In addition, filters are not compatible with all browsers, so you need to pay extra attention when using them!