Enhancing a Web Site with Advanced CSS - HTML, CSS, and Dynamic HTML - page 558

Introducing Internet Explorer Filters
Not until version 9 did Internet Explorer start to support the CSS3 collection of visual
styles; and even then, its support was incomplete. However, since Internet Explorer 5.5, the
browser has supported the use of visual effects through the application of the filter style

filter: progid:DXImageTransform.Microsoft. filter ( param );

where filter is the name of an Internet Explorer visual effect, and param is the param-
eters (if any) that apply to that effect. Figure 8-9 lists some of the Internet Explorer filters
and their parameters.

figure 8-9 internet explorer filters

IE Filter Description

Alpha(style=type,
opacity=value,
finishOpacity=value,
startX=value, finishX=value,
startY=value, finishY=value)

Applies a transparent filter in which style sets the direction of
the filter (0 = uniform, 1 = linear, 2 = radial, 3 = rectangular);
opacity and finishOpacity set the starting and ending opac-
ity values, respectively; and startX , finishX , startY , and
finishY set the starting and finishing points in the horizontal
and vertical directions, respectively, as percentages of the width
and height of the object

Modifies the appearance of the object, where rotation rotates
the object (0=0°, 1=90° 2=180°, 3=270°), opacity sets the
opacity of the object, and the remaining parameters, if their
values are set to 1, create a mirror image, invert the object,
apply an X-ray effect, or display the object in grayscale

BasicImage(rotation=0|1|2|3,
opacity=0-1, mirror=0|1,
invert=0|1, xRay=0|1,
grayscale=0|1)

Blur(pixelRadius=value,
makeShadow=true|false,
shadowOpacity=0-1)

Blurs the object, where pixelRadius determines the amount
of the blurring, and makeShadow and shadowOpacity apply
shadowing to the blur effect

Chroma(color=#rrggbb)

Makes a specified color in the object transparent

Creates a drop shadow of the specified color with a length of
offX in the horizontal direction and offY in the vertical direction

DropShadow(color=#rrggbb,
offX=value, offY=value)

Emboss()

Applies an embossing effect to the object

Engrave()

Applies an engraving effect to the object

Applies a glowing border around the object with the size of
the glow determined by strength and the glow's color deter-
mined by color

Glow(color=#rrggbb,
strength=1-255)

Gradient(gradientType=0|1,
startColorStr=#rrggbb,
endColorStr=#rrggbb)

Applies a color gradient to the object, where gradientType
determines the direction of the gradient (0 = vertical, 1 = hori-
zontal), and startColorStr and endColorStr indicate the
starting and ending colors

MotionBlur(direction=angle,
strength=1-255)

Applies a motion blur effect, where direction provides the
angle of the motion and strength indicates the length of the
motion lines

Pixelates the object, where maxSquare is the width in pixels of
a pixelated square

Pixelate(maxSquare=value)

Shadow(direction=angle,
color=#rrggbb,
strength=1-255)

Applies a simple drop shadow to the object with the angle of the
shadow specified by direction , the shadow's color indicated by
color , and the size of the shadow determined by strength

Wave(freq=value,
lightStrength=value,
phase=value, strength=value)

Applies a sine-wave distortion to the object; the appearance of
the wave is determined by the four parameters