Let's go deep into CSS style sheet filters

css| Filter | Style sheet style sheet is a technology that provides enhanced supplemental services for Hypertext label languages, and can be decorated with exquisite decorations for each HTML label. HTML-only Web pages, the ability to modify the parts of the page is limited and the statement annoying lock, the style sheet is a powerful technique to make up this shortcoming, it is simple in sentence grammar, as long as in the source code to insert a style statement can easily achieve any text within the page color, background, border, line spacing, the deletion and modification of the word spacing and other functions, Make the page more lively, so as to achieve satisfactory results. Of course, the style sheet's power is also dependent on its filter function. Because of the filter, we can easily create a "professional" artistic effect. In order to help you use the good style sheet filter efficiently, I will introduce the various aspects of the style sheet filter in detail.

One, what is the style sheet filter

When it comes to filters, it's not about what you do with the image, it's about decorating the object in the browser with that property. Style sheet filters are actually a new extension part of the stylesheet, which allows you to add visual filters and conversion effects to a standard HTML element, such as pictures, text, and other objects, to add a few rich changes to the page. If you have the basics of scripting languages and the ability to combine filter effects with JavaScript-like scripting code, you can have a powerful dynamic interactive document tool created with the combination of style sheet filters and scripting. There are 13 filters available now, but to appreciate the effects of these filters, you must require that the user's browser must be on top of the ie4.0/nc6.0 because only these versions of the browser can support the style sheet filter effect.

Second, commonly used style sheet filters

As the style sheet technology matures, its filter function and variety are increasing. If users can skillfully mix and use them, they can produce unexpected results. On the operation, the user only need to understand the actual effect of the specific filter, you can fine-tune the actual. In order to enable people to use the filter, the author below a number of common filter functions and parameters are described in detail as follows:

1, Alpha filter

Function: The filter can achieve a variety of melting effect, if you combine the filter with the Web scripting language, the filter parameters to deal with, you can easily make the fade effect.

Syntax: {filter:alpha (opacity=opacity,finishopacity=finishopacity,
Style=style,startx=startx,starty=starty,finishx=finishx,finishy=finishy)}

Parameters: The opacity parameter represents the initial transparency of the image, its default value is from 0 to 100, 0 represents full transparency, and 100 is completely opaque; finishopacity is an optional parameter, and if you want to set the transparency effect of the gradient, you can use them to specify the transparency at the end. The range of action is also 0 to 100;style, which represents the shape characteristics of the transparent region, where "0" represents the uniform shape, and "1" represents the linear. "2" represents a radial, "3" is a rectangle; StartX represents the x-coordinate at the beginning of the gradient transparency effect, starty represents the Y coordinate at the beginning of the gradient transparency effect, and the finishx represents the x-coordinate at the end of the gradient transparency effect, finishy the Y coordinate at the end of the gradient transparency effect.

2. Blur Filter

Function: The filter is mainly to make the image produce a fuzzy effect.

Syntax: {filter:blur (Add=add,direction=direction,strength=strength)}

Parameters: The filter consists of three parameters, where add is used to specify whether the image is changed to the Impressionist fuzzy effect, the blur effect is in the clockwise direction, its value should be ture or false;direction parameter is used to set the fuzzy direction, where 0 degrees represents vertical upward, Each 45 degree is one unit, the default is 270 degrees to the left; the strength parameter represents how many pixels the width of the pixel will be affected by the blur, the default parameter value is 5 pixels, and the parameter value can only be specified with an integer.

3, oblique shadow filter

Function: The filter is mainly for the object to create the shadow effect of the contour, it can be in the specified direction to establish the object projection;

Syntax: {Filter:shadow (Color=color,direction=direction)}

Parameters: The shadow filter has only two parameters, in which color represents the background of the projection, which is replaced by English letters, such as the projection background is red, you should set the Color=red;direction parameter is used to set the projection direction, if the number is 0, it represents a vertical projection, In addition, the value is one unit per 45 degrees, and its default value is 270 degrees to the left.

4. Glow Filter

Function: The filter can produce a luminous effect to the image or text;

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

Parameter: The color parameter of the filter is almost the same as the color parameter function of the shadow filter, but the color parameter is used to set the glow color; The strength parameter is used to specify the luminous intensity, and the value is any integer between 1 and 255.

5. Light Filter

Role: Light filters are analog light source to project text or images, so that images and text can produce a certain projection effect;

Syntax: {filter:light}

Parameters: Once you have defined the "Light" Filter property for an object, you can call its method to set or change the property, which is available in the following ways: The Addambient method is used to enclose the light source, and the Addcone method is used to add a cone light source. The Movelight method is used to move the light source, Changstrength method is used to change the intensity of the light source, Changcolor method is used to change the color of the light, the clear method is used to remove all light sources.

6, Mask filter

Function: The filter can be used to create an object covering the surface of the film, the effect is like wearing tinted glasses to see the same thing.

Syntax: {filter:mask (Color=color)}

Parameter: The color parameter of the filter represents the colors that overwrite the surface of the object, for example, if the mask color is green, then the color=blue should be set.

7, Shadow filter

Role: The shadow filter is to add a shadow effect to an object, which works by creating an offset, plus color.

Syntax: {Filter:dropshadow (color=color,offx=offx,offy=offy,positive=positive)}
Parameter: The color parameter in the filter represents the shadow's projection, OFFX represents the offset of the horizontal shadow, Offy represents the offset of the vertical shadow, the positive parameter is a Boolean value, and if true, creates a visible projection for any non-transparent pixel. If it is fasle, a transparent effect is created for the transparent pixel portion.

8, Gray filter

Function: This filter is mainly to convert image objects to grayscale display.

Syntax: {Filter:gray}

Parameter: The filter has no parameters.

9. Flip Filter

Role: Flip filter is mainly to achieve the image object's horizontal or vertical flip effect.

Syntax: {Filter:filph} {FILTER:FILPV}

parameter, the filter also takes no parameters, where {Filter:filph} is flipped horizontally, and {FILTER:FILPV} is a vertical flip.

10, X-ray filter

Role: The X-ray filter allows an object to reflect its contours and highlight the contours.

Syntax: {Filter:xray}

Parameter: The filter itself contains no parameters.

11, Inverted filter

Function: Use this filter to flip all visual properties of objects, including color, saturation, and brightness values.

Syntax: {Filter:invert}

Parameter: The filter has no parameters.

12, Ripple filter

Function: Ripple filter can use sine wave to disturb the image in horizontal and vertical direction, make the image produce the wave effect.

Syntax: {filter:wave (Add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)}

Parameter: The filter's add parameter is a Boolean value that is used to indicate whether you want the object to be scrambled according to the waveform style; The Freq parameter is used to set the ripple frequency, which is to specify how many complete ripples are required to be generated on the object altogether. The Lightstrength parameter can be set to enhance the ripple light and shade, its range is between 0 and 100, the phase parameter is used to set the offset of the sine wave, the strength is to set the amplitude of the sine wave.