- Neat Stuff with Text and Images
- Placing Text Over Images
- RevealTrans Filter
- Internet Explorer Text and Image Filters
- Internet Explorer Wave Filters
- Toggling Images and Text in Internet Explorer
- Toggling Netscape's Layers
This chapter is from the book
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.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() |
|
|
Vertical Flip |
filter:flipv() |
|
|
Invert |
filter:invert() |
|
|
Gray Scale |
filter:gray() |
|
|
X-Ray |
filter:xray() |
|
|
Mask |
filter:mask() |
|
|
Blur |
filter:blur (Strength=#, Direction=##) |
|
|
Shadow |
filter:shadow (Color=##, Direction=##) |
|
|
Drop Shadow |
filter:dropshadow (Color=#, Direction=#) |
|
|
Glow |
filter:glow (Color=##, Strength=#) |
|
)
Figure
3.7)
Figure 3.8)
Figure
3.9)
Figure
3.10)
Figure
3.11)
Figure
3.12)
Figure
3.13)
Figure
3.14)
Figure
3.15)
Figure
3.16Set 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.)
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.)
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.)
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.