CSS Filter Application Tips

Css| Technique | filter

Friends who often make Web pages must all know CSS, CSS is the abbreviation of cascading style sheet, usually people call it "style sheet" or "cascading style". Its function is very comprehensive, from the text, pictures, paragraphs to the entire Web page has its strengths, today we say that the filter effect in CSS.

When we do the Web page, the image processing is mostly Photoshop and other graphics processing software, in fact, in the CSS with a lot of filters, the rational application of these filters you can also make the above software to make the effect. Let me take a look at the filter application in the CSS from the example below.

Picture atomization

Code:

1. Internal Insert Type

Insert between 〈head〉 and 〈/head〉 :

〈style type = text/css〉 . Fog{filter:alpha (opacity=100,style=2)} 〈/style〉

Then add class= "Fog"to the Picture property code.

Note: Insert code between 〈head〉 and 〈/head〉 fog has one before. "(not including quotes), please be sure not to miss it."

2. Direct Insertion Type

In the Picture property code, add:

Style= "Filter:alpha (opacity=100,style=2)"

The effect is shown in Figure 1.

Figure 1

Features: by using the "alpha" filter of CSS, you can make a picture atomization effect.

extension:"style" parameter: "0" no Progressive, "1" Straight line progressive, "2" circular Progressive, "3" rectangle progressive; the parameter "opacity" is a percentage of opacity.

Picture weathering

Code:

1. Internal Insert Type

Insert between 〈head〉 and 〈/head〉 :

〈style type = text/css〉 . Wind{filter:blur (STRENGTH=10)} 〈/style〉

Then add class= "Wind"to the picture attribute code(note "."). Number).

2. Direct Insertion Type

In the Picture property code, add:

Style= "Filter:blur (strength=10)"

The effect is shown in Figure 2.

Figure 2

Features: by using the CSS blur filter, the picture has a wind-blown blur effect.