Home arrow DHTML arrow Page 2 - Filters And Transitions In IE5

Filtering Out The Good Stuff - DHTML

You may not know this, but Internet Explorer 4.x and above hasimage manipulation capabilities similar to those normally found only inimage editing programs like Adobe Photoshop. This article takes a look atIE5's image filters, and demonstrates how they can help you add specialeffects to your images and text on the fly.

TABLE OF CONTENTS:
  1. Filters And Transitions In IE5
  2. Filtering Out The Good Stuff
  3. A Little Transparency
  4. Shadow Boxing
  5. Putting On Your Mask
  6. Scripting Your Filters
  7. Into The Blender
  8. Revealing The Secret
  9. Zig And Zag
By: icarus, (c) Melonfire
Rating: starstarstarstarstar / 9
October 31, 2000

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
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.

 
 
>>> More DHTML Articles          >>> More By icarus, (c) Melonfire
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

DHTML ARTICLES

- Google Gives Buckyball a Tribute Doodle in H...
- Rough Guide To The DOM (part 2)
- Rough Guide To The DOM (part 1)
- Filters And Transitions In IE5
- Understanding Embedded Fonts

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: