The basic tutorial of using CSS Mask filter _

The Mask filter can make a rectangular matte for an HTML component object on a Web page, about what is a matte? If you've ever used a mask in flash, you'll know, that's the way it is. In fact, for masks you can also understand that the equivalent of a piece of colored cloth to cover the object, but the content has been dug up. If you don't understand, just look at the picture below and listen to me.

Figure 1 Mask Filter effect 1

The mask filter in the above uses such a deep color, mainly so that you can clearly see the effect. Let's take a look at the parameters of the Mask filter: It has only one parameter color, which is the color value of the matte in #rrggbb format. You just have to choose a suitable color in the DW3 to be OK, such as the Mask filter code above is:. Mask1 {filter:mask (color= #00ff00)}, in the following example you will see, in fact, the color of the filter is not the main, the key is the color of the background.
Below we use the Mask filter to do several effects:
1. Colorful words

Figure 2 Mask Filter Effect 2

How about this effect, it's not bad! Kind of like an image, isn't it? This is the effect of the mask filter. Here is a white filter with the code:. Mask1 {filter:mask (color= #ffffff)}. Colorful text color is actually the color of the background. Its production method is also very simple, is to insert a 1*1 table, the table with a multi-color background, input text in the table, to the cell load a mask filter, do it, not difficult it?!
2. Searchlight animation effect
The following this searchlight effect, use Flash to do all have to spend a little God, unexpectedly with CSS filter but also can make! Because the searchlight effect is dynamic, I can only grab two process pictures to show you, to see the dynamic effect, then you do according to my speech to do one or go to my home (http:/fym888.go.163.com) look.

Figure 3 Searchlight Animation effect 1

Figure 4 Searchlight Animation effect 2

Here's how to make it:
This effect is a bit more complicated than the example above, but it's just a few more mouse clicks.
1, insert a layer, I call it "parent layer", the layer is used to display the content (text or pictures). Then insert a layer on the layer, I call it a child layer, it is mainly used to produce a matte effect.
2, set the display window on the parent layer's properties panel, that is, set the layer's "Clip" property, in which the relative coordinates are used, where: L, T is the upper-left coordinate; R, B is the lower-right coordinate. Subsequent sub-layers will only appear in the window you set. The Set layer properties parameter panel looks like this:

Figure 5 Layer Properties panel

My parent layer here is "Layer4", where I use the entire parent layer as the display window, which is visible when the child is moving to the parent layer and not visible outside the parent layer.
3, we insert a background transparent circular picture in the sub-layer, here with the purpose of the circular graph is mainly the searchlight light projection is a circular, the other round the image part must be transparent, otherwise see will be a rectangular box in the move. Then, on the child layer, load a mask filter with the same color as the parent background color, and pull the layer up so that it can completely overwrite the contents of the parent layer, so that the content on the parent layer in the browser can only be seen by the part of the circle picture, which is exactly what we want.
4, of course, to produce the effect of the searchlight, it is necessary to make that circular area moving up, this will be used with Dreamweaver time line (Timeline) function. In the DW3 first drag to the child layer, so that the picture on it just covers the parent content of the header, press "Ctrl+f9", bring up the timeline panel, the layer dragged to the timeline panel, drag the last frame to 100 frames, and then insert a keyframe in frame 50th, and the image of the layer with the parent content of the tail coincident, Choose loop (loop play) and Auto (autoplay) on the timeline panel, all OK.
A complex animation completed, press F12 to see, is not a bit cool?!

