Impressing with Static Filters
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 static filter doesn’t change over time; we’ll get to dynamic filters, or transition filters, in the section called “Dazzling with Transition Filters.”) Try this code to see a filter that adds drop shadows to text, Blocks.
Dazzling with Transition Filters
I might get a little ahead of myself here, introducing a bit of scripting (programming for Web browsers), but what the heck? However, just for fun, I want to show you how to trigger some interesting transition filters (also known as dynamic filters) using script.
Fading between Images
Transitions between Pages
Would you like your entire Web page to fade in (or otherwise transition) when the user first visits your site? You can do whole-page transitions by just adding a little so-called “meta” code to your HTML code.
Now save this file as effects.htm to your hard drive. Double-click on it in Windows Explorer and it loads the page into Internet Explorer. If you see a security warning, click the warning and permit this page to load. Then try pressing F5 to reload the page. Watch the cool “wheel” effect when the pageenter condition (event, as it’s called) happens.
If I were you, I’d avoid using the page-exit transitions unless you have a multipage Web site and you want to use them between your own pages. (No matter what, make them of short duration.) Transitions do take a bit of time and some people might be annoyed with you for making them watch your page grudgingly yield to the site they’re trying to visit next. You can also replace the page-enter and page-exit events with site-enter and site-exit events if you wish.