css basic tutorial filter effect

1. alpha filter

syntax:

{filter：alpha(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,
starty=starty,finishx=finishx,finishy=finishy)}

" alpha" property blends a target element with the background. designers can specify numerical values ​​to control the degree of blending. this "blending with the background" is colloquially known as the transparency of an element. by specifying coordinates, you can specify the transparency of points, lines, and surfaces.

the meanings of their parameters are as follows:

"opacity" represents the transparency level. the default range is from 0 to 100, which is actually a percentage. that is, 0 represents completely transparent and 100 represents completely opaque.

"finishopacity" is an optional parameter. if you want to set the transparency effect of the gradient, you can use them to specify the transparency at the end. the range is also 0 to 100.

the "style" parameter specifies the shape characteristics of the transparent area. among them, 0 represents a uniform shape, 1 represents a linear shape, 2 represents a radial shape, and 3 represents a rectangle.

"startx" and "starty" represent the starting x and y coordinates of the gradient transparency effect.

"finishx" and "finishy" represent the x and y coordinates of the end of the gradient transparency effect.

the effect is as follows:

2. blur filter

syntax: for html:

{ilter:blur(add=add,direction=direction,strength=strength)}

for script language:

[oblurfilter=] object.filters.blur

use your finger on an oil painting that is not yet dry when moving quickly, the picture will become blurry. "blur" produces the same blur effect.
the "add" parameter is a boolean judgment "true (default)" or "false". it specifies whether the picture is changed to an impressionistic blur effect. the blur effect is performed in a clockwise direction;

the "direction" parameter is used to set the direction of blur. where 0 degrees represents vertical upward, and then every 45 degrees is a unit. its default value is 270 degrees to the left;

the "strength" value can only be specified using an integer. it represents how many pixels the width will be affected by blurring effects. the default is 5.

for the fonts on the web page, if you set its blur "add=1", then the effect of these fonts will be very beautiful. as follows:

filter:blur(add=ture,direction=135,strength=10）

i fly to you, the rain falls gently!

tbody>

3. fliph, flipv filters

syntax: {filter:filph}, {filter:filpv} are horizontal inversion and vertical respectively reverse, as follows:

	td>

4. chroma filter

syntax:

{filter:chroma(color=color)}

use the "chroma" attribute to set the color specified in an object to be a transparent color. the parameter color is the color to be transparent. below is the blue text, and then use the chroma filter to filter out the blue, so it looks like the following.

filter:chroma(color=blue)

dishuiyanfang

5. dropshadow filter

syntax:

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

"dropshaow", as the name suggests, is to add a shadow effect to the object. it works by building an offset, plus a deeper one.

"color" represents the color of the shadow, "offx" and "offy" are the x direction and y direction respectively the offset of the shadow.

"positive" parameter is a boolean value, if it is "true (non-0)", then create a visible shadow for any non-transparent pixels.

if it is "fasle (0)", then create a transparency effect for the transparent pixel part

the text after dropshadow(color=gray,offx=5,offy=5.positive=0)

normal text

6. glow filter

syntax:

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

when using the "glow" attribute on an object, the edges of this object will have a glow-like effect. "color" specifies the color of the light, and "strength" represents the intensity. this intensity can be specified by any integer from 1 to 255.
the effect after filter:glow(color=red,strength=10)

dishuiyan tea house

the effect after filter:glow(color=#ffff00,strength=5)

dishuiyan tea house span>

it seems that photoshop can be kicked aside, yes ?

the above is the filter effect of the basic css tutorial content, please pay attention to the php chinese website (www.php.cn) for more related content!