CSS Filters Go

Basic filter--can be directly applied to the object, and effective immediately, mainly:

1). alpha--Channel

2). blur--Blur

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--Anti-color

) mask--Mask

One) shadow--Shadow

X-ray--x Light Effect

Emboss or engrave--Relief

) wave--Wave

Advanced Filter-with JS and other scripts to use, to produce more brilliant change effect, mainly has

1) Blendtrans--Fade transform

2) revealtrans--Transform

3) Light--lighting

Alpha Filter:alpha (OPACITY=OPACITY,FINISHOPACITY=FINISHOPACITY,STARTX=STARTX,STARTY=STARTY,FINISHX=FINISHX, Finishy=finishy); opacity: transparency level, value 0-100 (0 fully transparent)

Style: shape characteristics of transparent areas, value 0,1,2,3
0-Uniform shape 1-linear 2--circular radial gradient 3--rectangular radial gradient
X, Y, this is the coordinate parameter.

Source: http://blog.csdn.net/oscar999/article/details/6817648

<!--==1. Static filter ==-->

/* Entire Web page dimmed */

{Filter:gray;} /* Entire Web page dimmed */

{filter:progid:DXImageTransform.Microsoft.BasicImage (grayscale=1); */* The object is displayed in grayscale with a value of 1 o'clock and additional properties can be added */}

{Filter:invert;} /* The entire Web page reversed */

{Filter:xray;} /*X Light Irradiation * *

/*png background compatible with IE6 notation */

{Background:url (h2-bg.png) no-repeat;

background:none\9;

Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingmethod=crop,src= "h2-bg.png");}

/* Transparency */

{opacity:0.3;/* supports Firefox */

Filter:progid:DXImageTransform.Microsoft.Alpha (opacity=30);/* Transparency, attributes that can be added in the */}

/* Gradient Color layer */

