Dreamweaver MX CSS Use tutorial CSS filter Introduction

css|dreamweaver| Tutorials | filters

Site original content, reproduced please indicate the source Web page teaching network .

　　 10. Detailed introduction of CSS filter 1

　　ALPHA Property

The name "Alpha Filter Attribute" is often seen in Flash and Photoshop. They are basically similar in that they mix a target element with the background. You can specify values to control the degree of mixing. This "mixed with the background" is popularly said to be the transparency of an element. By specifying the coordinates, you can refer to the transparency of the fixed-point, line, and surface. Since there are many parameters to the Alpha filter, let's take a look at the following figure:

"Opacity": represents the degree of transparency. The range is from 0~100, they are actually percentages of the form. In other words, 0 represents total transparency, and 100 represents total opacity.

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

Style: Specifies the shape characteristics of the transparent area. 0 represents a uniform shape, 1 represents linear, 2 represents radial, and 3 represents a rectangle.

"StartX" and "Starty": the start x and Y coordinates that represent the gradient transparency effect.

"Finishx" and "Finishy": Represents the end of the gradient transparency effect x and Y coordinates.

　　Blendtrans Property

The Blendtrans properties fade effect filter, which produces extremely fine image conversion effects.

The Blendtrans filter feature is also simple, with only one parameter: Duration (Transform time). You need to use JavaScript to invoke its methods to implement the conversion function. With the Blendtrans filter, you first want to prepare a few of the same width and height of the same picture, and separately named, saved in the image directory, such as: Images/*.jpg. If use 4, respectively named: blen1.jpg; blen2.jpg; blen3.jpg;blen4.jpg.

　　Blur Property

"Blur property" to the blur filter loaded into the text, can produce three-dimensional effect of the word, loaded into the picture, can produce wind-blown blur effect. Not only beautify the Web page, but also to reduce the weight of your Web page.

Here's an introduction to the parameters of the blur filter so you can use it flexibly:

ADD: Do you want the blur filter to work, Add=false (or "0") when the blur filter does not work, when true (or not "0" value) blur filter works, only two values, that is true and False;

Direction: The direction of the shadow, take the value range 0~360度, 45 degrees a interval, so actually only eight directional values;

Strength: It represents how many pixels the width of a shadow becomes, and you can simply understand the length of the shadow. It can only be specified in integers, with a default value of 5 pixels, which allows you to specify the length of the shadow depending on the actual need. My top two picture examples are the same filter, strength is 10 pixels. You can use blur filters with different parameters for different objects on the same page, just give them a different name.

　　Chroma Property

The Chroma property Chroma property can set the color specified in an object to be a transparent color, and its expression is as follows:

Filter:chroma (Color=color)

The expression of this property is not simple, it has only one argument. Just use the color parameter to set the colors you want to specify to be transparent.

　　DropShadow Property

The DropShadow property effect is the shadow effect of adding an object. The actual effect looks like the original object left the page, and then displays the object's projection on the page. It works by creating an offset and then adding color.

The DropShadow filter has four parameters, meaning:

"Color": represents the colour of a projected shadow.

"OFFX" and "offy": The offset of the shadow in the x direction and the y direction, which must use an integer value and, if it is a positive integer, the lower direction of the shadow to the x-axis and the right direction of the y-axis. If the negative integer value, the direction of the shadow is the exact opposite. In addition, the size of "OFFX" and "Offy" determines the distance of the shadow from the object;

Positive parameter: If True (non 0), a visible projection is established for any non-transparent pixel. If "Fasle (0)", the transparency effect is established for the transparent pixel portion.

A convenient way to load DropShadow filters on text is to load the DropShadow filter onto the table cell < td > Where the text is located. The text compares the hour, uses the DropShadow the effect is not very ideal, therefore generally uses in the production slightly big title word.

DropShadow filters are not valid for general pictures, but we put them in a table and then load DropShadow filters into the table's <td>, which results in a picture with a solid border.

　　Fliph Property

The FLIPV property FLIPV is a filter that flips the object vertically, and when the FLIPV is loaded onto an object, it produces a vertical mirror to create the effect of a vertical flip; it is one of the parameterless filters. Single function, easy to use and remarkable effect.