|
IE gave us a headache in the early stages of development, but it is also different. It does not support things that 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 of images. It plays a very magical role in website production. CSS filters can make the website more beautiful. In CSS, the filter attribute represents the meaning of filter, which can set the filter effects 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 CSS filter effects 1. Filter: chroma -- Make special colors transparent.
Syntax: STYLE="filter:Chroma(Color=color)"
Label: color: #rrggbb format, arbitrary.
2. Filter: blur - creates a high-speed movement effect, that is, a blurred effect.
Syntax: STYLE="filter:Blur(Add=add,Direction=direction,Strength=strength)"
Note: Add: usually 1, or 0; Direction: angle, 0-315 degrees, step length is 45 degrees; Strength: the value of the effect increase, usually 5.
3. Filter: FlipV--Create a vertical mirror image.
Syntax: STYLE="filter:FlipV"
4. Filter: alpha - Set the transparency level syntax: STYLE="filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)"
Note: Opacity: starting value, ranging from 0 to 100, 0 for transparent and 100 for the original image; FinishOpacity: target value; 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 - Adds glow to the edges of nearby objects.
Syntax: STYLE="filter:Glow(Color=color,Strength=strength)"
Label: Color: luminous color; Strength: strength (0-100)
7.Filter:mask--Create a transparent mask on the object.
Syntax: STYLE="filter:Mask(Color=color)"
8. Filter: Filter: Xray - Makes the object look like it has been illuminated by X-rays.
Syntax: STYLE="filter:Xray"
9.Filter: invert——invert color.
Syntax: STYLE="filter:Invert"
10.Filter:DropShadow -- creates a fixed shadow of an object.
Syntax: STYLE="filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)"
Label: Color: #rrggbb format, arbitrary; Offx: X-axis offset value; Offy: Y-axis offset value; Positive: 1 or 0.
11. Filter: gray--grayscale the image.
Syntax: STYLE="filter:Gray"
12. Filter: wave - ripple effect.
Syntax:filter:Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength)
Label: Add: usually 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)
Label: Color: #rrggbb format; Direction: Angle, 0-315 degrees, step length is 45 degrees.
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 work. You must define the id attribute in style or css, otherwise it will not work.
It only takes one sentence of code to make images switch freely like PPT documents when making a website. It’s very simple! Before converting, we need to understand three basic codes:
Rotation: style="filter: progid:DXImageTransform.Microsoft.BasicImage(rotation:1)"
Remove background color: style="filter:Chroma(Color=#000000)"
Set the gradient color: style="position:relative;left:0px;top:0px;filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ff0000,endcolorstr=#ffff00,gradientType=1)"
Highlight Review: Comprehensive Collection of CSS Filter Effects for Website Construction Below is a comprehensive collection of image conversion filters. I hope it can help you! ! !
Random transformation: progid:DXImageTransform.Microsoft.RevealTrans(enabled=true,transition=23)
Square gradually becomes smaller: progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=in)
Square gradually enlarges: progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=out)
Cross fade: progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=in)
Cross fade: progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=out)
The star shape gradually grows: progid:DXImageTransform.Microsoft.Iris(irisstyle=star,motion=out)
The star shape gradually becomes smaller: progid:DXImageTransform.Microsoft.Iris(irisstyle=star,motion=in)
The circle gradually grows: progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=out)
The circle gradually becomes smaller: progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=in)
Diamond gradually becomes smaller: progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=in)
The diamond gradually grows: progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=out)
Plus sign gets bigger: progid:DXImageTransform.Microsoft.Iris(irisstyle=plus,motion=out)
Plus sign gradually decreases: progid:DXImageTransform.Microsoft.Iris(irisstyle=plus,motion=in)
Erase upward: progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=up)
Erase down: progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=down)
Erase left: progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=left)
Erase right: progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=right)
Shrink the left and right middle parts: progid:DXImageTransform.Microsoft.Barn(motion=in,orientation=vertical)
Random 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)
Shrink the upper and lower middle parts: progid:DXImageTransform.Microsoft.Barn(motion=in,orientation=horizontal)
Standard gradient transformation: BlendTrans (enabled=true, percent=10)
Adjustable gradient transformation: progid:DXImageTransform.Microsoft.Fade(enabled=true,overlap=1.0)
Insert to the bottom right: progid:DXImageTransform.Microsoft.Inset(enabled=true)
Hidden stretch: progid:DXImageTransform.Microsoft.Stretch(stretchstyle=hide)
Push stretch: progid:DXImageTransform.Microsoft.Stretch(stretchstyle=push)
Rotation stretch: progid:DXImageTransform.Microsoft.Stretch(stretchstyle=spin)
Counter-clockwise: progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=wedge)
Radial rays: progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=radial)
Mosaic effect: progid:DXImageTransform.Microsoft.Pixelate(maxSquare=20)
Clock: progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=clock)
Stairs lower left: progid:DXImageTransform.Microsoft.Strips(motion=leftdown)
Stairs upper right: progid:DXImageTransform.Microsoft.Strips(motion=rightup)
Stairs upper left: progid:DXImageTransform.Microsoft.Strips(motion=leftup)
Stairs right down: progid:DXImageTransform.Microsoft.Strips(motion=rightdown)
Spiral contraction: progid:DXImageTransform.Microsoft.Spiral(gridSizeX=20,gridSizeY=20)
Windmill rotation: progid:DXImageTransform.Microsoft.Wheel(spokes=20)
Z-shaped 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)
Swap slide: progid:DXImageTransform.Microsoft.Slide(slidestyle=swap,bands=1)
:progid:DXImageTransform.Microsoft.Slide(slidestyle=swap,bands=20)
Push-style slide: progid:DXImageTransform.Microsoft.Slide(slidestyle=push,bands=1)
:progid:DXImageTransform.Microsoft.Slide(slidestyle=push,bands=20)
Hidden slide: progid:DXImageTransform.Microsoft.Slide(slidestyle=hide,bands=1)
:progid:DXImageTransform.Microsoft.Slide(slidestyle=hide,bands=20)
Blur forward: 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)
Vertical checkerboard: 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)
Horizontal checkerboard: 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)
|
