CSS Filter effect (2)

7. Gray, invert, and Xray Filters

Syntax: {filter: Gray}, {filter: Invert}, {filter: Xray}

The gray filter turns an image into a grayscale image. The invert filter turns all the visual attributes of an object, including color, saturation, and brightness values; the Xray filter allows an object to reflect its outlines and highlight these outlines, the so-called "X" films.

The effect is as follows:

8. Light Filter

Syntax: Filter {Light}

This property simulates the projection effect of the light source. Once the "light" filter attribute is defined for an object, you can call its "method" to set or change the attribute. Available Methods for "light" include:

• Addambient adds a surrounded Light Source
• Addcone added to conical Light Source
• Addpoint
• Changcolor changes the color of light
• Changstrength changes the intensity of the light source
• Clear clear all light sources
• Movelight mobile Light Source

You can define the virtual position of the light source, and control the focus position of the light source by adjusting the values of the X and Y axes. You can also adjust the light source form (point light source or conical light source) specifies whether a light source has blurred borders, color, brightness, and other attributes. If the light source is set dynamically, unexpected results may occur. The following pages show examples.

9. mask filter

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

Using the "Mask" attribute, you can create a film covering the surface for the object. The effect is the same as that of the wearing colored glasses.

10. Shadow Filter

Syntax: {filter: Shadow (color = color, direction = direction )}

You can use the "shadow" attribute to create an object projection in the specified direction. color is the projection color, and direction is the projection direction. Where 0 degrees indicates vertical up, and then every 45 degrees is a unit. The 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 are as follows:

Shadow filter watermark workshop make shadow filter watermark Workshop

11. Wave Filters Syntax: {filter: Wave (add = add, freq = freq, lightstrength = strength, phase = phase, strength = strength )}
The "wave" attribute disrupts an object by the vertical waveform style. The default value is "true (not 0 )",

"Add" indicates whether to disrupt the object according to the waveform style,

"Freq" refers to the ripple frequency, that is, the total number of complete ripple to be generated on the object,

The "lightstrength" parameter can be used to enhance the effect of ripple-shaped light and shadows. The value range is 0----100,

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

"Strength" indicates the amplitude.