Thursday, March 28, 2024

So, You Want Text Filters, Huh?

Use these to jump around or read it all…


[Using the Filter]
[Filter Examples]

[Horizontal Flip]
[Vertical Flip]

[Invert]
[Gray Scale]
[X-Ray]
[Mask]
[Blur]
[Shadow]
[Drop Shadow]
[Glow]


      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.

      I often get questions from people asking how someone got a great font or neat text layout. Until now, 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.

      Please understand that there are more filters than what I will show you here. Soon, I’ll have tutorials dedicated to the Alpha, blendTrans, revealTrans, and Wave filters. As the tutorials are posted, those terms will become hypertext links. I just grouped these all together because they work on text and images in a static fashion. The others allow for more play and better control over the effect. These are the simple, easy-to-use, filters.



Using the Filter

Single Elements

      Like I said before, you can use these 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 will also work to affect images:

<DIV STYLE=”width:200;height:30;filter:fliph()”>
<IMG SRC=”eggs.gif”>
</DIV>

      Please Note: There are parentheses following the filter name. In those parentheses, called the “instance”, you’ll be able to manipulate the filter’s strength, color, and direction.

      Please note this, too! See the “width” and “height” settings? You’ll need to denote at least the width so that this filter has something to act upon. If you do not supply that parameter, then the filter will not run. That includes images.

Multiple Elements

      I would assume you’d use these commands mainly in the format above since 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:

<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 will carry the blur filter coming straight in from the right and every image will carry a red shadow. That would make 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. The text looks like this normally:

Here’s What You Get.

Here’s the code that made it:

<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. Here’s the image. It’s called “eggs.gif”.

     Remember that the filter is stuck in at the end of the run of Style Sheet commands just like I showed above. Here we go. Enjoy.



Horizontal Flip: filter:fliph()

Here’s What You Get.




Vertical Flip: filter:flipv()

Here’s What You Get.




Invert: filter:invert()

Here’s What You Get.




Gray Scale: filter:gray()

Here’s What You Get.




X-Ray: filter:xray()

Here’s What You Get.




Mask:
filter:mask()

Here’s What You Get.




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

Here’s What You Get.



     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



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


Here’s What You Get.


     Set the color to a word color code. If you use a hex code, make sure 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



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

Here’s What You Get.


     Set the color to a word color code. If you use a hex code, make sure 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



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

Here’s What You Get.


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


Enjoy!


[Using the Filter]
[Filter Examples]

[Horizontal Flip]
[Vertical Flip]

[Invert]
[Gray Scale]
[X-Ray]
[Mask]
[Blur]
[Shadow]
[Drop Shadow]
[Glow]

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured