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.
