Impressing with Static Filters ...................................................................
I discussed filters briefly in Chapter 1. Use filters if you can assume that
people not using Internet Explorer won’t suffer from not seeing them. Filters
are a Microsoft-only technology, and though you can use them with CSS
styles, CSS itself hasn’t yet progressed to embrace animation (unless you
consider hyperlinks that change color when clicked a form of animation).
However, many filters are merely used to add some nice visual effects and
those who browse without IE only miss some beauty (not much information)
by not seeing them.
Here’s an example of a static filter. (A staticfilter doesn’t change over time;
we’ll get to dynamic filters, or transitionfilters, in the section called “Dazzling
with Transition Filters.”) Try this code to see a filter that adds drop shadows
to text, <div>blocks, and so on:
<html>
<head>
<style>
p {height: 350px; width: 450px; font-size: 44pt;
filter: progid:DXImageTransform.Microsoft.Shadow
(color=’gray’, direction=120, strength=6)
}
</style>
</head>
<body>
<p>
Get a Drop Shadow Effect
</p>
</body>
</html>
Adjust the directionvalue to anything from 0-360to rotate the light source
around the object casting the shadow. Because I believe that most natural
shadows fall on the lower right of objects, I like to use 120 as the value.
Microsoft agrees with me. (Or is it the other way around?) Take a look at the
shadowing on Windows elements such as buttons, icons, and window frames:
234 Part III: Adding Artistry: Design and Composition with CSS
