Internet Explorer Text and Image Filters - Page 5
August 23, 2002
First Things First: The material covered in this tutorial is
only compatible with MSIE browsers versions 4.0 and above. Feel
free to use them, though; browsers that do not comprehend the
commands will happily ignore them.
You can find this tutorial, and all of its examples, online at
http://www.htmlgoodies.com/beyond/textfilter.html.
You can download just the examples at
http://www.htmlgoodies.com/wpg/.
I often get questions from people asking how someone got a great
font or neat text layout. I usually found that the text was an
image. Well, now you have some limited ability to play around with
text layout and appearance through Microsoft filters. They work
like Style Sheet commands and give some great effects.
Using the Filter
You can use filters just like Style Sheet commands. You can affect
just one element in this format:
<SPAN STYLE="width:200;height:30;filter:fliph()">Affected Text</SPAN>
This format also works to affect images:
<DIV STYLE="width:200;height:30;filter:fliph()">
<IMG SRC="eggs.gif">
</DIV>
Please Note: Parentheses follow the filter name. In those
parentheses, you'll be able to manipulate the filter's strength,
color, and direction.
Please also note this. See the "width" and "height" settings? You
need to denote at least the width so that this filter has something
to act on. If you do not supply that parameter, the filter will not
run. That includes both text and images.
Multiple Elements
I would assume that you'd use these commands mainly in the
preceding format because a height or width must be set each time.
However, you can also use the filters by assigning them to one
type of text, say a hypertext link, or all images, through a
Style block like so:
<STYLE TYPE="text/css">
A {width:200;height:50;filter:blur(Direction=90)}
IMG {width:200;height:50;filter:shadow(color=red)}
</STYLE>
Now, every link carries the blur filter coming straight in from the right, and every image carries a red shadow. That makes for an ugly page, huh?
Filter Examples
The quickest way of showing you these filters is to just run them down. You'll see the effect on both text and an image. They both normally look like Figure 3.6.
Figure 3.6
Text and eggs? Great-breakfast!
Here's the code that rendered Figure 3.6:
<DIV STYLE="background:#ffffcc;width:200;height:30">
<FONT SIZE=+1>Here's What You Get.</FONT>
</DIV>
I made the text a little bigger and gave the background some color
to show height and width. Remember that the filter is stuck in at
the end of the run of Style Sheet commands just like I showed
previously. Here we go. Enjoy.
Transition Numbers - Page 4
Beyond HTML Goodies
Internet Explorer Text and Image Filters - Page 6
|
