Filter style effects in CSS (1)

Since IE 4.0, some built-in multimedia filter effects have been provided. Because of these CSS-based style attributes, even if we don't need images when writing webpages, it can also make our text, images, buttons, or Div logo very bright and angry, thus adding a more beautiful visual effect for our webpage. Next, let's take a look at the filter style of CSS. Here, even if you do not have the CSS knowledge, I believe the following content will not be difficult to understand. Of course, first of all, by default, you have learned HTML and can also make webpages. It is better to know a little more about scripts statements. Due to the support of various browsers for CSS, I suggest you use a browser later than ie4.0, and strongly recommend that you use ie5.0, so that you will see all the special effects effortlessly. Let's get started. 1. Create a filter Style Since filter is a member of a CSS style sheet, it can be defined and applied like other styles, the Filter: Name (parameters and values) Example: imgblur {filter: blur (strength = 30 )} Of course, it can also be defined in the HTML identifier through the style identifier, such: <Image id = test src = "test.gif"Style = "filter: blur (strength = 30)"> The above is how to use the filter style in CSS. In fact, this is the same as other CSS style definitions, divided into three types: external reference, internal reference, and local reference, the first is internal reference, and the second is local reference. For external reference, you must first create a CSS file, then, use <LINK rel = stylesheet type = "text/CSS" href = "Style File URL"> to embed the HTML file. For more information about CSS definition, see related articles in taoba. The filter style attribute allows you to set multiple filter effects at a time. That is to say, an HTML element can have multiple filters at the same time. For example: ...... ...... ...... ...... In the preceding example, images with the ID of image1 are normally displayed, while images with the ID of image2 are simultaneously blurred and upside down (filpv) two filters. The following are two effects of the same image: (use ie4.0 or a later version of the browser to browse) Okay. Here are some notes: 1. if multiple filters are used, separate them with spaces. For example: 2. Several parameters in a filter are separated by commas. For example: 3. Filter and other CSS styles are separated by semicolons. For example: Next, let's see which filters are available in the filter. Ii. Types of static Filters Visual effect filter. Ie4.0 and later versions support the following 14 filters: Filter Name Description Alpha Make HTML components transparent and progressive Blur Make HTML elements blur Chroma Make a color in the image transparent Dropshadow Let the HTML element have a falling shadow Fliph Turning HTML elements horizontally Flipv Vertical flip of HTML elements Glow Generate a halo and blur effect around the component Gray Turns a color image into black and white Invert Effect of generating photo negatives for images Light Place a light and shade on the HTML Element Mask Use another HTML component to generate an image mask on another component Shadow Produce a relatively three-dimensional shadow Wave Make horizontal or vertical wave deformation of HTML elements Xray Generate the outline of HTML elements, just like X-ray These filters are like the special effects provided by the Photoshop image processing software. With these special effects, you can directly process the images in HTML, instead of using a dedicated image processing software to edit images. Generally, images and text are used most. Let's take a look at the parameters and effects of various filters. 3. Alpha Filter Parameter Name Description Value description Opacity The degree of opacity, percentage. From 0 to 100, the 0 table is completely transparent, and indicates completely opaque. Finishopacity This is a selective parameter used together with opacity. When both opacity and finishopacity are set, transparent and progressive effects can be produced, which is cool. From 0 to 100, the 0 table is completely transparent, and indicates completely opaque. Style When both opacity and finishopacity are set to generate a transparent progressive display, the progressive display shape is mainly specified by the red color. 0: no progressive; 1: Straight-line progressive; 2: Circular gradually; 3: rectangular radiation. Startx X coordinate value at the starting point 　 Starty The Y coordinate value of the progressive start. 　 Finishx X coordinate value of progressive completion 　 Finishy Y coordinate value of Gradual completion 　 Let's take a look at the example below and you will know: <Table> <Tr> <TD> source image </TD> <TD> style = 0 </TD> <TD> style = 1 </TD> <TD> style = 2 </TD> <TD> style = 3 </TD <Tr> </tr> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </Tr> </Table>