Here’s the list of the 16 static filters you can experiment with: alpha,
basicimage, blur, chroma, compositor, dropshadow, emboss, engrave,
glow, ICMfilter, light, maskfilter, matrix, motionblur, shadow, and
wave. These static filters — and more dynamic ones — are Microsoft exten-
sions to the “official” CSS specifications. You can find a complete reference
to the filters and their arguments (or values as CSS prefers to call them, or
attributes as HTML prefers) at this address, Microsoft’s “Visual Filters and
Transitions Reference”:
http://msdn.microsoft.com/library/default.asp?url=/workshop/
author/filter/filters.asp
In the example shown in Figure 13-1, using gray with the shadowfilter pro-
duces a respectable drop shadow, but experiment with some of the other
filters if you wish. The dropshadowfilter is separate from the shadow filter,
for example. But whereas the shadowfilter provides a convincing gradient
(a shift from dark to light), the dropshadowfilter offers only a solid shadow.
Paradoxically, the dropshadowfilter doesn’t produce as good a drop shadow
as does the shadowfilter. So, if you do decide to use static filters despite my
advice in the preceding tip — well, a curse upon you! Whoops... I momentarily
lost it. I meant to say that you’ll just have to try the various effects, and their
associated values, to see what looks good to you.
Change the filter to the dropshadowtype and see the results in Figure 13-2:
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5,
OffY=5, Color=’gray’, Positive=’true’)”
Here’s one more example of a static filter. This one’s called motionblur, and
the effect can be similar to drop shadows, as you can see in Figure 13-3:
Figure 13-2:
This drop
shadow
effect
doesn’t
include a
gradient,
as does
Figure 13-1.
Experiment
until you get
the effect
you like.
236 Part III: Adding Artistry: Design and Composition with CSS
