Detailed explanation of examples of implementing filter effects in CSS3

Most of my recent projects have come into contact with CSS3, but the damn IE does not support it. I searched and found that IE’s filters are quite useful. It seems that W3C is standardizing filters. I took the time to sort out IE’s filter effects. Please remember. Use IE to browse. Friends who are interested can learn more. I hope this article will be helpful to you.

Recent projects will all come into contact with CSS3, but the damn IE does not support it. After searching, I found that IE’s filters are quite good. It works, it looks like W3C is standardizing filters. Today I will sort out the filter effects of IE (please use IE to browse), and tomorrow I will write the corresponding effects of CSS3 (please use Webkit kernel to browse). , if readers have other better articles and hope to share them, welcome to join the web front-end communication group (75701468) to share your and my experience.

IE Filter

W3C Filter

Alpha: Set the transparency level. blur: Create a high-speed movement effect, that is, a blur effect. Chroma: Make a special color transparent. DropShadow: Create a fixed shadow of the object . FlipH: Create a horizontal mirror picture . FlipV: Create a vertical mirror picture. glow: Add light outside the edges of nearby objects. gray: Grayscale the image. invert: Invert the color. light: Create a light source on the object. mask: Create Transparent mask on the object. shadow: Create an offset fixed shadow. wave: Ripple effect. Xray: Make the object look like it is illuminated by x-rays.

grayscale gray Degree sepia brown saturate saturation hue-rotate hue rotation invert invert opacity transparency brightness contrast contrast blur blur drop -shadow shadow

Filter: Transparency effect

Syntax: filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,StartX=startX,StartY=startY,FinishX=finishX, FinishY=finishY)

Description:
Opacity: starting value, ranging from 0 to 100, 0 is transparent, 100 is the original image.
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);

W3C code: -webkit-filter:opacity(0.3); or opacity:0.3;

rose

Line type transparency: filter: alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=200, FinishY=180);

W3C code: unkown;

Rose

Radial transparency: filter: Alpha(Opacity=0, FinishOpacity=100, Style=2);

W3C code: unkown;

##rose

Soft light effect filter:alpha(opacity=100, finishOpacity=0,style=3);

W3C Code: unkown;

rose

Filter: Drop Shadow Effect

Syntax: filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)

Description:

Color:#rrggbb format, any.
Offx: X-axis deviation value.
Offy: Y-axis offset value.
Positive: If "True", create a visible shadow for any non-transparent pixels. If "False", create a visible shadow for the transparent pixel part.

Projection effect: filter:progid:dXImageTransform.Microsoft.DropShadow(color=#000000,offX=5,offY=5,positives=true);

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

rose

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

W3C code: unkown;

rose

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

W3C code: unkown;

rose Flower

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

W3C code: unkown;

Rose

Glow effect: filter:progid:dXImageTransform.Microsoft.Glow(color=#000000,Strength=5);

W3C code: unkown;

rose

Horizontal flip: filter: fliph;

W3C code: -webkit-transform:rotateY(180deg);

rose

Vertical flip: filter: flipv;

W3C code: -webkit-transform:rotateX(180deg);

rose

Inversion effect: filter: invert;

W3C code: -webkit-filter:invert(1);

rose

Black and white effect: filter:gray;

W3C code: -webkit-filter:grayscale(1);

rose

X-ray photo: filter:xray;

W3C code: -webkit-filter:grayscale(1) invert(1);

rose

Filter: Blur effect

Syntax: filter:Blur(Add = add, Direction = direction, Strength = strength )

Description:

Add: Specify whether the picture is changed to an impressionistic blur effect. 1 is true, 0 is false.
Direction: Angle, 0~315 degrees, step size is 45 degrees.
Strength: How many pixels of width are affected by blur, the default is 5 pixels.

Wind blur (with angle): filter: blur(add=true,direction=45,strength=30);

W3C code: None

rose

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

W3C code: -webkit-filter:blur(3px);

Rose

Filter: Ripple effect

Syntax: filter: Wave(Add=add, Freq =freq, LightStrength=strength, Phase=phase, Strength=strength)

Description:
Add: Whether to disrupt, the default is "True".
Freq: How many complete ripples are generated.
LightStrength: Enhance light and shadow, integer value from 0-100.
Phase: The offset of the sine wave, usually the value is 0, and the range is an integer value of 0-100.
Strength: represents the amplitude.

Sine wave: filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);

W3C code: unkown;

Rose

Gradient effect: filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr="#000000", EndColorStr="#ffffff");

W3C code: background:-webkit-linear-gradient(#000000 0, #ffffff 100%);

[Related recommendations]

1. CSS3 Free video tutorial

2. Detailed explanation of the 10 top commands in CSS3

3. Brief description of how web designers can use CSS3 technology well

4. Css3 to create mouse over button effects

5. CSS3 example of setting RGB color

The above is the detailed content of Detailed explanation of examples of implementing filter effects in CSS3. For more information, please follow other related articles on the PHP Chinese website!