Code Magic - CSS Filter Tour 2001.11.22 Day Design Online
Editor's words: CSS filters are not a fresh topic, and it is very picky to browsers, but no one can deny that the CSS filter is indeed a very interesting little thing, short one line of code can change all kinds of each Sample filter effect. We deliberately organize this topic. In order to take care of friends using a low version of the browser, we use the CSS filter code to implement the effect and effect copy screen records and the code display, and the CSS filter is detailed in detail. The CSS filter is actually a new extension section of CSS. Use this technology simple syntax to add visual filters and conversion effects to a standard HTML element, such as pictures, text, and some other objects, The page adds some rich changes. If you have some scripting's basis, you can make some combination of filter effects with the Script applet, you can have a powerful dynamic interaction documentation tool established by CSS Filter Script. Please look at the following example first, here you can use image software such as Photoshop, just use a short CSS filter code, don't believe, everyone can use the right click to see their picture name, all are the same a picture:
Note: Only the browser above IE4.0 / NC6.0 supports the CSS filter effect. If your browser does not see the above effect, please see the following effect copy screen record. (In order to take care of friends using a low version of the browser, we will provide the CSS filter code to achieve effect and effect copy screen records)
The method of using the CSS filter is very simple, as long as you follow the basic symptom rules below:
Filter: Filtername (parameters), filter: Filter Name (parameter)
Let's talk about it in detail below
Every filter is used and a wonderful effect, you can also study it, combine them, and draw a variety of graceful results.
Filter effect
Function description
Alpha Sets Different Transparency Change Effects BLUR Establishing Fuzzy Effect DROPSHADOW Establishing an Offset Image Summer Color, saturation, and brightness values are completely reversed, similar to the film effect Light MASK for a target to create a color transparent mask shadow for an object to create a contour, WAVE uses a sine wave in the X-axis and Y-axis direction. Chaosted pictures XRay only display the outline of the object
There are two specific applications:
1, first define CSS
, Then use a predetermined CSS on the object you need to use. In fact, the syntax of these filters has been set in advance, and we only need to fill in the appropriate specific parameters:
2. Write the CSS Filter code directly on the HTML control element that supports the CSS filter effect.
The so-called HTML control element is that they define a rectangular space on the page, and the browser's window can display these spaces. The HTML legitimate control is listed below, I believe everyone is familiar with their usage, here is not described here. Careful friends can see that the examples in our text are implemented using this method.
Body
Button
Div
IMG
INPUT
Marquee
Span
TABLE
TD
Textarea
Tfoot
TH
THEAD
TR
