Home > Articles

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

Internet Explorer Text and Image Filters

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.6Figure 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.

Filter Name

Code

Image

Horizontal Flip

filter:fliph()

Figure 3.7Figure 3.7 Flip...

Vertical Flip

filter:flipv()

Figure 3.8Figure 3.8 Upside down.

Invert

filter:invert()

Figure 3.9Figure 3.9 That's spooky, huh?

Gray Scale

filter:gray()

Figure 3.10Figure 3.10 I'm just showing a little gray. I can cover it.

X-Ray

filter:xray()

Figure 3.11Figure 3.11 Eggs don't have bones...

Mask

filter:mask()

Figure 3.12Figure 3.12 Uhhh...where did it go? That's the point actually.

Blur

filter:blur (Strength=#, Direction=##)

Figure 3.13Figure 3.13 Take me home. I'm seeing double eggs.

Shadow

filter:shadow (Color=##, Direction=##)

Figure 3.14Figure 3.14 It knows...

Drop Shadow

filter:dropshadow (Color=#, Direction=#)

Figure 3.15Figure 3.15 It knows too, I guess.

Glow

filter:glow (Color=##, Strength=#)

Figure 3.16Figure 3.16 Sir, your eggs are glowing.


Set the Strength number higher for more blur. The direction can be set to come from any one of the following. (If you do not set a direction, the blur will come from 270 by default.)

0—Top
45—Top right
90—Bottom
135—Bottom right
180—Bottom
225—Bottom left
270—Left
315—Top left

Set the color to a word color code. If you use a hex code, make sure that you use a leading pound sign (#). The direction of the shadow can be set to come from any one of the following. (If you do not set a direction, the shadow will come from 270 by default.)

0—Top
45—Top right
90—Bottom
135—Bottom right
180—Bottom
225—Bottom left
270—Left
315—Top left

Set the color to a word color code. If you use a hex code, make sure that you use a leading pound sign (#). The direction of the shadow can be set to come from any one of the following. (If you do not set a direction, the shadow will come from 270 by default.)

0—Top
45—Top right
90—Bottom
135—Bottom right
180—Bottom
225—Bottom left
270—Left
315—Top left

The property is read/write with a default value of 270.

Set the color to a word color code. If you use a hex code, make sure that you use a leading pound sign (#). Set the Strength number higher for more glow, smaller for less.

  • + Share This
  • 🔖 Save To Your Account