Shulou(Shulou.com)06/03 Report--

This article focuses on "how to understand the filter filter in CSS". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to understand the filter filter in CSS.

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 supporting parameters

Alpha sets the opacity of pictures or text opacity, finishOpacity, style, startX, startY, finishX, finishY, add, direction, strength

Blur produces dynamic blur effects in the specified direction and position add, direction, strength

Chroma transparently handles the selected color color

DropShadow generates shadows in the specified direction and position color, offX, offY, positive

FlipH flips objects horizontally

FlipV flips objects vertically

Glow glows color and strength around the object

Gray processes objects in grayscale

Invert reverses object color

Light simulates the lighting of objects

Mask generates mask color for objects

Shadow generates shadows color, direction along the edge of the object

Wave produces sinusoidal waveforms add, freq, lightStrength, phase, strength in the vertical direction.

Xray changes the color depth of the object and draws a black and white image.

That's what the static filter is all about. Note that CSS is case-sensitive!

2.CSS dynamic filter

Dynamic filter can add moving fade in and out, image conversion effect, it can be divided into two kinds of blend (mixed) and reveal (display), the former can make the object gradually disappear or appear, the latter provides 24 kinds of image conversion effect. The call to the dynamic filter removes the filter type, parameters, and so on to be defined in the static filter, and uses a scripting language to control its state.

First of all, before starting a dynamic effect, you need to equip (Apply), then play (Play) the dynamic effect, and you can also interrupt the dynamic effect (Stop) during the dynamic effect. The above can be achieved in the following ways:

Object name .filter (filter value) .Apply ()

Object name .filter (filter value) .Play ()

Object name .filter (filter value) .Stop ()

The state of the filter can be judged by "object name .filter. Status". A value of 0 indicates that the filter has not been executed, 1 indicates that the filter has been completed, and 2 indicates that the filter is in execution.

When defining a filter, as mentioned above, there can be mixing ("filter:blendTrans (duration= time value)", duration represents the time required for the filter to execute, in seconds) and display ("filter:revealTrans (duration= time value, transition= transition type)", the transition type is from 0Mu23).

The filter has not yet been officially recognized by the W3C. Filters are only part of Microsoft's IE browser and cannot be used in Netscape browsers. The organizations that set the relevant standards are discussing this, but have not yet reached a final conclusion. In my opinion, filters are very interesting and an essential part of making wonderful visual effects. Filters can save bandwidth, and you can make wonderful

Visual design uses text formatting without having to create large text bitmaps to achieve the same effect.

However, since these features are not yet an official part of HTML, not all browsers can see these features. Sometimes you have to consider making the same effect in the traditional way, and of course, you have to continue to cram huge GIF files into the web page.

Silence. Silence.

Detailed explanation of CSS filter filter

STYLE= "filter:filtername (fparameter1, fparameter2...)"

(Filtername is the name of the filter, fparameter1, fparameter2, etc. Are the parameters of the filter)

Filter description:

Alpha: setting transparency hierarchy

Blur: create a high-speed movement effect, that is, blur effect

Chroma: make special color transparent

DropShadow: creates a fixed shadow of an object

FlipH: create a horizontal mirror image

FlipV: create a vertical mirror image

Glow: add brilliance to the edges of nearby objects

Gray: graying the picture

Invert: inverse color

Light: creating lights on object

Mask: creating a transparent mask on an object

Shadow: creating offset fixed shadow

Wave: ripple effect

Xray: make the object look as if it were exposed to x-rays

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 is 0,100,0 is transparent and 100 is the original image.

FinishOpacity: target value.

Style:1 or 2 or 3

StartX: any valu

StartY: any valu

Example: filter:Alpha (Opacity= "0", FinishOpacity= "75", Style= "2")

2. Filter: blur

Syntax: STYLE= "filter:Blur (Add = add, Direction = direction, Strength = strength)"

Description:

Add: usually 1, or 0.

Direction: angle, 0,315 degrees, step length is 45 degrees.

Strength: the value of the increase in effect, usually 5.

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

STYLE= "filter:Glow (Color=color, Strength=strength)"

Description:

Color: luminous color.

Strength: strength (0Mel 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 format.

Direction: angle, 0Mel 315 degrees, step length 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: usually 1, or 0.

Freq: deformation value.

LightStrength: percentage of deformation.

Phase: percentage of angular deformation.

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

At this point, I believe you have a deeper understanding of "how to understand the filter filter in CSS". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.