{filter:progid:DXImageTransform.Microsoft.Gradient (startcolorstr= #00BBCCDD, endcolorstr= #FFFF0000)}

/* Blur effect */

{Filter:progid:DXImageTransform.Microsoft.Blur (makeshadow=true,shadowopacity=0.1,pixelradius=9)}

/* Add shadow Effect */

{Filter:progid:DXImageTransform.Microsoft.DropShadow (color= #AAFF0000, positive=false,offx=4,offy=8);}

/* Add brilliance to the object (i.e. add glow at edge) */

{Filter:progid:DXImageTransform.Microsoft.Glow (strength=5,color= #676767)}

<!--==2. Live Filter ==-->

/* Toggle effect (0 to 23 clock) */

{Filter:revealtrans (transition=12,duration=5);}

/* Analog open/close/

{Filter:progid:DXImageTransform.Microsoft.Barn (Motion=in,orientation=horizontal)}

/* Grid push-pull conversion effect on chess board */

{Filter:progid:DXImageTransform.Microsoft.CheckerBoard (Squaresx=15,squaresy=10,direction=left)}

/* Effect of simulation blinds */

{Filter:progid:DXImageTransform.Microsoft.Blinds (Bands=50,direction=right)}

/* Fade fade effect */

{Filter:progid:DXImageTransform.Microsoft.Fade ()}

/* Radial Erase effect */

{filter:progid:DXImageTransform.Microsoft.RadialWipe (wipestyle=radial);}

/* Random Line effect */

{Filter:progid:DXImageTransform.Microsoft.RandomBars ()}

Http://www.w3cplus.com/css3/ten-effects-with-css3-filter

Black and white photo filter:gray;
X-ray photo Filter:xray;
Wind motion fuzzy Filter:blur (add=true,direction=45,strength=30);
Sinusoidal Ripple Filter:wave (add=0, freq=60, Lightstrength=1, phase=0, strength=3);
Translucent effect Filter:alpha (OPACITY=50);
Linear transparent Filter:alpha (opacity=0, finishopacity=100, style=1, startx=0, starty=0, finishx=100, finishy=140);
Radiation-Transparent Filter:alpha (opacity=10, finishopacity=100, style=2, startx=30, starty=30, finishx=200, FinishY=200);
White Transparent Filter:chroma (color= #FFFFFF);
Reduce color filter:grays;
Negative effect Filter:invert;
Flip Filter:fliph left and right;
Vertical Flip FILTER:FLIPV;
Projection effect Filter:progid:dXImageTransform.Microsoft.DropShadow (color= #cccccc, offx=5,offy=5,positives=true);
Mosaic filter:progid:dXImageTransform.Microsoft.Pixelate (maxsquare=3);
Luminous effect Filter:progid:dXImageTransform.Microsoft.Glow (color= #cccccc, strength=5);
Soft Edge effect Filter:alpha (opacity=100, finishopacity=0,style=2

Filter history

In fact, this filter is CSS1 property, but because the old version of IE4.0~IE9 support is not very cold, the browser support is not stable, so this attribute can only be used as experimental technology to observe. However, for those who want to explore the filter of IE, how to simulate the work of a peer like CSS3 may be charged.

This property is my personal profile for CSS PS , why, because many of its properties are more or less coming in from the PS extension,

Even when we use CSS3 to write a gorgeous transition animation, we can also consider to let our IE also have this function, then the filter in IE is reflected.

First, filter filter interface

In IE filter , it is divided into static filters (Visual Filters) and transition transitions (transitions Reference), the former is the effect can set the element's opacity, gradient, blur, contrast, lightness and so on, the latter focus on the animation effect of IE.

For the use of IE Filter property, the necessary prefix is required, for this IE in the filter specification is as follows:

. Test{filter:progid:dximagetransform.microsoft.    /*. The following are the various filters and transition functions */}/* such as: Blur filter */.blur{filter:progid:dximagetransform.microsoft.blur ()/    *. The first letter of the function must be capitalized, the parentheses () The various values of the filter inside */}

For why it is not very clear at the beginning of the writing progid:DXImageTransform.Microsoft , it is estimated to distinguish it. Is there any one who knows the trouble to put an address to say ha.

1.AlphaImageLoader, this property is mainly for PNG transparent image for the opacity of processing, why so to say, because the IE6 png transparent picture is actually opaque, the display will be gray background.

Grammar:

Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader ()/* Full wording */FILTER:PROGID:D XImageTransform.Microsoft.AlphaImageLoader (enabled= ' true ', sizingmethod= ', src= ' mini.jpg ')

Its value includes 2 optional values, a required value.

Properties	features	Description
Enabled	Enabled	Optional value,boolean boolean value, default value of Ture, filter enabled, false to not enable filter. All of the filter has this property value, the following is not more than one by one said.
Sizingmethod	Sizingmethod	An optional value that is set or retrieved in such a way as to display how an image is displayed at the object boundary. There are three values: crop crop the image to fit the object's dimensions image , and, by default, expand or decrease the object's bounds to fit the image's dimensions scale , and stretch or shrink the image to fill the bounds of the object;
Src	Src	Must value, introduce the picture.

Use the ie6~8 in your hand to preview the official Demo→alphaimageloader

2.Gradient, gradient filter.

Grammar:

Filter:progid:DXImageTransform.Microsoft.Gradient ()/* Full wording */filter:progid:dximagetransform.microsoft.gradient ( Enabled= ' ture ', gradienttype= ' 1 ', startcolorstr= ' #00000000 ', endcolorstr= ' #FFFF3300 ')

td> 

properties	properties	description
enabled	enabled	Optional Value, Boolean boolean, default = Ture, enable filter; False to not start With filters.
startcolorstr	startcolor	Set or retrieve the start opacity gradient value, integer int, specify an integer value, value Changes from 0 (transparent[Transparent]) to 4294967295 ([white opaque]).
	startcolorstr	Sets or retrieves the starting color value, string, value from #ff000000 to #FFFFFFFF with the default value: #FF000000, such as a value of: #AARRGGBB, then AA represents the transparency ALPHA,RR represents the Red 16 binary value, GG represents the Green 16 binary value, and BB represents the Black 16 binary value.
	endcolor	Set or retrieve the gradient value of the end opacity, as above, rarely used.
	endcolorstr	Set or retrieve the ending color value as above
gradienttype	Sets the direction of the gradient. There are two values, 1 for the horizontal direction, and 0 for the vertical gradient.

Use the ie6~8 in your hand to preview the official Demo→gradient Filter

Note that when we look at the following style property, we actually find that the value in STARTCOLORSTR is not the same as our usual #ffffff

Write write to find this filter attribute a lot, estimated space is very large, then temporarily sub-chapter to write well, otherwise the space is too big, write people want to hang up, let alone see people can such an egg pain to look down?

Second, filter static filter

1.AlphaTo adjust the opacity of the object's contents.

Grammar:

Filter:progid:DXImageTransform.Microsoft.Alpha ()/* Full notation */filter:progid:dximagetransform.microsoft.alpha (enabled = ' ture ', gradienttype= ' 1 ', startcolorstr= ' #00000000 ', endcolorstr= ' #FFFF3300 ')

Style, set or adjust the opacity. 0 for default, 1 for linear opacity, 2 for radial gradient, 3 for rectangle gradient

Opacity, sets or adjusts the opacity value. 0~100 value, where 0 default value is full transparent and 100 is fully opaque

Finishopacity, sets or adjusts the last opacity value. 0~100 value, where 0 default value is full transparent and 100 is fully opaque

StartX, sets or adjusts the start position of the horizontal opacity, the default value is 0, which starts at the far left of the object.

FINISHX, sets or adjusts the horizontal opacity end position, the default value is 0

Starty, sets or adjusts the vertical opacity start position, with a default value of 0

Finishy, sets or adjusts the vertical opacity end position, the default value is 0

Use the ie6~8 in your hand to preview the official Demo→alpha Filter

2.BasicImage, adjusts the color processing, image rotation, or opacity of the object's contents.

Filter:progid:DXImageTransform.Microsoft.BasicImage ()/* Full wording */FILTER:PROGID:D XImageTransform.Microsoft.BasicImage (grayscale= ' x ', xray= ' x ', mirror= ' x ', invert= ' x ', opcity= ' x ', rotation= ' x ')

Grayscale, sets or adjusts the grayscale value of the object.

Invert, sets or adjusts the inverted phase of the object.

Opacity, sets or adjusts the opacity of the object.

Mask, sets or adjusts whether an object's RGB is a Mashcolor value, 0 default values, displays normal RGB values, and 1 indicates changes to Mashcolor (not commonly used)

Mirror, sets or adjusts object mirroring. 0 normal display, 1 content object will turn over.

Rotation, set or adjust the rotation of the object, 0 normal display, 1 for rotation 90°,2 for rotation 180°,3 for rotary 270°

XRay, set or adjust the X-ray of the object, Boolean, 0 normal display, 1 for X-ray, a bit like we go to the hospital to shoot X-rays effect.

Use the ie6~8 in your hand to preview the official Demo→basicimage Filter

3.Blur, sets the fuzzy value of the object.

Filter:progid:DXImageTransform.Microsoft.Blur ()/* Full wording */filter:progid:dximagetransform.microsoft.blur ( pixelradius= ' x ', makeshadow= ' x ', shadowopacity= ' x ')

Pixelradius, sets the blur radius of the object, 1~100 the value.

Makeshadow, sets whether the object is projected, Boolean, true, and False

Shadowopacity, sets the object projection opacity, 0.0~1.0, if Makeshadow is False then the value is invalid.

Use the ie6~8 in your hand to preview the official Demo→blur Filter

4.Chroma , set the color transparency of the object

Filter:progid:DXImageTransform.Microsoft.Chroma ()/* Full spelling */filter:progid:dximagetransform.microsoft.chroma (Color = ' x ')

Color to set the value of the colors.

5.Compositor , set the composition color of the new object content, this translation is a bit of a mouthful, probably means: 2 objects, to show which one or hide which, or show their comparison after the new object.

Filter:progid:DXImageTransform.Microsoft.Compositor ()/* Full wording */FILTER:PROGID:D XImageTransform.Microsoft.Compositor (function= ")

6.DropShadow To set the object's projection effect.

Filter:progid:DXImageTransform.Microsoft.DropShadow ()/* Full wording */FILTER:PROGID:D XImageTransform.Microsoft.DropShadow (offx= ' x ', offy= ' x ', color= ' x ', positive= ' x ')

OFFX, sets the x displacement of the projection, the value of the unit, the default is 5

Offy, sets the Y-displacement of the projection, the unit value, the default value is 5

Color, setting the value of the drop shadow

Positive, sets the transparent or non-transparent projection.

7.Emboss To set the object's Emboss effect.

Filter:progid:DXImageTransform.Microsoft.Emboss ()/* Full wording */filter:progid:dximagetransform.microsoft.emboss (bias= ‘‘)

8.Engrave , sets the carving effect of the object.

Filter:progid:DXImageTransform.Microsoft.Engrave ()/* Full wording */filter:progid:dximagetransform.microsoft.engrave ( Bias= ")

9.Glow , sets the glow effect of the object.

Filter:progid:DXImageTransform.Microsoft.Glow ()/* Complete */filter:progid:dximagetransform.microsoft.glow (color= ", Strength= ")

Color to set the glow color.

Strength, set the width of the glow, value units

10.Light , set the brightness of the object

Filter:progid:DXImageTransform.Microsoft.Light ()

Addambient, adding object ambient light

Addcone, add cone light source

Addpoint Adding Point Light

ChangeColor, changing the brightness color

Changestrength, changing the brightness length

Clear, remove brightness

Movelight, move the light focus.

11.ICMFilter , set the object's color content to change so that it displays the color of the device as it is printed.

When the official no DEMO,IE9, this filter applies only to the screen content display effect, when the content is printed, will not be applied.

12.MaskFilter , set the object content transparent or opaque color.

Filter:progid:DXImageTransform.Microsoft.MaskFilter ()/* Full wording */FILTER:PROGID:D XImageTransform.Microsoft.MaskFilter (color= ")

13.Matrix, resize, rotate, or flip a Content object transformation using a matrix.

Filter:progid:DXImageTransform.Microsoft.Matrix ()

14.MotionBlur, set the object blur, after testing the demo feel a bit like linear blur, is the moonlight cast down the uneven blur effect.

Filter:progid:DXImageTransform.Microsoft.MotionBlur ()/* Full wording */FILTER:PROGID:D XImageTransform.Microsoft.MotionBlur (direction= ", strength=", add= ")

Direction, sets the object blur direction, illuminates from the 0°~315°.

Strength, set object blur range, unit value, initial value of 5

ADD, sets whether the image blur is overwritten on the original, Boolean, true to overwrite, false means no overwrite

15.Wave, set object to ripple filter effect

Filter:progid:DXImageTransform.Microsoft.Wave ()/* Complete */filter:progid:dximagetransform.microsoft.wave (add= ", Lightstrength= ", phase=", strength= ",  freq=")

ADD to set whether the filter overrides the original image, Boolean, true to overwrite, false to not overwrite

Lightstrength, brightness intensity, 0~100 value, the larger the value, the more obvious the filter effect

Phase, relative offset value, 0~100 value

Strength, sets the wave strength, the default value is 5, the larger the value, the more obvious the wave effect.

Frep, set the wave frequency, the default value is 3, the larger the value, the more obvious the wave effect.

16.Shadow, sets the object shadow effect.

Filter:progid:DXImageTransform.Microsoft.Shadow ()/* Full spelling */filter:progid:dximagetransform.microsoft.shadow (color = ", direction=", strength= ")

Color to set the shadow color.

Direction, sets the direction of the shadow, the angle is also from the 0°~315° value (with the PS projection effect is very similar. ）

Strength, set the projection intensity, the larger the value the more blurred.

Source: http://www.qianduan.net/guan-yu-ie-zhong-css-filter-lv-jing-xiao-zhi-shi.html

CSS Filters Go