Smart Use CSS Mask Filter _ Basic Tutorial

The Mask filter can make a rectangular mask of HTML component objects on a Web page. What is a mask? If you use the mask in Flash, you will know, that's it. In fact, you can also understand the mask, the equivalent of a colored cloth to cover the object, but the content has been dug. If you do not understand, just look at the picture below and listen to me to elaborate.

Figure 1 Mask Filter effect 1

In this mask filter with this 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, that is, the color of the mask in #rrggbb format. You just have to choose a suitable color for it in the DW3 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 background color.
Here we use the Mask filter to do several effects:
1, the colorful text

Figure 2 Mask Filter Effect 2

What's the effect of the above, it's not bad! It's kind of like an image, isn't it? This is the effect of the mask filter. A white filter is used here, and the code is:. Mask1 {filter:mask (color= #ffffff)}. Colorful text color is actually the color of the background. Its production method is also very simple, that is, insert a 1*1 table, add a multiple color to the table background, input text in the table, to the cell load a mask filter, it is done, not difficult?!
2, searchlight animation effect
The following searchlight effect, with Flash to do all the cost of God, can not think of a CSS filter to make! As the searchlight effect is dynamic, I can only catch two pictures of the process to show you, to see the dynamic effect, then you do according to me 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 this:
The effect is a little more complicated than the example above, but it's just a few more clicks.
1, insert a layer, I call it "parent layer", which is used to put the content to display (text or pictures). Then insert a layer on the layer, which I call the child layer, which is used primarily to create a mask effect.
2, in the parent layer of the property panel to set the display window, that is, set the layer's "Clip" property, in which the relative coordinates, where: L, T is the upper left corner coordinates, R, B is the lower right corner coordinates. The subsequent child layers will only appear in the window you set up. Set the Layer property parameters panel as shown in the following illustration:

Figure 5 Layer Properties panel

My parent here is "Layer4", where I use the entire parent layer as a display window, which is visible when the child layer moves to the parent layer and is not visible outside the parent layer.
3, we insert a background transparent circular picture in the child layer, here uses the circular graph The goal mainly is the searchlight light projection is a similar circle, in addition the circle outside the image part must be transparent, otherwise sees will be a rectangular box to move. It then loads a mask filter with the same color as the parent background color on the child layer, and the handle is pulled up so that it completely overwrites the contents of the parent layer so that the contents of the parent layer in the browser are visible only as part of the circular picture, which is exactly what we want.
4, of course, to produce the effect of searchlights, it is necessary to make that circular area move up, this will use Dreamweaver time line (Timeline) function. In DW3, drag first to the child layer so that the picture on it exactly overwrites the header of the parent's content. Press "Ctrl+f9", bring up the timeline panel, drag the handle layer onto the timeline panel, drag the last frame to 100 frames, then insert a key frame in the 50th frame, and the image of the handle layer coincides with the tail of the parent layer. Select Loop (looping) and auto (autoplay) on the timeline panel, all OK.
A complex animation complete, press F12 to see, is not a bit cool?!