Dreamweaver MX CSS Usage Tutorial Filter Introduction 2

css|dreamweaver| Tutorials | filters

Site original content, reproduced please indicate the source Web page teaching network .

　　 11. More information on CSS filters 2

　　GLOW Property

When the Glow Property object applies the Glow filter, the edge of the object produces a glow-like effect, which is cumbersome to do in the image-processing software, while the "glow" filter used in the DW MX 2004 is simple and saves a lot of bytes.

The "Glow" filter has only two parameters, one is "color" that specifies the color of the glow, and the other is "strength", which is the intensity of the glow, and can be understood as the length of the light. Any integer between the value range 1~255. Now let's do a few examples of applications.

"Glow Filter application in pictures"

The "Glow" filter is not valid to load a general picture, but if you put the picture in a table, and then give the table < td > Plus the "Glow" filter, you can make the picture a gradient color border.

Glow Filter parameters are not many, simple to use, the effect is obvious. In the specific application of the key issue is the choice of light color, with the entire page color coordination. For pictures and < td > can be loaded in a variety of ways, with the setting of the background, can produce some peculiar effect.

　　GRAY Property

The Gray attribute gray filter converts a color picture into a grayscale image, which is a black-and-white picture. Can be applied to creative special theme, gray for no parameter filter, function single, simple operation, obvious effect.

　　Invert property

The Invert Property Invert filter Converts a picture to a negative, as if it were a photographic film. Can be applied to creative special theme, invert filter, single function, simple operation, obvious effect.

　　LIGHT Property

The Light property light filter can produce an effect that simulates a light source. Can be used for special occasions, creating a strange atmosphere. The light filter is a parameterless filter that uses the JAVASCRPT call to simulate the effect of the light source.

　　MASK Property

The Mask property Mask filter can produce a rectangular matte effect for a Web Page Component object, but it can also be understood to cover the object with a colored cloth, but the contents are dug out.

"Mask Filter Application"

Insert 1 rows of 1 columns in the appropriate position of the page, enter text in the table, select cell <td> for the table, and then choose Mask in the Properties Panel style menu.

　　Revealtrans Property

Revealtrans is a live filter that produces 23 dynamic effects and, even more wonderfully, randomly extracts one of the 23 dynamic effects.

The Revealtrans filter has only two parameters, Duration: Is the switch time, in seconds; Transition: is the switching mode, it has 23 kinds of ways, as detailed in the following figure:

You can get different effects if you change the value of "Transition". It has to be implemented with JavaScript, and JavaScript is set up using the Blendtrans property.

　　SHADOW Property

The Shadow property uses the Shadow filter to create a projection of an object in the specified direction. The color of the projection can be specified.

　　WAVE Properties

Wave properties distort objects in a vertical waveform style, creating a special effect. Load the wave filter into the text, you can get the effect of waveform text.

Tip: There are 5 parameters for wave filters:

"Add": Indicates whether you want to distort the object in the form of a wave, it has only two values, that is, "true" and "false", the default value is "True (not 0)", and of course you can modify its value to "false" ("0").

"Freq": the frequency of the ripple, which specifies how many complete ripples must be generated on the object.

"Lightstrength": The parameters can enhance the effect of light and shadow on the ripple. Its range of parameter values is an integer value from 0 to 100.

"Phase": parameters are used to set the offset at which the sine wave begins. The general value for this offset is 0, but you can change it. Its value is from 0 to 100, which represents the percentage of the initial offset taken from the wavelength. For example, if the value is 25 then the sine wave begins in the 90-degree direction.

"Strength": Indicates the amplitude of the waveform, can also be simply understood as the degree of distortion.

　　XRAY Property

The Xray property Xray filter shows the outline of an object and highlights it. Just like "X-rays". Can be applied to creative special theme, Xray filter, single function, simple operation, obvious effect.

　　Apply class Style

The Apply class style is the only type of CSS style that can be applied to any text in the document. All class styles associated with the current document are displayed in the CSS styles panel and in the Style pop-up menu of the Text property Inspector.

Tip: When previewing a style defined in an external CSS style sheet, be sure to save the style sheet to ensure that the changes are made.

"Apply custom CSS Styles"

In the document, select the text you want to apply the CSS style to.

Place the insertion point in a paragraph to apply the style to the entire paragraph.

If you select a text range in a single paragraph, the CSS style affects only the selected range.

To specify the exact label to which you want to apply a CSS style, select the label in the label selector in the lower-left corner of the document window.

Do one of the following:

In the CSS Styles Panel (Window > CSS styles), right-click the name of the style that you want to apply, and then select Apply from the context menu.

In the Text property inspector, select the class style you want to apply from the Style pop-up menu.

In the document window, right-click the selected text, select CSS Style from the context menu, and then select the style you want to apply.

Select text > CSS styles, and then in the submenu, select the style you want to apply.

"Remove the custom style from the selection"

Select the object or text for which you want to delete the style. Do one of the following:

In the Text property inspector, select None from the Style pop-up menu.

Right-click the applied rule that you want to delete on the related CSS tab, and choose Set Class > None from the context menu.

Conflicts about CSS styles when two or more CSS styles are applied to the same text, these styles can collide and produce unexpected results. The browser applies style attributes based on the following rules:

If you apply both styles to the same text, the browser displays all the properties of both styles, unless a particular property conflicts. For example, one style might designate blue as the text color, and the other might specify red as the text color.

If the properties of two styles applied to the same text conflict, the browser displays the properties of the innermost style (the style closest to the text itself). Therefore, if the external style sheet and inline CSS styles affect the text element at the same time, the inline style is applied.

If there is a direct conflict, the attributes in the CSS style (the style applied using the class attribute) will replace the attributes in the HTML tag style.

Learn more about CSS filter applications please go to the CSS teaching channel to view