Learning Web page making technology CSS filter style syntax rules

css| Filter | web | syntax

Style= "Filter: Filter Name (property 1= value 1, property 2= value 2 ...)"

Where the "filter name" is the name you see in the Filter Drop-down list in the DW style Setup module, the attribute value is only populated with numbers.

Below is a functional description of the main filters provided by DW:

(The following two groups of tables use the "box", "border", "block", "type" CSS styles)

Alpha: Setting the transparency level
Blur: Create a high speed move effect, i.e. blur effect
Chroma: Make special color transparent
DropShadow: Creating a fixed shadow of an object
FLIPH: Create a horizontal mirrored picture
FLIPV: Create a vertical mirrored picture
Glow: Gaguang on the edge of nearby objects
Gray: Grayscale the picture
Invert: Anti-color
Light: Creating a light source on an object
Mask: Create a transparent mask on an object
Shadow: Create Offset fixed Shadow
Wave: Ripple Effect
Xray: Make an object appear to be X-rays

Here are the main filter data

including syntax, attribute meaning, simple examples and application instructions:

1. Filters: Alpha

Grammar:
Style= "Filter:alpha (Opacity=opacity,finishopacity=finishopacity,style=style,
Startx=startx,starty=starty,finishx=finishx,finishy=finishy) "
Description
Opacity: Starting value, the value is 0-100,0 to transparent, 100 is the original image.
Finishopacity: Target value.
Style:1 or 2 or 3
StartX: Ren?
Starty: Any value
Example: Filter:alpha (opacity= "0", finishopacity= "," style= "2")

2. Filters: Blur

Grammar:
Style= "Filter:blur (add=add,direction=direction,strength=strength)"
Description
ADD: generally 1, or 0.
Direction: Angle, 0-315 degrees, step to 45 degrees.
Strength: The effect of the growth of the value, generally 5 can be.
Example: Filter:blur (add= "1", direction= "", strength= "5")

3. Filters: Chroma

Grammar:
Style= "Filter:chroma (Color=color)"
Description
Color: #rrggbb格式, arbitrary.
Example: Filter:chroma (color= "#FFFFFF")

4. Filters: DropShadow

Grammar:
Style= "Filter:dropshadow (color=color,offx=offx,offy=offy,positive=positive)"
Description
Color: #rrggbb格式, arbitrary.
Offx:x axis deviation value.
Offy:y axis deviation value.
Positive:1 or 0.
Example: Filter:dropshadow (color= "#6699CC", offx= "5", offy= "5", positive= "1")

5. Filters: Fliph

Grammar:
Style= "Filter:fliph"
Example: Filter:fliph

6. Filters: FLIPV

Grammar:
Style= "FILTER:FLIPV"
Example: FILTER:FLIPV

7. Filters: Glow

Grammar:
Style= "Filter:glow (color=color,strength=strength)"
Description
Color: glowing colors.
Strength: Strength (0-100)
Example: Filter:glow (color= "#6699CC", strength= "5")

8 filter: Gray

Grammar:
Style= "Filter:gray"
Example: Filter:gray

9. Filters: Invert

Grammar:
Style= "Filter:invert"
Example: Filter:invert

10. Filters: Mask

Grammar:
Style= "Filter:mask (Color=color)"
Example: Filter:mask (color= "#FFFFE0")

11. Filters: Shadow

Grammar:
Filter:shadow (color=color,direction=direction)
Description
Color: #rrggbb格式.
Direction: Angle, 0-315 degrees, step to 45 degrees.
Example: Filter:shadow (color= "#6699CC", direction= "135")

12. Filters: Wave

Grammar:
Filter:wave (Add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)
Description
ADD: generally 1, or 0.
Freq: Deformation value.
Lightstrength: percent of deformation.
Phase: Percentage of angular distortion.
Strength: Deformation strength.
Example: Filter:wave (add= "0", phase= "4", freq= "5", lightstrength= "5", strength= "2")

13. Filters: Xray

Grammar:
Style= "Filter:xray"
Example: Filter:xray