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

This article mainly explains the concept and usage of CSS filter. 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 the concept and usage of CSS filter.

What is the CSS filter?

The CSS filter is an extended subset of regular CSS that allows you to apply objects (text, pictures, HTML elements.) Produce effects similar to those in PHOTOSHOP, such as blur, transparency, edge glow, etc. Reasonable use of CSS filter can reduce the number of pictures used by the web page, thus reducing the page size; you can also modify the parameters of the filter in CSS directly or dynamically modify the parameters of CSS filter with JS, so as to achieve the effect of quickly updating the page. CSS filter enriches the presentation of web pages as multimedia to provide users with rich and colorful information content.

How to use CSS filter

Filter:filtername (parameters) is filter: filter name (parameter)

How to apply CSS filter

1. Define the CSS first, and then use the pre-defined CSS on the objects you need on the page. In fact, the syntax of these filters has been set in advance in the CSS settings dialog box. You only need to enter the appropriate specific parameters:

2. Write CSSfilter code directly on the HTML control elements that support CSS filter effects.

Syntax of the CSS filter

Alpha filter:

When you hear this name, you may think that it is in Flash and seems to have been seen in Photoshop. Exactly, their function is basically similar, which is to mix a target element with the background. You can specify a value to control the degree of mixing. This kind of "mixing with background" is popularly said to be the transparency of an element.

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

For more information on application examples, please see: CSS filter (Filter) Collection of Application examples-alpha filter

Blur filter:

Is one of the filters of CSS, loading it into the text can produce the effect of three-dimensional words, which will bring great convenience for you to use three-dimensional words as titles on the web page, and also reduce the weight for your web pages; loading the Blur filter into the pictures can add a lot of color to your pictures, although the same effect can be achieved with image processing software, but using the Blur filter can be much more convenient.

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

For more information on application examples, please see: CSS filter (Filter) Collection of Application examples-blur filter

Chroma filter:

Set the color concentration of the object

Syntax: STYLE= "filter:Chroma (Color=color)"

Description: color:#rrggbb format, any.

Example:

Filter:Chroma (Color= "# FFFFFF")

For more information on application examples, please see: CSS filter (Filter) Collection of Application examples-Chroma filter

DropShadow filter:

As the name implies, it adds the shadow effect of the object. It actually looks like the original object left the page, and then a projection of that object is displayed on the page. It works by creating an offset and then adding color.

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

FlipH filter:

Achieve horizontal reversal

Syntax: STYLE= filter:FlipH

Example: filter:FlipH

FlipV filter:

Filter to achieve vertical reversal

Syntax: STYLE= filter:FlipV

Example: filter:FlipV.

Glow filter:

When you use the "glow" property on an object, the edges of the object produce a glowing effect

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

Description:

Color: luminous color.

Strength: strength (0Mel 100)

Example:

Filter:Glow (Color= "# 6699CC", Strength= "5")

Gray filter:

You can turn a picture into a grayscale image using the Gray filter

Syntax: STYLE= filter:Gray

Example: filter:Gray

Invert filter:

As the name implies, invert the object

Syntax: STYLE= filter:Invert

Example: filter:Invert

Mask filter:

Using the "MASK" attribute, you can create a film that covers the surface of an object, which is like looking at an object with tinted glasses.

Syntax: STYLE= "filter:Mask (Color=color)"

Example:

Filter:Mask (Color= "# FFFFE0")

Shadow filter:

Use the "Shadow" attribute to establish the projection of the object in the specified direction, COLOR is the projection color, DIRECTION is to set the direction of the projection. Where 0 degrees represents vertical upward, and then every 45 degrees is a unit. Its default value is 270 degrees to the left.

Syntax: filter:Shadow (Color=color,Direction=direction)

Description:

Color:#rrggbb format.

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

Example:

Filter:Shadow (Color= "# 6699CC", Direction= "135")

Wave filter:

You may be able to think of its effect by looking at its name, and as you might think, its function is to distort the object according to the vertical waveform style to produce a special effect.

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

Xray filter:

Show only the outline of the object

Syntax: STYLE= filter:Xray

Example: filter:Xray

At this point, I believe you have a deeper understanding of the concept and use of CSS filter. 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.