Inside Dynamic HTML: Dynamic HTML Filters

Applying Filters

Before you run off and start using filters, there are a few rules you need to understand about filters. First, filters can only be applied to "constrained elements". A constrained element is an element that has either an implicit or explicit width or height. Many HTML elements are automatically constrained and have an implicit width and height. This includes the IMG, table, table cell, input control, and button elements. However, when applying a filter to generic HTML content, you need to explicitly define a width or a height.

Internet Explorer 4.0 supports width and height on the two generic HTML elements, DIV and SPAN. Therefore, if you want to add an effect to some HTML in your page, you need to wrap the element in either a DIV or a SPAN and define a width or height. The width can be specified in percentages, so supplying 100% will ensure the element flows with the rest of your page. You cannot add a filter directly to the other HTML block or inline elements (eg., H1-H6, P, B, EM, etc.)

For this reason, the headers on each page in this article are defined as <H3> elements wrapped by a DIV as follows:

      <DIV STYLE="width: 100%; Filter: glow(color=lightgreen) dropshadow(color=green)">
        <H3>Applying Filters</H3>
      </DIV>

If the width or height is not specified, the filter property is ignored. Therefore, when using filters, if they are not rendered, check to make sure they are in a "constrained element".

The second rule of filters is they cannot change the size of the element. The elements effect cannot move beyond the boundaries of the element. This is most apparent if you try to add a dropShadow directly to an image. When the filter is applied, the dropShadow is clipped and now displayed. If you need more room for your effect, add extra margins or increase the width or height. If more space is needed for an image, wrap them in another element such as a DIV or table cell.

Enough with these rules. Go have some fun with the Filter Toolkit. The filter toolkit is an interactive Dynamic HTML application that helps you create filters.

DHTML Toolkits

4Introduction

4Creating Filters

4Applying Filters

4Filter Toolkit

4Lighting Toolkit

Applying Filters