Proficient in Css+div Web page style and layout--use of filters

In the previous blog, the small part of the main simple introduction of the use of CSS, how to make a practical menu, today we continue to summarize the basic knowledge of CSS, today's main simple to introduce the CSS of the use of filters, first of all, small first to introduce a simple filter, we say that the use of filters, first , small to introduce the concept of a simple filter, CSS filter is not a browser plug-in, also does not conform to the CSS standard, two, but Microsoft to enhance the browser function and the specially developed and integrated in the Internet Explorer of the tired function of the collection. Because browser IE has a wide range of use, CSS filters are also popular among designers. The CSS filter is labeled "Filter", which is as simple as other CSS statements, and then we look at a mind map:

Then, the small part along with the above thinking map of the context, in order to briefly introduce, first of all, we look at the alpha channel, we look at the example code and running effect:

alpha channel

<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >
The effect of the operation is as follows:
Analysis of the above code, the second picture with respect to the first picture, has a more intense night effect, we look at the CSS code: here we put Filter:alpha (opacity=20), of course, you can set the different values, to see the effect of the display. We went on to look at the blur blur, and we didn't use Photoshop to create a blurry effect. Let's look at the example code and run the effect:
 Blur Blur
<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >
the effect of the operation is as follows:

Let us analyze the above example, compare two pictures, the second one uses the class= "blur", we see this sentence Filter:progid:DXImageTransform.Microsoft.blur (pixelradius=4, Makeshadow=false); Here we will blur the effect
Pixelradius is set to a different value, you can see different blur effects, and small partners can try it on their own. Let's look at the color filter and let's see the example code and how it works:
 Transparent Color
<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >
The results are as follows:

Analysis of the above example, we clearly see that the tiger Body of the golden color filter, we see this sentence: Filter:chroma (color=ff6800), is to remove the golden yellow. We continue to see Flip flip filter. CSS can be in the context of non-processing pictures, the picture is flipped, see the following example code and the effect of the operation:
Flip  Flipping
<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >
The results are as follows:

Analysis of the above example, here is actually four pictures, the first (upper left corner), the original piece, the second image is horizontal, the third is a vertical image, while the lower right corner of the horizontal and vertical image. Let's take a look at the code: as we can see from the code, the FLIP1 is flipped horizontally, we continue to look at the mask, and Photoshop has a powerful masking function, so let's look at the example code and how it works:
 Matte Cover
<span style= "FONT-SIZE:18PX;" >


the effect of the operation is as follows:

Analysis of the above example, we see the second picture, a bit like the effect of shadow change, we look at the CSS code, our code, the first picture did not do the processing, the second picture was mask processing. We look at this phrase: Filter:mask (color=red); Here is the color that shows the mask that needs to be masked. We continue to see the best filter, wave filter, we often use Photoshop to achieve the wave effect, CSS can also, we look at the example code and the effect of running:
<span style= "FONT-SIZE:18PX;" >
The results are as follows:

Analyzing the above example, here are three paragraphs of text, each with a wave effect:
(add=0,freq=2,lightstrength=70,phase=75,strength=4), the frequency is 2, the final degree is 4, finally we look at a comprehensive example, three filters with the use of what kind of magic effect, The example code and the run effect are as follows:
<span style= "FONT-SIZE:18PX;" >
The results are as follows:
Small Series of words: This blog, small part of the main simple introduction of the CSS in the relevant knowledge of the filter, respectively, the alpha channel, Blur fuzzy, transparent color and so on, the last small example, three filters at the same time, you small partners if you want to make the effect of more beautiful and more colorful, Small or recommended to use Photoshop, after all, these small examples in each browser display effect is different, BS study, not to be continued ...
Proficient in Css+div Web page style and layout--use of filters