CSS filter Effects (ii) _ Basic Tutorials

7, Gray, Invert,xray filter

Syntax: {Filter:gray}, {Filter:invert},{filter:xray}

The gray filter turns a picture into a grayscale image; The invert filter flips all of the object's visual properties, including color, saturation, and brightness values; The Xray filter is to let the object reflect its outline and highlight the contour, which is called "X" light.

The effect is as follows:

8, Light Filter

Syntax: Filter{light}

This property simulates the projection effect of the 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 available methods for "LIGHT" are:

• Addambient joins the surrounding light
• Addcone Add cone light source
• Addpoint Add Point Light source
• Changcolor change the color of light
• Changstrength change the intensity of the light source
• Clear clears all the lights
• Movelight Mobile Light Source

You can define the virtual location of the light source and adjust the position of the light source focus by adjusting the values of the X and Y axes, and you can also adjust the form of the light source (point or cone light) to specify whether the light source is blurred, the color of the light, the brightness, and so on. If you set the light source dynamically, you may have some unexpected effect. The following pages will have specific examples.

9, Mask Filter

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

Use the "MASK" property to create an object covering the surface of the film, the effect is like wearing glasses to see objects.

10, Shadow Filter

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

Use the "Shadow" property to create a projection of the object in the specified direction, color is the projection color, and the direction is the direction to set the projection. 0 degrees represent vertical upward, and then each 45 degree is a unit. Its default value is 270 degrees to the left.

Filter:shadow (color=red,direction=225)
Filter:shadow (color=blue,direction=225)
Filter:shadow (color=gray,direction=225)
The effects were as follows:

Shadow Filter Tea making with dripping eaves

Shadow Filter Tea making with dripping eaves

Shadow Filter Tea making with dripping eaves

11, Wave filter syntax: {filter:wave (Add=add,freq=freq,lightstrength=strength, phase=phase,strength=strength)}
Wave   properties upset objects in a vertical waveform style. The default is TRUE (non 0), and

The