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