Filters in CSS

A few days ago when I was doing an app, I used a filter. Before I just know that there is such a thing, but the specific knowledge point in fact I am not very clear, so in order to allow themselves to deep memory, specifically to record it.

First, the filter identifier: "Filter"; Syntax: style= "Filter: Filter Properties: (Parameter)"

Second, the degree of support:

Filter attribute table supported above IE4.0

Filter Effect Description:

Alpha Setting transparency
Blur Creating a blur effect
Chroma set the specified color to transparent
DropShadow creates an offset image contour, which casts shadows
Fliph Horizontal reversal
FLIPV Vertical Inversion
Glow adds light to the outer boundary of the object
Grayscale reduce the color of the picture
Invert color, saturation, and luminance values completely invert to create a negative effect
Light projection on an object
Mask creates a transparent film for an object
Shadow creates a solid outline of an object, that is, the shadow effect
Wave in the X-and y-axis to disrupt pictures with sinusoidal ripples
Xray Show only the outline of an object

Third, the filter's various properties (emphasis) Detailed:

1.Alpha Filter to set transparency

Law: Filter:alpha (Enabled=benabled,opacity=iopcity,finishopacity=ifinishopacity,style=istyle,startx=ipercent, Starty=ipercent,finishx=ipercent,finishy=ipercent)

Many parameters, but some parameters are optional parameters, not all parameters must be used OH.

Enabled Boolean value: True |false
(optional parameter) True: Default value, filter activation
Flase: Filter is forbidden

Opacity represents the degree of transparency: the range is from 0~100, they are actually in the form of percentages. That is to say, 0 is completely transparent and 100 is completely opaque;

Finishopacity is an optional parameter that you can use to specify the transparency at the end if you want to set the transparency effect of the gradient. The range is also 0 to 100;

style Specifies the shape characteristics of the transparent area.
0 for Unified shape
1 for linear
2 Stands for radial
3 stands for rectangles;

StartX represents the x-coordinate of the beginning of the gradient transparency effect;

Starty represents the y-coordinate of the beginning of the gradient transparency effect;

FINISHX represents the x-coordinate of the end of the gradient transparency effect;

Finishy represents the y-coordinate of the end of the gradient transparency effect;

Example: style= "Filter:alpha (opacity=10,style=3);"

The front is under IE, the following transparency settings are supported in the public browser, when writing code, it is recommended to write the best two, when one property does not work, another property call is also good.

2. Blur Blur effect .

Syntax: Filter:blur (add=iadd,direction=idirection,strength=istrength);

Parameters:

Add it specifies whether the image is altered to blur, and the blur effect is done in a clockwise direction.
This is a Boolean value: True (default) or FALSE, or 1 and 0,1 for Yes, and 0 for No. Add=false (or "0") when the blur filter does not work, take true (or not "0" value) when the Blur filter works;

The direction is used to set the direction of the blur with a value of 0-360 degrees, where 0 degrees represents a vertical upward and then every 45 degrees is a unit. Its default value is 270 degrees to the left.

Strength it represents the width of the number of pixels as a shadow, or it can be simply understood as the length of a shadow. It can only be specified with integers, the default value is 5 pixels, and you can specify the length of the shadow according to your actual needs.

Examples: Filter:blur (1px),-webkit-filter:blur (1px),-moz-filter:blur (1px),-o-filter:blur (1px);-ms-filter:blur (1px); The larger the number, the more blurred,

3, Chroma filter gives the image a specific color transparency ;

Syntax: "Filter:chroma (Color=color)";

Example: style= "Filter:chroma (color= #ceff9c)";

4. DropShadow add shadow effect to object. It works by creating an offset, plus a darker one.
Syntax: style= "Filter:dropshadow (color=pink,offx=-5,offy=-5,positive=1)"

Parameters:

The ' Positive ' parameter is a Boolean value that, if True (not 0), creates a visible projection for any non-transparent pixels.

