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

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
Facebook Wants to Power Web-Wide Apps
OpenSolaris to Support Facebook, OpenSocial
Sun Takes a Shine to Linux in New Web Stack
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:



JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

webref The latest from WebReference.com Browse >
Simple Comments Release Notes: v.960 · Adding Client Capabilities to Server Controls Using the ASP.NET AJAX Control Toolkit · How to Create an Ajax Autocomplete Text Field: Part 10
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
The NZXT Guardian 921 Gaming Chassis Offers Top Features and a Low Price · Beyond Simple File Sharing: Using Mapped Drives · RedAntenna's Widget and Marketing Helps Artists Sell Online