Using the Mask filter CSS
Related Tags:css manuals css templates css style css download css style sheet css button css fillet css learning css vertical middling css games css menu css float xhtml css CSS Font CSS Border css Margin css Padding CSS List CSS Table css background css fonts css borders what is the css css editor css hack Baidu space css css transparent css clear css Chinese manual css filter css rolling css navigation css li css dotted line css spaced css files css form css links css table css shadow css fonts css drop-down menu css position css css navigation of the book css language dreamweaver css asp css css attributes css example css Notes css inheritance css padding css gradual css Auto-trip xhtml css css grammar css custom templates css input css middling css important css ul css overflow css entry css link css positioning proficient css background image css expression css space css tab css map css display css margindiv css bold css zen garden css authoritative guides css css hover css mandatory for firms
Making use of the web site, CSS, it is well known, and the use of filters on the css has introduced many are not. In fact, the CSS 0 filters used in Dreamweaver3 when it is convenient, and can produce a similar text image effect, but on thin compared to picture more. Do not believe? Below you see the effect you see. I am here today on the Mask (mask) the ingenious use of filters.
Mask filters for html elements on the page to make a rectangular object mask on what is the mask? If you used Flash in the mask, you will know, is that the appearance. In fact the mask so you can understand, or with a colored cloth to cover things up, but the content was dredged. If you do not understand, look at the next picture, I listen to you elaborate.
Figure 1 mask filter effects 1
This mask filters in the above so deep colors used primarily to allow you to clearly see that effect. Let us look at the mask filter parameters: Color has only one parameter, namely, the color of the mask # RRGGBB format to the color value. You can DW3 to it in a suitable choice of the colour of OK, if the above mask filter code is:. Mask1 (filter: mask (color = # 00ff00)), in the example below you will see, In fact, the color filter is not a major, and the key on the other hand Background color.
Below we have done a few special effects mask filters:
1, and colorful language
Figure 2 mask filter effects, 2
Above this effect how kind, good! A bit like the image is not it? This is the effect of mask filters. Here to the white filter, and its code is:. Mask1 (filter: mask (color = # ffffff)). Colorful text color is actually the background color. Their production methods are very simple and that is, insert a 1 * 1 forms, to form the multi-color background, in the form of text input to the unit containing a mask filters Luojia, well, it is not difficult? !
2, searchlights animation effects
Below this searchlight effect, to do with Flash Point for God, can not think of using CSS but also can filter out! As searchlight effect is dynamic, I can only grasp two of you to look at the picture, look at the dynamic effects, and then you say I have to do one or the hands to my home (http:/fym888.go.163.com) see.
Figure 3 searchlight animation effects 1
Figure 4 searchlight animation 2
Production methods are described below:
Compared to this effect to the above example to a bit more complex, but that is just a mouse several times more.
1. Insert a layer, I call him "Father layer", the layer to put to show that the content (text or images). In the re-insert a layer of, I called sublayer, it mainly used to generate the mask effect.
2. Father of the attributes of the panel set to Display window, which is set up layers of "Clip" attributes, the attributes used in the relative coordinates, which: L, T is the upper left corner coordinates R, B is the lower right corner coordinates . After the sublayer will be set up only in your window in the middle of the show. Good set of attribute parameters panel as shown below:
Figure 5 layer attributes panel
Here I am the father of the "Layer4" Here I have the whole of the father as a show window, that is, when the son of the father of the movement when we can see that in addition to the father-not visible.
3. We plug in a layer of transparent circular background pictures, use a circular graphics are mainly aimed at searchlights-like projection is a round, and round, part of the image must be transparent, otherwise see is a rectangular, in the mobile frame. Then load a layer of color with the Background Color of the father of the same mask filters, and widening of the handle, to enable them to fully cover the father of the contents of this in the browser, the content of the father of the only round Fractal picture can see that part, this is exactly what we want results.
4. Of course, to produce searchlight effect, it is necessary to enable That circular area to move, this time to use Dreamweaver line (Timeline) function. DW3 dragged in the first sub-layer, it is the picture on the cover of the contents of the father's first, according to "Ctrl + F9", a time-line panels, dragged handle time-line panel, the final one Frame dragged 100, in paragraph 50 to insert a key frame, and handle the picture and the Father of the contents of the rear of coincidence, the timing of the selection panel "Loop" (Circular player) and the "Auto" (Auto player), all OK.
- The CSS
- Css Profile
- CSS quick
- ? ? ? ? ¨° (css)
- CSS layout entry [css]
- CSS
- CSS Optimization
- CSS manuals compendium
- CSS entry
- On the XHTML CSS
- CSS Essentials
- Into CSS
- Css Guide: CSS syntax (CSS Syntax)
- CSS attributes usage manuals Fast facts
- All commonly used language reference manual for manual HTML | CSS manuals | JScript Manual | VbScript Manual | ASP Manual | PHP Manual | SQL manual | Site effects | ADO Manual
- CSS and DOM attribute usage manuals Fast Facts
- CSS sel
- CSS on
- CSS Selector
- CSS use
Proficient CSS filter (2)
Proficient CSS filter (2) As the web design and technological development, people have not been satisfied with some of the original HTML tags, but hope to add some pages for multimedia attributes, such as filters and gradual effect. CSS technology to the developmen...
WEB2.0 golden eggs under what kind of business model will be successful?
To Web2.0 technology as the starting point and a new wave of network development craze for traction, the domestic Internet enterprises have emerged in the new thinking, the birth of a new mode, the concept of business, the help of the power of the web and the potential is amazing, but, someti...
Cheating prevalent high level of rape What is the use of Alexa ranking service
Probably done because of the recent Chinese blog, the last few months received a relatively large number of Chinese spam. Let me which often puzzling is selling so-called Alexa ranking service. To a Google search to provide such services really many, and some so-ca...
Beginners Advice: Web Design eight bad habits
First, not too long for the image to join the interactive text "ALT =" image by adding interactive text is a good habit, because not all of them open image printed in the switch, this time to the text of these interactive users a useful tips, especially some connectio...
AJAX technology on the basis of
XML-based asynchronous JavaScript, or AJAX, is the current Web innovation (known as Web2.0) in a crown. AJAX thank the various component technologies, such as interactive Web Application Flickr, Backpack and Google in this regard has been a qualitative leap. Descrip...