Filters | The person who uses the style sheet will have a deep impression of the filter. This is because when we write the Web page, even if we do not use the picture, through the style sheet filter, only simple operation, but also can make our text, pictures or buttons vivid, full of anger, thereby enhancing the visual effect of their own web pages. Perhaps it is those bizarre filters that inspire the interest and enthusiasm of many people, and the style sheet has won the favor of many web-makers. So, what is a filter? To put it simply, they are programs that can compute complex objects and get "professional" results that are difficult to achieve with conventional operations.
Starting with IE version 4.0, browsers provide some built-in multimedia filter effects that Web designers use to control the style sheet filters to make beautiful web pages easily. Even if you completely do not understand the knowledge of the style sheet, I believe the following to describe the content you are not difficult to grasp. But there is a premise that you have to have a little knowledge of HTML syntax, and it is best to know a little bit about scripting language knowledge. Given the various browsers ' support for stylesheets, I suggest you use the IE4.0 version of the browser, so that you can easily see all the effects.
The composition of a style sheet filter
As a member of the style sheet family, filters are defined and applied in the same way as other style sheet elements, and can be defined directly between the
Tag {filter: Filter Name (property name 1 = property value 1, property Name 2 = property value 2, ....) ）;}
What it means is that within the scope of the tag, the style sheet filter will be treated in terms of the value of the property by the object defined by the property name in the parentheses. It is labeled as any tag in the HTML syntax, such as SPAN,P,BR, and so on; the filter name is the 14 filter names we have covered below; each filter has its own specific property name and its attribute value.
For example: p {filter:alpha (opacity=80,style=1);}
That's how you define the style sheet filter.
Ii. Types of static filters
The following 14 style sheet filters are supported in the IE4.0 version of the browser:
Filter Name Description
Alpha lets an object render a gradient semitransparent effect
Blur The effect of wind-blown blur on the object
DropShadow let the object have a drop shadow
Glow a halo and blur effect around an object
Chroma a color in an image to a transparent color
Fliph lets HTML objects be converted Horizontally
FLIPV HTML objects to convert vertically
Wave allows an HTML object to produce a sine wave in a horizontal or vertical direction.
Shadow objects to create shadow effects
Mask uses an HTML object to produce an image mask on another object
Light put a light on the HTML component
Gray turns a colored image into a grey-tone image
Invert the effect of making an object produce a photographic film
XRay to make the outline of the object appear highlighted
These filters are like the special effects provided by Photoshop, a kind of image processing software, and with these special effects, you can work with the images directly in HTML without having to edit the pictures with the special image-processing software. Style sheet filters are not only useful for images, but also for text; here, for the convenience of narration, take up the text as an example to talk about the filter parameters and their functions.
III. filter parameters and their functions
1, Alpha Filter
Syntax: {filter:alpha (opacity= property Value 1,finishopacity= Property value 2,style= Property value 3,startx= Property value 4,starty= Property value 5,finishx= Property Value 6,finishy= property value 7) }
Function: This filter enables objects to render a gradient semitransparent effect, which is determined by the names of the properties in parentheses and their corresponding property values.
Parameters: The Opacity property is set to the extent of opacity, with a percentage of its property value, from 0 to 100,0 table is completely transparent, and 100 is completely opaque.
The Finishopacity property is an optional parameter that is used with opacity, and can be created transparently and incrementally when opacity and finishopacity are set simultaneously, and the property values from 0 to 100,0 tables are fully transparent and 100 is completely opaque.
The Style property is used to set the gradient style, when the opacity and finishopacity are set simultaneously to produce a transparent gradient, it is mainly used to specify the progressive display shape, 0 represents the uniform progressive, 1 represents the linear progressive, 2 represents the radial progressive, and 3 represents the right angle progressive.
The StartX property is used to set the starting position of the horizontal direction gradient.
The Finishx property is used to set the horizontal-direction progressive end position.
The Finishy property is used to set the end position of the vertical direction gradually.
Instance:
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<meta name= "generator" content= "Microsoft FrontPage 4.0" >
<meta name= "ProgId" content= "FrontPage.Editor.Document" >
<title> style Sheet Filter Instance </title>
<style>
<!--
p {color: #FF0000; font-size:36pt text-decoration:blink; Font-weight:bold}p {Filter:alpha (opacity=80,style=0,starx= 2,finishx=4);}
-->
</style>
<body>
<p> style Sheet Filter Instance </p>
</body>
2, Blur Filter
Syntax: {Filter:blur (add= property Value 1,direction= Property Value 2,strength= property value 3);}
Function: The filter enables an object to perform a fuzzy effect, which is determined by the names of the properties in parentheses and their corresponding property values.
Parameter: The Add property is used to determine whether the original target is used in motion blur. Its attribute values are 0 and 12, 0 attribute values mean that the original target is not used in the fuzzy motion, and in most cases it is applicable to the image; 1 attribute values represent the use of the original target in fuzzy motion, most of which is applied to text.
The direction property is used to represent the angle of the blur move, with a property value of 0-360 degrees.
The strength property is used to indicate the distance of a blur move, and the property value can be set arbitrarily.
Instance:
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<meta name= "generator" content= "Microsoft FrontPage 4.0" >
<meta name= "ProgId" content= "FrontPage.Editor.Document" >
<title> style Sheet Filter Instance </title>
<style>
<!--
p {color: #FF0000; font-size:36pt; text-decoration:blink; Font-weight:bold}
P {Filter:blur (add=1,direction=60,strength=2);}
-->
</style>
<body>
<p> style Sheet Filter Instance </p>
</body>
3, DropShadow Filter
Syntax: {Filter:dropshadow (color= property Value 1,offx= Property value 2,offy= Property Value 3,positive= property value 4);}
Function: The filter is primarily used to produce overlapping effects, and the effect is generated by the names of the properties in parentheses and their corresponding property values.
Parameters: The Color property is used to set the colors of the projected text.
The Offx property represents the horizontal offset between the projected text and the original text.
The Offy property represents the vertical offset between the projected text and the original text.
The Positive property is a Boolean value (0 or 1) and, if True (not 0), creates a visible projection for any non-transparent pixel and, if "Fasle (0)", creates a transparent effect for the transparent pixel portion.
Instance:
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<meta name= "generator" content= "Microsoft FrontPage 4.0" >
<meta name= "ProgId" content= "FrontPage.Editor.Document" >
<title> style Sheet Filter Instance </title>
<style>
<!--
p {color: #FF0000; font-size:36pt; text-decoration:blink; Font-weight:bold}
P {Filter:dropshadow (color= #ff0080, offx=2,offy=2,positive=0); color: #00ff11}
-->
</style>
<body>
<p> style Sheet Filter Instance </p>
</body>
