CSS filter effect (ii) _ Basic Tutorial

7, Gray, Invert,xray filter

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

The gray filter is to turn a picture into a grayscale image; The invert filter flips all of the object's visual properties, including color, saturation, and luminance values, and the Xray filter is the so-called "X" light that reflects the contour of the object and highlights the contours.

The effect is as follows:

8. Light Filter

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. "Light" is available in the following ways:

• 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

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 source blurs the boundary, the color of the light source, and the brightness properties. If you set up a light source dynamically, you may have some unexpected effects back. The following pages will have specific examples.

9. Mask Filter

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

Use the Mask property to create a film covering the surface of the object, as if the person is wearing a tinted eye.

10. Shadow Filter

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

The Shadow property allows you to create a projection of the object in the specified direction, color is a projection color, and direction is the direction in which the projection is set. where 0 degrees represents a vertical upward, and then every 45 degrees 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 results were as follows:

Shadow Filter drip eaves tea making Shadow filter drip eaves tea making Shadow filter drip eaves tea making 11. Wave Filter syntax: {filter:wave (Add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)}
The Wave property disrupts the object in a vertical waveform style. The default is "TRUE (not 0)",

"ADD" Indicates whether the object is to be disturbed by the waveform style.

"FREQ" is the frequency of ripples, that is, to specify how many complete ripples must be produced on the object,

The "lightstrength" parameter can be used for ripple-enhanced lighting effects, ranging from 0----100

The "PHASE" parameter is used to set the offset of the sine wave.

"Strength" represents the amplitude size.

