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

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs

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, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint