CSS Filter learning Summary

Applicable browsers:

IE. Does not comply with CSS standards

Syntax:

filter:filtername{parameters};

Category:

Basic filter-it can directly act on the object and take effect immediately, mainly including:

1). Alpha-Channel

2). Blur-fuzzy

3) motionblur-mobile blur

4) chroma -- transparent color

5) Drop Shadow -- drop shadow

6) Flip -- symmetric transformation

7) glow -- halo

8) grayscale -- grayscale

9) invert -- reversed

10) mask-Mask

11) shadow -- Shadow

12) X-ray -- X-ray Effect

13) emboss or engrave-embossed

14) wave-Wave

Advanced Filters-must be used with JS and other scripts to produce more elegant changes, mainly including

1) blendtrans -- gradient Transformation

2) revealtrans -- Transformation

3) Light-Lighting

Alpha

Filter: alpha (opacity = opacity, finishopacity = finishopacity, startx = startx, Starty = starty, finishx = finishx, finishy = finishy );

Opacity: Transparency Level, value range: 0-100 (0 completely transparent) Style: Shape Feature of the transparent area. Values: 0, 1, 2, and 3. 0-uniform shape 1-linear 2 -- circular radiation gradient 3 -- rectangular radiation gradient X and Y are coordinate parameters.

Blur

Filter: progid: DXImageTransform. Microsoft. Blur (makeshadow = makeshadow, Pi Xelradius = pixelradius, shadowopacity = shadowopacity );

Makeshadow sets whether the object content is processed as a shadow, Pixelradius sets the depth of the blur effect. Shadowopacity is used to set the shadow produced by makeshadow. Transparency

Example:
Filter: progid: DXImageTransform. Microsoft. Blur (pixelradius = 4, makeshadow = false );

Motionblur

Filter: porgid: DXImageTransform. Microsoft. motionblur (add = add, direc Tion = direction, strength = strength );

Add: Specifies whether to overlay the original image. Valid values: true and false Direction: sets the blur Direction. 0 indicates vertical up. The default value is 270 to the left. Strength: How many pixels of width are affected by blur

Example:
Filter: progid: DXImageTransform. Microsoft. motionblur (strength = 30, direction = 90, add = true);/* horizontal to right */

Chroma

Filter: chroma (color: color)

Color: The color value to be transparent.

Example:
Filter: chroma (color = ff6800);/* remove the golden color */

Dropshadow

Filter: dropshadow (color = color, offx = offx, offy = offy, positive = positive );

Color: The color of the shadow. Offx and offy indicate the offset of the shadow in the X and Y directions, respectively. Positive: True -- any non-transparent pixel creates a visible projection False -- transparent pixel part creates a visible projection

Example:
. Drop1 {
Filter: dropshadow (color = # ffb6aa, offx = 6, offy = 4, positive = true );
}
. Drop2 {
Filter: dropshadow (color = # ffaaaa, offx = 6, offy = 4, positive = false );
}

Flip

Filter: fliph Filter: fiipv

Fliph: horizontal flip Flipv: vertical flip

Example:
. Flip2 {
Filter: flipv;/* vertical flip */
}
. Flip3 {
Filter: flipv fliph;/* flip horizontally and vertically at the same time */
}

Glow

Filter: glow (color = color, strength = strength );

Color: Luminous color Strength: luminous intensity. (1-255)

Example:
Filter: glow (color = # ffff99, strength = 6);/* yellow light */

Gray

Filter: Gray;

Filter: Gray;/* black/white image */

Invert

Filter: Invert

Example:
Filter: invert;/* negative effect */

Mask

Filter: mask (color = color );

Color: Specifies the color used as the mask.

Example:
Filter: mask (color = # 8888ff);/* mask effect */

Shadow

Filter: Shadow (color = color, direction = direction );

Color: Set the shadow color. Direction: set the direction of the shadow.

Example:
. Shadow {
Filter: Shadow (color = # ccccff, direction = 135);/* shadow effect */
}
. Drop {
Filter: dropshadow (color = # ccccff, offx = 5, offy = 5, positive = true );
/* Shadow */
}

X-ray

Filter: Xray;

Example:
. Xray {
Filter: Xray;/* X-ray effect */
}
. Gray {
Filter: Gray;/* black/white effect */
}