Filters And Transitions In IE5 - Shadow Boxing (
Page 4 of 9 )
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.
