Shulou(Shulou.com)06/03 Report--

I hope you can read it carefully and be able to achieve something!

CSS-style filter (filter effect) sets the filter effect on some tags of HTML.

Black and white photo filter: gray

X-ray photograph filter: Xray

Wind blur filter: blur (add=true,direction=45,strength=30)

Sine ripple filter: Wave (Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3)

Translucent effect filter: Alpha (Opacity=50)

Linear transparent filter: Alpha (Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140)

Radiopaque filter: Alpha (Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200)

White transparent filter: Chroma (Color=#FFFFFF)

Lower color filter: grays

Negative effect filter: invert

Flip filter: fliph left and right

Flip filter: flipv vertically

Projection effect filter:progid:dXImageTransform.Microsoft.DropShadow (color=#cccccc,offX=5,offY=5,positives=true)

Mosaic filter:progid:dXImageTransform.Microsoft.Pixelate (maxsquare=3)

Glow effect filter:progid:dXImageTransform.Microsoft.Glow (color=#cccccc,Strength=5)

Soft Edge effect filter:alpha (opacity=100, finishOpacity=0,style=2

Filter property sheets supported above IE4.0

Filter effect description:

Alpha sets transparency

Blru establishes blur effect

Chroma sets the specified color to transparent

DropShadow establishes an offset image outline, that is, casting shadows

FlipH horizontal reversal

FlipV Vertical reversal

Glow adds light efficiency to the outer boundary of the object

Grayscale reduces the color of the picture.

Invert completely reverses the color, saturation and luminance values to create a negative effect.

Light does light projection on an object

Mask builds a transparent film for an object

Shadow establishes the solid outline of an object, that is, the shadow effect.

Wave disrupts the picture with sinusoidal ripples in the X and Y axes.

Xray displays only the outline of the object

The following are described respectively:

1. Alpha filter

Syntax: {FILTER:ALPHA (opacity=opacity,finishopacity=finishopacity,style=style,startx=startx

Starty=starty,finishx=finishx,finishy=finishy)}

The 'Alpha' attribute mixes a target element with the background. The designer can specify a value to control the degree of blending. This kind of "mixing with the background" is popularly said.

Is the transparency of an element. You can specify the transparency of points, lines, and faces by specifying coordinates. The meanings of their parameters are as follows:

"opacity' represents the level of transparency. The default range is from 0 to 100, and they are actually in the form of percentages. In other words, 0 means completely transparent.

Finishopacity' is an optional parameter, and if you want to set the transparency effect of the gradient, you can use them to specify

Transparency at the end. The range is also 0 to 100. "the style' parameter specifies the shape characteristics of transparent areas, where 0 represents a unified shape, 1 represents a linear shape, and 2 represents a radial shape.

, 3 represents a rectangle. "STARTX" and "STARTY" represent the initial X and Y coordinates of the gradient transparency effect. "

FINISHX "and" FINISHY "represent the coordinates of X and Y at the end of the gradient transparency effect.

2. Blur filter

Syntax: for HTML: {filter:blur (add=add,direction=direction,strength=strength)}

For Script language: [oblurfilter=] object.filters.blur

When you swipe your finger over an oil painting that is not yet dry, the picture becomes blurred. "Blur' produces the same blurred effect.

The "ADD" parameter is a Boolean judgment "TRUE" or "FALSE". It specifies whether the picture is changed to impressionist blur.

Effect. The blur effect is done clockwise, and the "DIRECTION" parameter is used to set the direction of the blur. Where 0 degrees means vertical

Up, and then every 45 degrees as a unit. Its default value is 270 degrees to the left. The "STRENGTH" value can only be specified using integers.

She represents how many pixels in width will be affected by blur. The default is 5.

3. FlipH, FlipV filter

Syntax: {filter:filph}, {filter:filpv} are horizontal and vertical reversals, respectively

4. Chroma filter

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

Use the Chroma' property to set the color specified in an object to be transparent, and the parameter COLOR is the color to be transparent.

5. DropShadow filter

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

"DropShaow', as its name implies, adds the shadow effect of an object. It works by creating an offset, plus a deeper one.

Color' represents the color in which shadows are cast, and 'offx' and' offy' are the hungry offsets of shadows in the X and Y directions, respectively.

The 'Positive' parameter is a Boolean value, and if it is "TRUE (non-zero)", a visible projection is established for any non-transparent pixel.

If "FASLE (0)", the code to create a transparency effect for transparent pixels is as follows:

Dropshadow (color=gray,offx=5,offy=5.positive=0)

6. Glow filter

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

When you use the 'glow' property on an object, the edges of the object produce a glowing effect. "COLOR" is specified

For the glowing color, "STRENGTH" is an expression of intensity, which can be specified by any integer between 1 and 255.

Effect after filter:glow (color=red,strength=10)

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

7. Gray, Invert,Xray filter

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

The Gray filter turns a picture into a grayscale image; (many websites turn gray after the Wenchuan earthquake, which is realized with this code.)

The Invert filter flips all the visual properties of an object, including color, saturation, and luminance values

The Xray filter allows the object to reflect its contours and brighten them, which are called "X-rays".

8. Light filter

Syntax: Filter {light}

This property simulates the projection effect of a light source. Once the LIGHT' filter property is defined for the object, you can call its method (Method) to set or change the property. The methods available to LIGHT' are:

AddAmbient joins the surrounded light source

AddCone adds tapered light source

AddPoint add point light source

Changcolor changes the color of light

Changstrength changes the intensity of the light source

Clear clears all light sources

MoveLight Mobile Light Source

AddAmbient (iRed,iGreen,iBlue,iStrength): adds ambient light to the filter. Ambient light is directionless and sprinkles evenly on the surface of the page. Ambient light has color and intensity values, which can give the object more color. It passes through

Often used with other lights. No return value. The parameters are shown in the table below.

IRed: required. Integer value (Integer). Specifies the red value. The range of values is 0-255.

IGreen: required. Integer value (Integer). Specifies the green value. The range of values is 0-255.

IBlue: required. Integer value (Integer). Specifies the blue value. The range of values is 0-255.

IStrength: required. Integer value (Integer). Specifies the light intensity. The value range is 0-100.

ChangeColor (iLightNumber,iRed,iGreen,iBlue,fAbsolute): changes the color of light. No return value. The parameters are shown in the table below.

ILightNumber: required. Integer value (Integer). Specifies the identifier of the light.

IRed: required. Integer value (Integer). Specifies the red value. The range of values is 0-255.

IGreen: required. Integer value (Integer). Specifies the green value. The range of values is 0-255.

IBlue: required. Integer value (Integer). Specifies the blue value. The range of values is 0-255.

FAbsolute: required. Boolean value (Boolean). Specifies whether the change replaces the absolute value of the current setting or is added to the relative value of the current setting. This parameter is not equal to zero, which means that the absolute value is used. Otherwise, the relative value is used.

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 form of the light source (point light source or conical light source) to specify whether the light source blurs the boundary, color, brightness, and so on.

Sex. If you set the light source dynamically, it may produce some unexpected effects.

9. Mask filter

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

Use the 'MASK' property to create a film that covers the surface of an object, just as the wearer looks at the object with tinted glasses.

10. Shadow filter

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

Use the "Shadow" attribute to establish the projection of the object in the specified direction, COLOR is the projection color, DIRECTION is to set the direction of the projection. Where 0 degrees represents vertical upward, and then every 45 degrees is a unit. Its default value is 270 degrees to the left.

11. Wave filter syntax: {filter:wave (add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)}

The 'wave' property scrambles the object in a vertical waveform style. The default is "TRUE (not 0)"

"ADD" indicates whether to disrupt the object according to the waveform style.

"FREQ" is the frequency of ripples, that is, to specify how many complete ripples need to be generated on the object.

The "LIGHTSTRENGTH" parameter can enhance the effect of light and shadow for ripples, with a range of 0Murmuri 100.

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

"STRENGTH" stands for amplitude.

Controls the background translucency of the div layer

Var container = document.getElementById ("map")

Container.style.filter = "progid:DXImageTransform.Microsoft.Alpha (style=3,opacity=50,finishOpacity=50)"

Container.style.opacity = "0.1"

Or:

Container.style.filter = "Alpha (Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140)"

Img.style.filter = "Alpha (Opacity=50)"; / / set map transparency in IE

Img.style.MozOpacity = 0.5; / / set map transparency in Firefox

This is the end of the content of "what are the effects of css filters"? thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.