Filters And Transitions In IE5 - A Little Transparency (
Page 3 of 9 )
Let's now get into the guts of the
various filters available to the Web developer. You've already seen the "flipV"
filter, used to flip an object vertically - and Internet Explorer also comes
with a corresponding "flipH" filter, used to flip objects horizontally. Take a
look.
<html>
<head>
<style type="text/css">
div.flipped {position: absolute; top: 0; left: 0; font-family: Arial;
font-weight: bolder; filter: flipH}
</style>
</head>
<body>
<div class="flipped">
I'm flippin' out here!
</div>
</body>
</html>
The very powerful "alpha" filter allows you to control the alpha,
or transparency, levels of the image. By specifying the level of opacity on a
scale on a 0 to 100 scale, you can alter the appearance of an image
substantially.
<html>
<head>
</head>
<body>
<img src="face.gif" border="0" style="filter: alpha(opacity=50)">
</body>
</html>
and
Or you could also make the image vanish completely - although why you
would want to do this is beyond me!
<html>
<head>
</head>
<body>
<img src="square.gif" border="0" style="filter: alpha(opacity=0)">
</body>
</html>
Now you see it, now you don't!
This article copyright Melonfire 2000. All rights reserved.
