CSS Tutorial (7) Filter

CSS provides some built-in multimedia filter effects. This technology can be used to add visual filters and transformation effects to a standard HTML element, such as images, text containers, and other objects. Dreamweaver4 provides 16 filters to choose from, as shown below:

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

Create a custom style ".filter", select the Alpha filter in the Filter drop-down box, we will "Alpha(Opacity=?, FinishOpacity=?, style=?, StartX=?, StartY=? , FinishX=?, FinishY=?)"'s Opacity parameter is set to 50, and all subsequent parameters are deleted, as shown below:

After pressing OK, a custom style of ".filter" is created. We Apply this style to an image and the image will be semi-transparent. If you apply this style to a table, the table will also become semi-transparent. Note that all filter effects can only be seen in the browser. The following is the original code:



Note: In this example we did not use the following parameters, only the Opacity parameter, so Delete other parameters.

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 represents completely transparent, 100 represents completely opaque.

FinishOpacity: When setting the transparency effect of the gradient, it is used to specify the transparency at the end, and the range is also 0 to 100.

style: Set the gradient transparent style. A value of 0 represents a uniform shape, 1 represents a linear shape, 2 represents a radial shape, and 3 represents a rectangle.

StartX and StartY: represent the starting X and Y coordinates of the gradient transparency effect.

FinishX and FinishY: represent the X and Y coordinates of the end of the gradient transparency effect.

2. BlendTrans: The fade-in and fade-out effect between images

BlendTrans(Duration=?)

Duration: The fade-in or fade-out time.

Note: This filter must be used with JS to create a picture sequence to create effects between pictures.

3. Blru: Create a blur effect

Blur(Add=?, Direction=?, Strength=?)

Add: Whether to blur in one direction, this parameter is a Boolean value, true (not 0) or false (0).

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

Strength: represents the blurred pixel value.

4. Chroma: Set the specified color to be transparent

Chroma(Color=?)

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

5. DropShadow: Create a shadow effect

DropShadow(Color=?, OffX=?, OffY=?, Positive=?)

Color: Specify the color of the shadow.

OffX: Specifies the horizontal offset of the shadow relative to the element, an integer.

OffY: Specifies the vertical offset of the shadow relative to the element, an integer.

Positive: It is a Boolean value. When the value is true (non-0), it means establishing an outer shadow; when it is false (0), it means establishing an inner shadow.

6. FlipH: Flip the element horizontally

7. FlipV: Flip the element vertically

8. Glow: Create an outer glow effect

Glow(Color=?, Strength=?)

Color: specifies the color of light. Strength: The intensity of the light, which can be any integer between 1 and 255. The larger the number, the greater the range of the 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, producing a film-like effect

11. Light: The effect of placing a light source, which can be used to simulate the projection effect of a light source on an object.

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

12. Mask: Create a transparent mask

Mask(Color=?)

Color: Set the background color to make the part of the object covering the background transparent.

13. RevealTrans: Create switching effect

RevealTrans(Duration=?, Transition=?)

Duration: is the switching time, in seconds.

Transtition: It is the switching method and can be set from 0 to 23.

Note: If you want to switch between pages, you can add a line of code in the area: . If the element is used in the page, it must be used with JS.

14. Shadow: Create another shadow effect

Shadow(Color=?, Direction=?)

Color: refers to the color of the shadow.

Direction: Sets the direction of the projection. 0 degrees means vertically upward, and every 45 degrees is a unit.

15. Wave: Ripple effect

Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)

Add: Indicates whether Display the original object, 0 means not to display, non-0 means to display the original object.

Freq: Set the number of fluctuations.

LightStrength: Set the light intensity of the wave effect, from 0 to 100. 0 represents the weakest, and 100 represents the strongest.

Phase: The initial phase angle of the wave. Percent 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 sway.

16. Elements without area such as text and paragraphs cannot use CSS filters. For such elements, we can set the Height and Width styles or coordinates of the elements to achieve this.

Look at the example below. We create a shadow effect (dropshadow) on a line of text, create a new custom style.shadow, and select "DropShadow(Color=?, OffX=?, OffY=?, in the filter drop-down box). Positive=?)", we set it to "DropShadow(Color=999999, OffX=2, OffY=2, Positive=1)". Then when we 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 in the CSS styles panel and 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. After OK, you can see in the browser that the text in the paragraph also has a shadow.

The above is the detailed content of CSS Tutorial (7) Filter. For more information, please follow other related articles on the PHP Chinese website!