Filters are style settings applied to text or graphics to change their visual appearance on a page. Various filters are available, for example, to modify opacity levels, create drop shadows, flip images, apply light sources, distort, emboss, and engrave images, and the like.

As stylesheet settings, filters are applied in the following general format:

A filter name is followed by a comma-delimited list of parameters and values enclosed in parentheses for that particular filter. For instance, to introduce a shadow effect behind an element, the stylesheet coding would be,

which is coded for the division enclosing the format shown above. Within scripts the general format for style settings or changes is

For example, the following button changes the drop shadow effect shown above:

The following pages contain descriptions and examples of various filters. You can interactively change parameters to view changes in styles. At the top of each page are presented the stylesheet and scripting code for the particular settings chosen. These can be easily copied into your own code to effect these styles.

The image and text on the following pages are defined within a division coded in the following format:

Cincinnati

Filter settings are made through scripts to the division id "DIV" to apply to both the image and text contained within the division. The following button shows how filters are applied to the text and image, in this case using the alpha filter to control opacity.

Applying Filters "From Above"

You will find it necessary to "make room" around a page element for styles which extend beyond the boundaries of the element itself. For example, for the drop-shadow effect, space must be allocated for the shadow to appear around the element to which it is applied. Here is original code for a division with a drop-shadow effect applied "to itself":

The drop shadow does not appear. The reason is that the division is sized 500 x 40 pixels; the 7 extra pixels needed on the right and at the bottom of the division for the drop shadow are "clipped" from the display. To remedy this clipping the division must be enclosed inside a container (another division is used here) that is sized at least 7 pixels larger:

Notice what's been done. A larger division (520 x 60) encloses the original division, and the drop-shadow filter has been moved to this enclosing division. The enclosing division applies the drop-shadow effect to the enclosed division, and it is sufficiently sized for the shadow to appear outside the edges of the enclosed division. The enclosing division is larger than it needs to be in this example so that the available space is more obvious. Also, it is given a visible border which can be removed.

The general principle in effect here is that a filter which expands the size of a page element needs to be applied from "outside" the element--by an enclosing container large enough to display the filtered element and its effects.

The same technique needs to be applied to text. Here is original coding for a text string with a drop-shadow effect:

Again, this doesn't work because the drop-shadow effect needs to be applied to the text string from "outside" the string, and with sufficient surrounding space for the shadow to display.

Here, the drop-shadow filter is moved to an enclosing <span> tag sufficiently wide and high to make room for the shadow.

Filters which do not change the size of page elements do not need to be applied by an enclosing element. Below, for instance, is a division that is dimmed from left to right. The filter appears in the division to which it applies.

The following sections describe each of the filters that can be applied to page elements. You will need to experiment with the filters to capture the visual effects you desire.

For each filter, general formats are shown for applying filters with a style sheet and for applying or changing filters through scripting. Certain of the filters can be applied only through scripting.