Filters And Transitions In IE5 - Filtering Out The Good Stuff (Page 2 of 9 )
The special effects available in Internet Explorer broadly fall into one of two categories.
"Filters" are basic image manipulation tools, similar to those found in image editing packages like Adobe Photoshop or CorelDRAW! They allow you to apply basic transformations to an image - alter the level of transparency, rotate or flip the image, alter colour information and the like.
"Transitions" are special effects which are activated as a user exits or enters a specific Web page, and can best be compared to the various transition effects familiar to users of presentation packages like Microsoft Powerpoint. Transition effects include image morphing, vertical or horizontal blinds, wipes and fades.
Filters can typically be applied to specific HTML constructs only - the most common is the IMG construct, although you can also use them with the BODY, DIV, SPAN, and TABLE constructs. In order to provide Web developers with a fair amount of flexibility, filters can be activated either via simple CSS declarations or through Javascript code.
Before I get into the meat of each filter, here's a simple example which demonstrates the "flipV" filter as applied to an image. Note the new CSS keyword "filter", used to specify the type of filter to be used.
<html>
<head>
</head>
<body>
<img src="face.gif" border="0" style="filter: flipV">
</body>
</html>
You could also flip text, as the following example demonstrates:
<html>
<head>
<style type="text/css">
div.flipped {position: absolute; top: 0; left: 50; font-family: Arial;
filter: flipV}
</style>
</head>
<body>
<div class="flipped">
Upside-down and lovin' every minute!
</div>
</body>
</html>
I'll also demonstrate how Javascript can be used to apply a filter
to a specific object - but that's a little further down.
This article copyright Melonfire 2000. All rights reserved. Next: A Little Transparency >>
More DHTML Articles
More By icarus, (c) Melonfire
/ 4 
