CSS3 example of implementing a filter effect

Recent projects will contact CSS3, the evil IE is not supported, search for a bit, found that the filter of IE is very useful, seemingly the Internet is the filter standardization, take time to organize a bit of IE filter effect remember please use IE browse Oh, interested friends can understand, I hope this article is helpful to you

Recent projects will contact CSS3, the evil IE is not supported, search for a bit, found that the filter of IE is very useful, seemingly the Internet is the filter standardization. Today first tidy up the filter effect of IE (please use IE to browse), tomorrow in the CSS3 corresponding effect written (please use the WebKit kernel to browse). , if the reader has other better articles, want to be able to share, welcome to join the Web front-end Communication Group (75701468) to share your experience.

IE Filter

Filter

Alpha: Sets the transparency level. Blur: Creates a high-speed motion effect, which is a blur effect. Chroma: Make special color transparent. DropShadow: Creates a fixed shadow of an object. FLIPH: Create a horizontally mirrored picture. FLIPV: Create a vertical mirror image. Glow: Gaguang is outside the edges of nearby objects. Gray: Grayscale the picture. Invert: Inverse color. Light: Creates lights on the object. Mask: Creates a transparent mask on the object. Shadow: Creates an offset fixed shadow. Wave: ripple effect. Xray: Causes the object to become as if it were irradiated by an X-ray.

Grayscale Grayscale Sepia Brown Saturation of saturate Hue-rotate Hue Rotation Invert inverse color Opacity transparency Brightness brightness Contrast contrast ratio Blur Blur Drop-shadow Shadow

Filters: Transparency Effects

Syntax: Filter:alpha (opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,starty=starty,finishx= Finishx,finishy=finishy)

Description
Opacity: The starting value, the value is 0~100, 0 is transparent, and 100 is the original.
Finishopacity: Target value.
Style:1 or 2 or 3
StartX: Any value
Starty: Any value
FINISHX: Any value
Finishy: Any value

General transparency Effect: Filter:alpha (opacity=30);

Code:-webkit-filter:opacity (0.3); or opacity:0.3;

Rose Flower

Linear transparency: Filter:alpha (opacity=0, finishopacity=100, style=1, startx=0, starty=0, finishx=200, finishy=180);

Code: unkown;

Rose Flower

Radiation transparency: Filter:alpha (opacity=0, finishopacity=100, style=2);

Code: unkown;

Rose Flower

Soft light effect Filter:alpha (opacity=100, finishopacity=0,style=3);

Code: unkown;

Rose Flower

Filters: Projection Effects

Syntax: 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: If "True" creates a visible projection for any non-transparent pixels. If False, a visible projection is established for the transparent portion of the pixel.

Projection effect: Filter:progid:dXImageTransform.Microsoft.DropShadow (color= #000000, offx=5,offy=5,positives=true);

Code:-webkit-filter:drop-shadow (5px 5px 0 #000000); or box-shadow:5px 5px 0 #000;

Rose Flower

Shadow effect: Progid:DXImageTransform.Microsoft.Shadow (color= #000000, direction=135,strength=10);

Code: unkown;

Rose Flower

Color effect: Progid:DXImageTransform.Microsoft.Chroma (color= #59A074);

Code: unkown;

Rose Flower

Mosaic: Filter:progid:dXImageTransform.Microsoft.Pixelate (maxsquare=3);

Code: unkown;

Rose Flower

Luminous effect: Filter:progid:dXImageTransform.Microsoft.Glow (color= #000000, strength=5);

Code: unkown;

Rose Flower

Horizontal flip: filter:fliph;

Code:-webkit-transform:rotatey (180DEG);

Rose Flower

Vertical flip: FILTER:FLIPV;

Code:-webkit-transform:rotatex (180DEG);

Rose Flower

Inverse color effect: filter:invert;

Code:-webkit-filter:invert (1);

Rose Flower

Black and white effect: Filter:gray;

Code:-webkit-filter:grayscale (1);

Rose Flower

X-ray Photo: Filter:xray;

Code:-webkit-filter:grayscale (1) invert (1);

Rose Flower

Filters: Blur Effects

Syntax: Filter:blur (add = Add, Direction = Direction, strength = strength)

Description
ADD: Specifies whether the image has been altered to an Impressionist blur effect. 1 is true and 0 is false.
Direction: Angle, 0~315度, step is 45 degrees.
Strength: How many pixels are blurred by the width of the pixel, the default is 5 pixels.

Wind motion blur (angled): Filter:blur (add=true,direction=45,strength=30);

The code: temporarily No

Rose Flower

General Blur: Filter:progid:DXImageTransform.Microsoft.Blur (pixelradius=7);

Code:-webkit-filter:blur (3PX);

Rose Flower

Filters: Ripple Effects

Syntax: Filter:wave (add=add,freq=freq,lightstrength=strength,phase=phase, Strength=strength)

Description
ADD: Whether it is scrambled, the default is "True".
Freq: How many full ripples are produced.
Lightstrength: Enhanced lighting, 0-100 integer value.
Phase: The offset of the sine wave, usually a value of 0, and a range of 0-100 integer values.
Strength: Represents the amplitude size.

Sine Ripple: Filter:wave (add=0, freq=60, Lightstrength=1, phase=0, strength=3);

Code: unkown;

Rose Flower

Gradient effect: filter:progid:DXImageTransform.Microsoft.Gradient (gradienttype=0, startcolorstr= "#000000", endcolorstr= "# FFFFFF ");

Code: Background:-webkit-linear-gradient (#000000 0, #ffffff 100%);

"Recommended"

1. CSS3 Free Video Tutorial

2. Detailed CSS3 10 top commands

3. Brief description of how the Web designer uses the good CSS3 technology

4. CSS3 Making mouse button effect

5. CSS3 setting an instance of the RGB color