Filters And Transitions In IE5 - Putting On Your Mask (
Page 5 of 9 )
The "mask" filter does exactly what
its name suggests - it turns all the transparent pixels within an object into a
specific colour and simultaneously takes all the non-transparent pixels in the
specified object and turns them transparent. Note, however, that for this filter
to work, the specified object must have some transparent pixels - like a
transparent GIF or a block of text.
The following example turns the
transparent areas of the image "square.gif" red.
<html>
<head>
</head>
<body>
<img style="filter: mask(color=red)" src="square.gif" border="0">
</body>
</html>
Alternatively,
if you'd like your image to appear in grayscale, you could simply use the "gray"
filter to remove all colour information from the image.
<img style="filter: gray" src="square.gif" border="0">
You could even reverse the colours of the image with the "invert"
filter - be warned that most images typically look much uglier after this!
<img style="filter: invert" src="square2.gif" border="0">
<<< insert image6.gif and image8.gif >>>
And the "chroma" filter comes in handy when you need to make
specific colours within an object transparent. Images which are highly
compressed or dithered, like JPEG images, typically show poor results with this
filter. The code
<img src="square.gif" border="0" style="filter: chroma(color=red)">
would turn all instances of the colour red within the image
transparent.
<<< insert image9.gif and image10.gif >>>
If you're looking for something a little more unusual, there's the
"wave" filter, which performs a wave distortion across the object it's applied
to. This works best with images, rather than text - take a look:
<html>
<head>
</head>
<body>
<img style="filter: wave(strength=9, freq=10)" src="face.gif" border="0">
</body>
</html>
The
"strength" attribute of the filter controls the level of intensity of the
distortion, while the "freq" attribute controls the number of "waves" that
appear in the distorted image.
The "glow" filter allows you to make your
object glow - take a look:
<img src="face.gif" border="0" style="filter: glow(color=red)">
There's also a new "emboss" filter, which allows you to display an
object as a gray embossed texture. Take a look:
<html>
<head>
</head>
<body>
<div style="position: absolute; top:50; left:50; font-family: Arial;
font-size: 40pt; filter: progid:DXImageTransform.Microsoft.Emboss">
Who's The Em-boss?
</div>
</body>
</html>
This article copyright Melonfire
2000. All rights reserved.