If it is "Fasle (0)", then the transparent effect code for the transparent pixel section is as follows:

OFFX: The amount of horizontal displacement of the shadow relative to the original object, set the value to an integer in pixels. If you move horizontally to the right, the positive number is negative.

Offy: The amount of vertical displacement of the shadow relative to the original object, set the value to an integer in pixels. If you move vertically downward, a positive number is negative;

/** Note:
* 1. The appearance of the shadow is affected by the Border-radius style;
* 2. : pseudo-elements such as after and: before inherit the effect of shadows.
*/

Example: style= "Filter:dropshadow (color=gray,offx=5,offy=5.positive=0)"

5, Fliph horizontal inversion, FLIPV vertical inversion

Syntax: Filter:fliph () FILTER:FILHV ()

6. Glow increases the light efficiency for the outer boundary of the object

Syntax: {filter:glow (color=color,strength)};

Parameters:

Color: Sets the colour of the edge glow, in #rrggbb format, or name;
Strength: Sets the intensity of the edge glow and sets the integer value to 1~255;

Example: style= "Filter:glow (color=yellow,strength=10)"

7, Gray Gray filter and no parameters, Invert,xray filter

Syntax: style= "Filter:gray";    /*ie5--9*/style= "Filter:invert"; Style= "Filter:xray";

The gray filter is to turn a picture into a grayscale (black-and-white) graph; (Wenchuan after the big earthquake, a lot of website tones are grayed out, this is the code to achieve);

Invert filter is to flip the object's visual properties, including color, saturation, and brightness values, similar to the negative effect, the invert filter has no parameters, I call it: anti-color;

The Xray filter is to let the object reflect its outline and highlight these contours, known as the "X" light, Xray only the outline of the object.

8, grayscale reduce the color of the picture

Syntax: style= "Filter:grayscale ();";

/* Grayscale value can be a percentage or fraction of the value of 0-1 */

Example: style= "Filter:grayscale (1);
-webkit-filter:grayscale (1);
-moz-filter:grayscale (1);
-o-filter:grayscale (1);
-ms-filter:grayscale (1); "

Personally think: Grayscale and Gray have the same effect, but a parameter setting, a no parameter settings.

9, light projection on an object, it can control multiple light sources to an object, to adjust the brightness, color, grammar;

Syntax: Filter{light}

This property simulates the projection effect of a light source. Once you have defined the "Light" Filter property for an object, you can call its "method" to set or change the property. The "Light" available methods are:
· Addambient Adding a surrounded light source
· Addcone Added Tapered light source
· Addpoint Adding Point Light
· Changcolor change the color of light
· Changstrength change the intensity of the light source
· Clear clears all the lights
· Movelight Mobile Light
The method is detailed:
(1) addambient (ired,igreen,iblue,istrength): Adds ambient light to the filter. Environment light is no direction, and evenly sprinkled on the surface of the page. Ambient light has a color and intensity value that can be more color for the object Tian Jia. It is usually used in conjunction with other light. no return value.
IRed: Required option. Integer value (integer). Specifies the red value. The value range is 0-255.
Igreen: Required option. Integer value (integer). Specifies the green value. The value range is 0-255.
Iblue: Required option. Integer value (integer). Specifies the blue value. The value range is 0-255.
Istrength: Required option. Integer value (integer). Specifies the intensity of the light. The value range is 0-100.

(2) ChangeColor (ilightnumber,ired,igreen,iblue,fabsolute): Change the color of the light. no return value.
Ilightnumber: Required option. Integer value (integer). Specifies the identifier of the light.
IRed: Required option. Integer value (integer). Specifies the red value. The value range is 0-255.
Igreen: Required option. Integer value (integer). Specifies the green value. The value range is 0-255.
Iblue: Required option. Integer value (integer). Specifies the blue value. The value range is 0-255.
Fabsolute: Required option. A Boolean value (Boolean). Specifies whether the change is to replace the absolute value of the current setting or to the relative values of the current setting. This parameter is not equal to zero to indicate absolute value. Otherwise, the relative value is used.


You can define the virtual location of the light source, and control the position of the light focus by adjusting the values of the X and Y axes, and you can also adjust the form of the light source (point light or cone light) to specify whether the light is blurred, the color of the light, the brightness, etc.

Of If you set up a light source dynamically, you may have some unexpected effects back.

(not tested 0)
Style= "filter:light (); width:400; height:300" onload= "Javascript:this.filters.light.addAmbient ( 10,250,100,55) "

OnMouseMove= "Javascript:this.filters.light.changeColor (0,150,100,50,0)"　　　　　

1 0, mask for an object to establish a transparent film, mask, mask, set the shielding effect of the object, as if the seal of the model to print the appearance;

Use the ' MASK ' property to create a film covering the surface of the object, as if it were wearing tinted glasses to look at an object.

Syntax: style= "Filter:mask (Color=color)";

Example: style= "Filter:mask (color= ' #0000ff ')";

11, Shadow Create a solid contour of an object, that is, the shadow effect; In addition to having a dropshadow shadow effect, the shadow gradient has more effects on the shadow gradient.

Syntax: Filter:shadow (color=color,direction=direction)

Parameter: Color: #rrggbb格式. Direction: Used to set the direction of the dynamic blur effect, the total unit is 360°,0 for vertical upward, and a unit per 45 °, the default is 225 degrees; Example: Filter:shadow (color= "#6699CC", direction= "135") ；

12, Wave in the x-axis and y-axis using sinusoidal ripple to disrupt the picture
Syntax: Filter:wave (add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)

Description: Add: Typically 1, or 0. Freq: deform value. Lightstrength: Percent of deform. Phase: Percentage of angular distortion. Strength: Deformation strength. Examples: Filter:wave (add= "0", phase= "4", freq= "5", lightstrength= "5", strength= "2");

13. Saturation of saturate

Syntax: style= "filter:saturate ();"

Instance:

/**
* Effect range, value range >=0 number or percentage, 1 is no effect, 0 is grayscale
*/
-webkit-filter:saturate (2);
-moz-filter:saturate (2);
-o-filter:saturate (2);
-ms-filter:saturate (2);
Filter:saturate (2);

14, Hue Rotate hue rotation filter/* Anti-tonal value of 0-360deg*/

Syntax: style= "filter:hue-rotate ();";

Instance:

/** format, filer:hue-rotate (Effect range)
* Effect range, value fan 0deg~365deg,0 (default) is no effect
*/
-webkit-filter:hue-rotate (200DEG);
-moz-filter:hue-rotate (200DEG);
-o-filter:hue-rotate (200DEG);
-ms-filter:hue-rotate (200DEG);
Filter:hue-rotate (200DEG);

The 15:sepia filter is the whole sepia treatment of a picture or element, which is the effect of an old photo.

Syntax: style= "filter:hue-rotate ();";

Instance:

/* Old photo effect value 0-1 */

Filter:sepia (0.5);
-webkit-filter:sepia (0.5);
-moz-filter:sepia (0.5);
-o-filter:sepia (0.5);
-ms-filter:sepia (0.5);

16. brightness brightness

Syntax: style= "filter:brightness ();";

Instance:

/** format, filer:brightness (Effect range)
* Effect range, value range >=0 number or percentage, 1 is no effect
*/
-webkit-filter:brightness (2);
-moz-filter:brightness (2);
-o-filter:brightness (2);
-ms-filter:brightness (2);
Filter:brightness (2);

17. Contrast contrast Ratio

/** format, Filer:contrast (Effect range)
* Effect range, value range >=0 number or percentage, 1 is no effect
*/
-webkit-filter:contrast (2);
-moz-filter:contrast (2);
-o-filter:contrast (2);
-ms-filter:contrast (2);
Filter:contrast (2);

Some of the previous content I did not test, but the saturation of the back, contrast brightness what, I have to test oh ...

Filters in CSS