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

Shadow Boxing - 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
Next, how about adding a shadow to the object? There's a "shadow" filter designed especially to add a gradient to the edges of the object in order to simulate a shadow around it:
<html>
<head>
</head>
<body>
<div style="position: absolute; top:50; left:50; font-family: Arial;
font-size: 20pt; filter: shadow">
Shadow-boxing in the sunshine
</div>
</body>
</html>


If you try that out, you'll see that it isn't very readable. How about if I change the colour of the shadow to gray?
<div style="position: absolute; top:50; left:50; font-family: Arial;
font-size: 20pt; filter:
shadow(color=gray)">
Shadow-boxing in the sunshine
</div>
Much better! As you can see, the "shadow" filter allows you to change the colour of the shadow via the "color" attribute. You can also change the direction in which the shadow is cast with the "direction" attribute - try each of these versions to see how this works:
<div style="position: absolute; top:50; left:50; font-family: Arial;
font-size: 20pt; filter: shadow(color=gray, direction=90)">
Shadow-boxing in the sunshine
</div>
<div style="position: absolute; top:50; left:50; font-family: Arial;
font-size: 20pt; filter: shadow(color=gray, direction=180)">
Shadow-boxing in the sunshine
</div>
<div style="position: absolute; top:50; left:50; font-family: Arial;
font-size: 20pt; filter: shadow(color=gray, direction=270)">
Shadow-boxing in the sunshine
</div>
In case you'd prefer a drop shadow, you can do that as well with the "dropShadow" filter, which also allows you to control the offset at which the shadow is generated.
<html>
<head>
</head>
<body>
<div style="position: absolute; top:50; left:50; font-family: Arial;
font-size: 40pt; filter:
dropShadow(color=gray, offX=5, offY=5)">
Dropped Shadow
</div>
</body>
</html>
The "blur" filter allows you to blur the shape of your object - you can specify both the direction and amount of blurring. This example will demonstrate it:
<html>
<head>
</head>
<body>
<img style="filter: blur(strength=0, direction=90)" src="face.gif"
border="0">
<br>
<img style="filter: blur(strength=3, direction=90)" src="face.gif"
border="0">
<br>
<img style="filter: blur(strength=6, direction=90)" src="face.gif"
border="0">
<br>
<img style="filter: blur(strength=9, direction=90)" src="face.gif"
border="0">
<br>
<img style="filter: blur(strength=12, direction=90)" src="face.gif"
border="0">
<br>
<img style="filter: blur(strength=15, direction=90)" src="face.gif"
border="0">
</body>
</html>
You could also try the new "motion blur" filter, which allows you to blur an object such that it appears to be in motion.
<html>
<head>
</head>
<body>
<img style="filter:
progid:DXImageTransform.Microsoft.MotionBlur(strength=20, direction=90)"
src="face.gif" border="0">
</body>
</html>
The somewhat convoluted syntax is the new method of accessing filters under Internet Explorer 5.5. As a matter of fact, much of the filter syntax in this article comes from the days of Internet Explorer 4.x, and has now been replaced with the convoluted mess above. Luckily, newer versions of the browser continue to support the old way of doing things - else this article would look far more intimidating than it currently does!

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: