the basics of filters

The filter property applies various effects to the text and images. (MSIE only)

The attribute and value

filter: FilterName(Attribute=Value);

FilterName : Specifies the type of the filter.
(Attribute=Value) : Specifies the color, distance, and direction, etc.

Example :
filter: shadow(color=red);

If you specify two or more attributes, separate by a comma.

Example :
filter: shadow(color=red, direction=135);

Two or more filters

If you specify two or more filters, separate by a space.

Example :
filter: fliph() flipv();

The width and height of the box

If you apply the filter to the DIV or SPAN element, the width or height of the element must be specified.
(Or specify the absolute value for the position property of the element.)

Example :
<div style="width: 100%; filter: fliph();"></div>
<div style="position: absolute; filter: fliph();"></div>

If these are not specified, the filter is not applied to the element.

The white space

If you use the shadow, dropshadow, blur, glow, or wave, create the white space for displaying the effect of the filter.

In the following example, the padding is specified in the same direction as the shadow.

#example {
padding-bottom: 10px;
filter: shadow(color=gray, direction=180);
}