CSS Tutorials (vii) filters

CSS provides a number of built-in multimedia filter effects that can be used to add visual filters and conversion effects to a standard HTML element, examples, text containers, and other objects. DREAMWEAVER4 offers 16 filters to choose from, such as:

Below, let's take a look at how to use these CSS filters conveniently in Dreamweaver4.

To create a custom style ". Filter", select the Alpha filter in the Filter drop-down box and we'll "alpha (opacity=, finishopacity=, style=, startx=, starty=?, finishx=? , finishy=?) " The opacity parameter is set to 50, and the following parameters are deleted, such as:

After pressing OK, a custom style of ". Filter" is created, and we apply this style to the image, which is translucent. If you apply this style to a table, the table becomes translucent. Note that all filter effects are visible in the browser. The following is the original code:

<style type= "Text/css" >

<!--

. filter {Filter:alpha (opacity=50)}

-

</style>

Note: This example does not use the following parameters, only the opacity parameter, so the other parameters are deleted.

Let's explain the effects and parameters of each filter:

1. Alpha: Set Transparency

Alpha (opacity=, finishopacity=, style=?, startx=?, starty=?, finishx=?, finishy=?)

Opacity: Transparency level, range is 0-100, 0 is fully transparent, and 100 is completely opaque.

Finishopacity: When you set the transparency effect of a gradient, you specify the transparency at the end, ranging from 0 to 100.

Style: Sets the style of the gradient transparency, with a value of 0 for the uniform shape, 1 for the line, 2 for the radial, and 3 for the rectangle.

StartX and Starty: Represents the start x and y coordinates of the gradient transparency effect.

Finishx and Finishy: represents the coordinates of the gradient transparency effect ending with x and Y.

2. Blendtrans: Fade-in and fade-out effects between images

Blendtrans (duration=?)

Duration: Time to fade in or fade out.

Note: This filter must be combined with JS to create a sequence of images to make the effect between pictures.

3. BLRU: Creating a blur effect

Blur (add=, direction=?, strength=?)

ADD: Whether single direction blur, this parameter is a Boolean value, True (not 0) or False (0).

Direction: Sets the direction of the blur, where 0 degrees represents a vertical upward and then every 45 degrees is a unit.

Strength: Represents the blurred pixel value.

4. Chroma: Set the specified color to transparent

Chroma (color=?)

Color: Refers to the colors to be set to transparent.

5. DropShadow: Create Shadow Effect

DropShadow (color=, offx=, offy=?, positive=?)

Color: Specifies the colors of the shadow.

OFFX: Specifies that the shadow is offset in the horizontal direction relative to the element, Integer.

Offy: Specifies that the shadow is offset in the vertical direction relative to the element, Integer.

Positive: Is a Boolean value that is true (not 0) when it is represented as an established vulva shadow; False (0), which is expressed as an inner shadow.

6. FLIPH: Invert the element horizontally

7. FLIPV: Invert the element vertically

8. Glow: Create an external luminous effect

Glow (color=, strength=?)

Color: is the colour that specifies the glow. Strength: The intensity of light, which can be any integer between 1 and 255, the larger the number, the greater the luminous range.

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

Invert: Invert the color of the image to produce a film-like effect

Light: The effect of placing lights, can be used to simulate the light source on the object of the projection effect

Note: This effect requires JS to set the position and intensity of the light.

Mask: Create a transparent matte

Mask (color=?)

Color: Sets the background to allow the object to cover the part of the background with transparency.

Revealtrans: Creating a toggle Effect

Revealtrans (duration=, transition=?)

Duration: Is the switching time, in seconds.

Transtition: Is the switch mode, can be set from 0 to 23.

Note: If you make a switch between pages, you can add a line of code to the
Shadow: Create another Shadow effect

Shadow (color=, direction=?)

Color: Refers to the colour of the shadow.

Direction: is the direction in which the projection is set, 0 degrees represents the vertical upward, and then every 45 degrees is one unit.

Wave: Ripple Effect

Wave (add=, freq=, lightstrength=?, phase=?, strength=?)

ADD: Indicates whether the original object is displayed, 0 is not displayed, and not 0 indicates that the original object is to be displayed.

Freq: Sets the number of fluctuations.

Lightstrength: Sets the light intensity of the wave effect from 0 to 100. 0 represents the weakest and 100 is the strongest.

Phase: The starting phase angle of the wave. A percentage value from 0 to 100. (For example: 25 equals 90 degrees, and 50 equals 180 degrees.) ）

Strength: Sets the amplitude of the wave swing.

Xray: Showing the outline of the image, the X-ray effect

Note: When using CSS filters, you must use the elements that are in the area, such as tables, pictures, and so on. Instead of using CSS filters for elements that have no area, such as text or paragraphs, we can set the element's height and width style or coordinates.

Look at this example, we do a shadow effect on a line of text (DropShadow), create a new custom style. Shadow, in the Filter drop-down box, select "DropShadow (color=, offx=, offy=, positive=?)", We set it to "DropShadow (color=999999, offx=2, offy=2, positive=1)". Then we apply the defined style to the page, we find that the text in the table has a shadow, and the text in the paragraph has no shadow. Click the Edit Style Sheet button in the CSS Styles panel to add the Hight property to the style:

To not affect the height of the original object, we cannot set the height beyond the height of the font itself. After OK, you can see in the browser that the text in the paragraph also has a shadow.