spacer
Yehuda Shiran September 17, 2000
Defining a Filter
Tips: September 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?

You add filters to an HTML element by adding the filter: specification to its STYLE attribute:

<ELEMENT STYLE="filter: progid:DXImageTransform.Microsoft.filtername(sProperties)">

Notice that progid: is part of the DirectX specification and there should not be any space between progid: and DXImage. Doing so will result in an error, and the effect of the filter will not be seen. You can attach multiple filters to the same element. Let's take an example element and see how it loads with one and two filters. Here is the original DIV block, definition and outcome:

<DIV STYLE="width: 40%; height: 100">
<IMAGE SRC="bicycle.gif"><FONT COLOR="blue">In this page we explain 
the basics of using filters.</FONT></DIV>

In this page we explain the basics of using filters.

Let's apply the DropShadow filter. It creates a colored shadow to text and images. Here is the above example, after applying the DropShadow filter, definition and outcome:

<DIV STYLE="width: 40%; filter: progid:DXImageTransform.Microsoft.DropShadow(color='red', 
offX=3, offY=2)">
<IMAGE SRC="bicycle.gif"><FONT COLOR="blue">In this page we explain the basics of 
using filters.</FONT>
</DIV>

In this page we explain the basics of using filters.

As you can see above, each filter can have a set of optional parameters that define the effect's details, such as color, duration, strength, etc.

Learn more about filters in Column 68, Introduction to Filters in IE 5.5 and Up.


People who read this tip also read these tips:

Look for similar tips by subject:

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business