ie filter collection_HTML/Xhtml_web page production

IE gave us a headache in the early stage of development. It is different. It does not support what others support, and it also has things that others do not support. Today I will briefly introduce one of its features - filters.

　
　CSS filters are mainly used to achieve various special effects on images. It plays a very magical role in website production. The website can be made more beautiful through CSS filters. In CSS, the filter attribute represents the filter. It can set the filter effect of text, pictures and tables.
Syntax: STYLE={"filter:filtername(fparameter1,fparameter2...)}
Note: Filtername is the name of the filter, fparameter1, fparameter2, etc. are the parameters of the filter.
13 types of CSS filters Mirror effect
1. Filter: chroma - Make special color transparent.
Syntax: STYLE="filter:Chroma(Color=color)"
Annotation: color:#rrggbb format, any.
2. Filter: blur - Create a high-speed movement effect, that is, a blur effect.
Syntax: STYLE="filter:Blur(Add=add,Direction=direction,Strength=strength)"
Annotation: Add : Generally 1, or 0; Direction: Angle, 0-315 degrees, the step is 45 degrees; Strength: The value of the effect growth, usually 5 is enough.
3. Filter: FlipV--Create a vertical mirror image .
Syntax: STYLE="filter:FlipV"
4. Filter: alpha--Set transparency level
Syntax: STYLE="filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style ,StartX = startX, StartY = startY, FinishX = finish Style: 1 or 2 or 3; StartX: any value; StartY: any value
5. Filter: FlipH - Create a horizontal mirror image.
Syntax: STYLE="filter:FlipH"
6. Filter:glow--Add glow to the outside of nearby objects.
Syntax: STYLE="filter:Glow(Color=color,Strength=strength)"
Annotation: Color: glow color; Strength: intensity ( 0-100)
7. Filter:mask--Create a transparent mask on the object.
Syntax: STYLE="filter:Mask(Color=color)"
8. Filter: Filter :Xray--make the object look like it is illuminated by x-rays.
Syntax: STYLE="filter: :Invert"
10. Filter: DropShadow -- Create a fixed shadow of the object.
Syntax: STYLE="filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)"
Marking: Color: #rrggbb format, any; Offx: X-axis deviation value; Offy: Y-axis deviation value; Positive: 1 or 0.
11. Filter: gray--turn the picture into grayscale.
Syntax: STYLE="filter:Gray"
12. Filter: wave - ripple effect.
Syntax: filter:Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase, Strength=strength)
Annotation: Add: Generally 1, or 0; Freq: deformation value; LightStrength: deformation percentage; Phase: angle deformation percentage; Strength: deformation strength.
13.shadow--Create offset Fixed shadow.
Syntax: filter:Shadow(Color=color,Direction=direction)
Annotation: Color: #rrggbb format; Direction: angle, 0-315 degrees, step size is 45 degrees.
In One thing you should pay attention to when using CSS filters is that in current website layouts, filters are often attached to divs. If you simply set an id for the div in the HTML code, the filter will not be effective. , this id attribute must be defined in style or css, otherwise it will not work.

With just one sentence of code, the images can be switched freely like PPT documents when making the website. It is very simple! Before conversion, we must first understand three basic codes:
Rotation: style="filter: progid:DXImageTransform.Microsoft.BasicImage(rotation:1)"
Remove background color: style="filter:Chroma( Color=#000000)"
Set gradient color: style="position:relative;left:0px;top:0px;filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ff0000,endcolorstr=#ffff00,gradientType= 1)"
Wonderful review: A collection of CSS filter effects for website production
The following is a collection of image conversion filters, I hope it can help friends~! ! !
Random transformation: progid:DXImageTransform.Microsoft.RevealTrans(enabled=true,transition=23)
Square gradient: progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=in)
Square gradient Large: progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=out)
Cross-increasingly small: progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=in)
Cross-increasingly large: progid: DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=out)
Star shape getting bigger: progid:DXImageTransform.Microsoft.Iris(irisstyle=star,motion=out)
Star shape getting smaller: progid:DXImageTransform. Microsoft.Iris(irisstyle=star,motion=in)
The circle gets bigger: progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=out)
The circle gets smaller: progid:DXImageTransform.Microsoft. Iris(irisstyle=circle,motion=in)
The diamond becomes smaller: progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=in)
The diamond becomes larger: progid:DXImageTransform.Microsoft.Iris(irisstyle= diamond,motion=out)
The plus sign gets bigger: progid:DXImageTransform.Microsoft.Iris(irisstyle=plus,motion=out)
The plus sign gets smaller: progid:DXImageTransform.Microsoft.Iris(irisstyle=plus, motion=in)
　Erasing upward: progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=up)
　Erasing downward: progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=down )
　Erasing to the left: progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=left)
　Erasing to the right: progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=right)
Shrink the left and right middle parts: progid:DXImageTransform.Microsoft.Barn(motion=in,orientation=vertical)
Randomly dissolve: progid:DXImageTransform.Microsoft.RandomDissolve(enable=true)
Expand the middle part up and down: progid:DXImageTransform .Microsoft.Barn(motion=out,orientation=horizontal)
Expand the middle left and right: progid:DXImageTransform.Microsoft.Barn(motion=out,orientation=vertical)
Random horizontal lines: progid:DXImageTransform.Microsoft.RandomBars( orientation=horizontal)
Random vertical lines: progid:DXImageTransform.Microsoft.RandomBars(orientation=vertical)
Upper and lower middle shrink: progid:DXImageTransform.Microsoft.Barn(motion=in, orientation=horizontal)
Standard Gradient transformation: BlendTrans(enabled=true,percent=10)
Adjustable gradient transformation: progid:DXImageTransform.Microsoft.Fade(enabled=ture,overlap=1.0)
Insert to the lower right: progid:DXImageTransform.Microsoft .Inset(enabled=ture)
Hide stretch: progid:DXImageTransform.Microsoft.Stretch(stretchstyle=hide)
Push stretch: progid:DXImageTransform.Microsoft.Stretch(stretchstyle=push)
Rotation stretch: progid:DXImageTransform.Microsoft.Stretch(stretchstyle=spin)
Counter clock: progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=wedge)
Radiation ray: progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=radial)
Mosaic effect: progid:DXImageTransform.Microsoft.Pixelate(maxSquare=20)
Clock: progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=clock)
Ladder lower left: progid:DXImageTransform.Microsoft.Strips(motion=leftdown )
The upper right of the ladder: progid:DXImageTransform.Microsoft.Strips(motion=rightup)
The upper left of the ladder: progid:DXImageTransform.Microsoft.Strips(motion=leftup)
The lower right of the ladder: progid:DXImageTransform.Microsoft. Strips(motion=rightdown)
Spiral shrinkage: progid:DXImageTransform.Microsoft.Spiral(gridSizeX=20,gridSizeY=20)
Windmill rotation: progid:DXImageTransform.Microsoft.Wheel(spokes=20)
Zigzag: progid:DXImageTransform.Microsoft.Zigzag(gridSizeX=20,gridSizeY=20)
H blinds: progid:DXImageTransform.Microsoft.Blinds(bands=6, direction=down)
: progid:DXImageTransform. Microsoft.Blinds(bands=6,direction=up)
　：progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=down)
　：progid:DXImageTransform.Microsoft.Blinds(bands=60,direction= up)
　V blinds: progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=right)
　：progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=left)
　　：progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=right)
　　：progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=left)
　　交换式幻灯片：progid:DXImageTransform.Microsoft.Slide(slidestyle=swap,bands=1)
　　：progid:DXImageTransform.Microsoft.Slide(slidestyle=swap,bands=20)
　　推动式幻灯片：progid:DXImageTransform.Microsoft.Slide(slidestyle=push,bands=1)
　　：progid:DXImageTransform.Microsoft.Slide(slidestyle=push,bands=20)
　　隐藏式幻灯片：progid:DXImageTransform.Microsoft.Slide(slidestyle=hide,bands=1)
　　：progid:DXImageTransform.Microsoft.Slide(slidestyle=hide,bands=20)
　　模糊推进：progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=0,motion=forward)
　　：progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=0,motion=reverse)
　　：progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=1,motion=forward)
　　：progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=1,motion=reverse)
　　纵向棋盘：progid:DXImageTransform.Microsoft.CheckerBoard(direction=right,squaresX=12,squaresY=12)
　　：progid:DXImageTransform.Microsoft.CheckerBoard(direction=left,squaresX=12,squaresY=12)
　　：progid:DXImageTransform.Microsoft.Checkerboard(direction=right,squaresX=2,squaresY=2)
　　：progid:DXImageTransform.Microsoft.Checkerboard(direction=left,squaresX=2,squaresY=2)
　　：progid:DXImageTransform.Microsoft.Checkerboard(direction=right,squaresX=60,squaresY=60)
　　：progid:DXImageTransform.Microsoft.Checkerboard(direction=left,squaresX=60,squaresY=60)
　　横向棋盘：progid:DXImageTransform.Microsoft.CheckerBoard(direction=down,squaresX=12,squaresY=12)
　　：progid:DXImageTransform.Microsoft.CheckerBoard(direction=up,squaresX=12,squaresY=12)
　　：progid:DXImageTransform.Microsoft.Checkerboard(direction=down,squaresX=2,squaresY=2)
　　：progid:DXImageTransform.Microsoft.Checkerboard(direction=up,squaresX=2,squaresY=2)
　　：progid:DXImageTransform.Microsoft.Checkerboard(direction=down,squaresX=60,squaresY=60)
　　：progid:DXImageTransform.Microsoft.Checkerboard(direction=up,squaresX=60,squaresY=60)