CSS Quick Guide (6)

7. Filter

CSS provides some built-in multimedia filter effects, which can be used to add visual filters and conversion effects to a standard HTML element, examples, text containers, and other objects. Dreamweaver4 provides 16 filters to choose from, such:

Next, let's take a look at how to easily use these CSS filters in dreamweaver4.
Create a custom style ". filter" and select the Alpha filter in the filter drop-down box. We will set "alpha (opacity = ?, Finishopacity = ?, Style = ?, Startx = ?, Starty = ?, Finishx = ?, Finishy = ?)" The opacity parameter is set to 50, and all subsequent parameters are deleted, for example:

Press OK to create a ". filter" Custom style. We apply this style to the image, and the image is translucent. If you apply this style to a table, the table becomes translucent. Note that all filter effects can be viewed in the browser. The source code is as follows:
<Style type = "text/CSS">
<! --
. Filter {filter: alpha (opacity = 50 )}
-->
</Style>
Note: In this example, we do not use the following parameters. We only use the opacity parameter, So we delete other parameters.

The following describes the effects and parameters of each filter:
1. ALPHA: Set transparency
Alpha (opacity = ?, Finishopacity = ?, Style = ?, Startx = ?, Starty = ?, Finishx = ?, Finishy = ?)
Opacity: transparency level. The value ranges from 0 to 100. 0 indicates full transparency, and indicates full opacity.
Finishopacity: used to specify the transparency at the end of the gradient when the transparency effect is set. The range is also 0 to 100.
Style: sets a gradient transparent style. The value 0 indicates a uniform shape, 1 indicates a linear shape, 2 indicates a radial shape, and 3 indicates a rectangle.
Startx and starty: the starting X and Y coordinates of the gradient transparency effect.
Finishx and finishy: represent the coordinates of X and Y after the gradient transparency effect ends.

2. blendtrans: fade-in and fade-out between images
Blendtrans (duration = ?)
Duration: the time when the device fades in or out.
Note: This filter must be used in combination with js to create an image sequence for effect between images.

3. blru: Set the blur effect
Blur (add = ?, Direction = ?, Strength = ?)
Add: whether to blur in a single direction. This parameter is a Boolean value, true (not 0) or false (0 ).
Direction: sets the blur Direction, where 0 indicates vertical up, and then every 45 degrees is a unit.
Strength: indicates the blurred pixel value.

4. chroma: Set the specified color to transparent.
Chroma (color = ?)
Color: The color to be transparent.

5. dropshadow: Creates a shadow effect.
Dropshadow (color = ?, Offx = ?, Offy = ?, Positive = ?)
Color: Specifies the color of the shadow.
Offx: an integer that specifies the horizontal offset of the shadow to the element.
Offy: Specifies the vertical offset of the shadow to the element, an integer.
Positive: A boolean value. If the value is true (not 0), it indicates that an external shadow is created. If the value is false (0), it indicates that an internal shadow is created.

6. fliph: reverse the element horizontally.

7. flipv: vertical inversion of Elements

8. glow
Glow (color = ?, Strength = ?)
Color: Specifies the color of the glow.
Strength: the intensity of light, which can be any integer between 1 and 255. The larger the number, the larger the intensity of light.

9. Gray: remove the color of the image and display it as a black-and-white image.

10. Invert: invert the color of the image to produce negative effects.

11. Light: the effect of placing a light source. It can be used to simulate the projection effect of a light source on an object.
Note: You need to use js to set the light position and intensity.

12. Mask: create a transparent mask.
Mask (color = ?)
Color: sets the background color to make the object transparent.

13. revealtrans: Set the switchover effect.
Revealtrans (duration = ?, Transition = ?)
Duration: The switch time, in seconds.
Transtition: indicates the switching mode, which can be set from 0 to 23.
Note: If you switch between pages, you can add a line of code in the

14. Shadow: creates another shadow effect.
Shadow (color = ?, Direction = ?)
Color: The color of the shadow.
Direction: sets the direction of projection. 0 degrees indicates vertical up, and then every 45 degrees is a unit.

15. Wave: Ripple Effect
Wave (add = ?, Freq = ?, Lightstrength = ?, Phase = ?, Strength = ?)
Add: Indicates whether to display the original object, 0 indicates not to display, and non-0 indicates to display the original object.
Freq: set the number of fluctuations.
Lightstrength: Set the illumination intensity of the wave effect, from 0 to 100. 0 indicates the weakest point, and 100 indicates the strongest point.
Phase: the starting phase angle of the wave. The percentage value from 0 to 100. (For example, 25 is equivalent to 90 degrees, and 50 is equivalent to 180 degrees .)
Strength: Set the amplitude of the wave swing.

16. Xray: displays the image contour and X-ray Effect

Note: When using CSS filters, you must use regional elements, such as tables and images. Text and paragraph elements without a region cannot use CSS filters. For such elements, we can set the height and width styles or coordinates of the elements.

Let's take a look at the example below. We will apply a shadow effect (dropshadow) to a line of text, create a custom style, and select "dropshadow (color = ?, Offx = ?, Offy = ?, Positive = ?)", We set it to "dropshadow (color = 999999, offx = 2, offy = 2, positive = 1 )". Then apply the defined style to the page. We find that the text in the table has a shadow, but the text in the paragraph has no shadow. Click the edit style sheet button on the CSS styles panel to add the hight attribute to the style:

In order not to affect the height of the original object, the height we set cannot exceed the height of the font itself. Here I set the height to 1. After OK, you can see that the text in the paragraph has a shadow in the browser. Try it by yourself :)