[CSS] filter usage (1)

Filter Effect	Function Description
Alpha	Set different transparency changes
Blur	Create a blur effect
Dropshadow	Creates an offset image profile, that is, a projection shadow.
Fliph	Horizontal flip
Flipv	Vertical flip
Glow	Adds color light effects to the boundaries of objects.
Gray	Display images in grayscale format
Invert	Completely invert the color, saturation, and brightness values, similar to the negative effect.
Light	Light Projection on an object
Mask	Creates a color transparent mask for an object.
Shadow	Create a shadow effect for an object
Wave	Use a sine wave to disrupt the image on the X and Y axes.
Xray	Show only the outlines of Objects

Alpha Filter

The "Alpha" attribute is to mix a target element with a background. The designer can specify a value to control the degree of mixing. In general, this "mixed with the background" is the transparency of an element. By specifying coordinates, you can specify the transparency of different ranges.

Alpha filter syntax

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

The parameter meanings are as follows:

Parameters	Description
Opacity	Transparency. The default range is from 0 to 100. They are actually percentages. That is to say, 0 indicates completely transparent, and 100 indicates completely opaque.
Finishopacity	Is an optional parameter. If you want to set the transparency of the gradient, you can use them to specify the transparency at the end. The range is also 0 to 100.
Style	Shape features of the specified transparent area: 0 represents a unified shape 1 represents linear 2 represents radiation 3 represents a rectangle
Startx	X coordinate at the beginning of the gradient transparency effect.
Starty	Y coordinate at the beginning of the gradient transparency effect.
Finishx	X coordinate of the end of the gradient transparency effect.
Finishy	The Y coordinate at the end of the gradient transparency effect.

Blur filterYou can use your fingers to quickly draw an image that is not completely dry, and the image will become blurred ." Blur is the same blur effect.

Blur filterSyntax

HTML: {filter: blur (add = add, direction = direction, Strength = strength )} Script Language: [oblurfilter =] object. Filters. blur

The parameter meanings are as follows:

Parameters	Description
Add	It specifies whether the image is changed to the fuzzy effect of the image. The Blur effect is performed clockwise, This is a Boolean value: true (default) or false
Direction	This parameter is used to set the fuzzy direction. 0 degrees indicates vertical up, every 45 degrees is a unit, the default value is 270 degrees to the left
Strength	Only integers can be used to specify the number of pixels whose width is blurred. The default value is 5 pixels.

Font setting effect:

CSS Filter Implementation	Welcome to Tianji design online!
Effect screens
Code	<TD style = filter: blur (add = ture, direction = 135, strength = 10)> <B> <font size = "+ 3"> welcome to Tianji design online! </Font> </B> </TD>

Dropshadow Filter

"Dropshaow", as its name implies, is the shadow effect of adding objects. The working principle is to create an offset and add color.

Dropshadow FilterSyntax

{Filter: dropshadow (Color = color, offx = ofx, offy = offy, positive = positive )}

The parameter description is as follows:

Parameters	Description
Color	The color of the shadow.
Offx	Offset of the shadow in the X direction
Offy	Offset of the shadow in the Y direction
Positive	Boolean Value If it is true (not 0), a visible projection is created for any non-transparent pixel. If it is fasle (0), a transparent effect is created for the transparent pixel part.

Fliph and flipv Filters

Fliph filter implements horizontal Inversion

Fliph FilterSyntax

{Filter: filph}

The flipv filter implements vertical inversion.

Flipv FilterSyntax

{Filter: filpv}

Fliph and flipv Filters

Fliph filter implements horizontal Inversion

Fliph FilterSyntax

{Filter: filph}

The flipv filter implements vertical inversion.

Flipv FilterSyntax

{Filter: filpv}

Glow filter

After you use the "Glow" attribute for an object, the edge of the object will produce a similar luminous effect.

Glow filterSyntax

{Filter: glow (color = color, strength )}

Gray, invert, Xray Filters

The gray filter can be used to convert an image into a grayscale image. The syntax is simple:

Gray FilterSyntax

{Filter: Gray}

Gray, invert, Xray Filters

The gray filter can be used to convert an image into a grayscale image. The syntax is simple:

Gray FilterSyntax

{Filter: Gray}

Mask filter

Mask filterSyntax

{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 watching the object with colored glasses.

Original Screen Copy

CSS Filter effect implementation

Welcome to Tianji design online

Effect screens

Light Filter

Light FilterSyntax

{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:

parameter	description
addambient	Add surrounded light source
addcone	Add a conical light source
addpoint	Add a light source
changcolor	change the color of the light
changstrength	changing the intensity of the light source
clear	clear all light sources
movelight	mobile light source

We can define the virtual position of the light source, and control the focus position of the light source by adjusting the X axis and Y axis values. We 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.

Shadow Filter

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.

The effect is as follows:

CSS Filter Implementation	Code	Effect screens
Welcome	<TD Style = filter: Shadow (Color = Red, direction = 45> <B> welcome </B> </TD>
Tianji	<TD Style = filter: Shadow (Color = blue, direction = 180> <B> Tianji </B> </TD>
Online Design	<TD Style = filter: Shadow (Color = gray, direction = 225> <B> design online </B> </TD>

Wave Filter

Wave Filter Syntax

{Filter: Wave (add = add, freq = freq, Lightstrength = strength, Phase = phase, strength = strength )}

parameter	description
wave	disrupt the object according to the vertical waveform style. the default value is true (not 0)
Add	whether to disturb the object according to the waveform style
freq	the ripple frequency, that is, the total number of ripple to be generated on the object
lightstrength	it can be used to enhance the effect of ripple-shaped light and shadows in the range of 0----100
phase	set the offset of the sine wave
Strength	amplitude

Gray, invert, Xray Filters

The gray filter can be used to convert an image into a grayscale image. The syntax is simple:

Gray FilterSyntax

{Filter: Gray}