Internet Explorer Filters - HTML

IE includes a variety of dynamic effects in a browser-safe way that won’t send browsers that don’t support them crashing into a heap. The reason for this is that they use CSS-like syntax. If a browser doesn’t support the syntax, the CSS code that implements a given effect is simply ignored.
What follows is a closer examination of how to apply various visual effects through IE’s extension to CSS2 style sheets. None of the properties that follow are part of the CSS2 specification—rather, they are extensions that are specific to Internet Explorer beginning with IE4 and, in the case of behaviors, IE5.

Filters
If you’ve ever worked in a paint program you’re familiar with filters and their effects. IE4 and IE have introduced them to the world of Web browsing through a set of controls that come packaged and install with the program. You can access them through style sheets, although not through CSS2 style sheets, but, instead, style sheet extensions that are compatible only with IE4 and IE. There are several kinds of filters, all of which fall into two basic categories: static and dynamic.

Static filters are visual filters that create effects such as drop shadows, transparencies, and glows. These visual filters are called static not because they can’t be made dynamic (they can through just a small amount of scripting code), but because their siblings, transition filters, are dynamic effects that create an effect during a transition of some kind, such as hiding or showing a layer, or the loading of a new page into the browser. In fact, the easiest kind of filter to create is a filter that produces an effect, such as a wipe or a fade, as a page loads. The code is simply plunked into a meta tag, and therefore cannot load an error message into browsers that don’t support it.

Like any other style sheet property, filters can be applied using event handlers. This can help committed developers who want to produce interesting projects for use over the Web.It’s easy to determine if a particular HTML element can react to filter effects. Generally, if the HTML element is a windowless container, you’ll be able to apply a filter to it. frame and iframe, then, are out, and div and img are in. When using div or span, it is imperative that you include at least one positioning property in its definition. In other words, in its style sheet, indicate either the height or width of the div or span element, or its left and right position.

Valid HTML filter elements

The following list shows which elements you can apply filters to:

  • BODY
  • BUTTON
  • DIV (with a defined height, width, or absolute positioning)
  • IMG
  • INPUT
  • MARQUEE
  • SPAN (with a defined height, width, or absolute positioning)
  • TABLE
  • TD
  • TEXTAREA
  • TFOOT
  • TH
  • THEAD
  • TR

The following section begins with a look at filters with the visual filters that are applied through style sheets, followed by a look at the light and visual transition filters.

Visual filters
There are several static filter controls that come as a part of the IE package, the definitions of which follow. They’re easy to use with style sheet selectors, although the actual rendering of some is better than others. Some of them, such as glow, can be quite impressive, whereas the drop shadow effect may remind you of the infamous <BLINK> tag. All visual filters follow the same general syntax: a CSS-like selector followed by a value consisting of the filter name and a series of its required parameters.

{ filter: value(parameter, parameter)}

alpha
You know what an alpha channel is, even if you think you don’t. Any graphic file format that is capable of rendering a transparency or varying degrees of opacity has an alpha channel. In IE, the alpha channel sets the opacity level of an object. Using the optional startx(y) and finishx(y) values allows you to create a gradient, as in the following syntax.

{filter: alpha(Opacity=value, FinishOpacity=value, Style=value,
StartX=value, StartY=value, FinishX=value, FinishY=value)}

Valid parameter values are as follows:

  • 0 to 100 for opacity, where 0 is transparent and 100 is opaque
  • 0 to 100 for the optional parameter FinishOpacity
  • A value of 0 (uniform), 1 (linear), 2 (radial), or 3 (rectangular) for the style parameter, which sets the gradient shape
  • An x or y value for the StartX, StartY, FinishX, and FinishY values.

For example:

H1 {filter: alpha (20)}
H2 {filter: alpha (20, 100, 1, 10, 10, 200, 300)}

As you might have surmised, you obviously would need to set all of the gradient values if you set the FinishOpacity value.

blur
This filter creates a movement across the screen according to the parameters you set for it, and has the following syntax:

{ filter: blur(add=value, direction=value, strength=value, )}

Valid parameter values are as follows:

  • The boolean values true and false for add, which tell IE whether or not to add the original image to the blur
  • A direction value of a point of a round path around the object (the value must be a multiple of 45 within a 360-degree path)
  • A strength value that is represented by an integer, indicating the number of pixels affected by the blur (a default of 5)

These parameters are represented in the following example:

H1 {filter: blur (false, 45, 20)}

chroma
This filter creates a transparency level out of a specific named color and has the following syntax:

{ filter: chroma(color)}

No parameters are needed with this filter—the only needed value is the color, named as a hexadecimal color. This is not a reliable filter for any image that has been subject to dithering, either as a result of antialiasing, or a reduction in the size of its color palette from 24-bit to 8-bit, including JPEG, but is rather best used on an image that was created with aWeb safe color palette in the first place, as in the following example:

H1 {filter: chroma (#ff3399)}

dropShadow
This filter creates a movement across the screen according to the parameters you set for it, and has the following syntax:

{FILTER: dropShadow(Color=value, OffX=value, OffY=value,
Positive=value)}

Valid parameter values are as follows:

  • Hexadecimal color values for color
  • A positive or negative integer for offx and offy, which indicates how many pixels along a horizontal (x) and vertical (y) axis the drop shadow is offset
  • A zero or nonzero value for the parameter positive, which indicates whether or not to pick up transparent pixels for the drop shadow (0, false, is yes; any other number, true, is no, because the value is actually inquiring about nontransparent pixels, so if you want a drop shadow for a fully transparent object, you should set this value to 0.)

Here is an example using some of the parameters:

H1 {filter: dropShadow (#336699, 8, 8)}

Shows how to build a drop shadow, and shows how it looks rendered in a browser.

Building a Drop Shadow Filter

<html>
<head>
<title>Using a Drop Shadow</title>
</head>
<body>
<DIV style = “ font-size:50px; position: absolute; top: 20; left:15;
width:440px; height: 148; font-family: sans-serif; color: #FF9966;
filter: dropShadow (#336699, 1, 1)”>
Here is a drop shadow.
</div>
</body>
</html>

A Drop Shadow rendered in a browser.

A Drop Shadow rendered in a browser.

flipV
This filter flips an object along a horizontal plane. It has the following syntax:

{ filter: flipV}

This filter takes no parameters, as reflected in the following example:

H1 {filter: flipV}

flipH
This filter flips an object along a vertical plane. It has the following syntax:

{ filter: flipH}

This filter takes no parameters, as reflected in the following example:

H1 {filter: flipH}

Glow
This filter creates a glow around the outside pixels of an object. It has the following syntax:

{FILTER: Glow(Color=color, Strength=strength)}

Valid parameter values are a hexadecimal number for the color value, and a value of 1-255 for the strength value, which represents the intensity of the glow. The following example shows a strength value of 200:

H1 {filter: glow (#333399, 200)}

gray
This filter removes the color information from an object. It has the following syntax:

{filter: gray}

This filter takes no parameters, as reflected in the following example:

H1 {filter: gray}

invert
This filter reverses the values of an object’s hue, saturation, and brightness. It has the following syntax:

{filter: invert}

This filter takes no parameters, as reflected in the following example:

H1 {filter: invert}

light ()
The light filter can produce not only some fun effects, but can enhance a page visually, as well. The light filter has numerous methods you can call on for some special effects. The various methods you can call on are listed in the next sections.

addAmbient
The addAmbient filter adds an ambient light source to an object. When the light filter is first applied via a style sheet, a default addAmbient light method is applied that results in a black box. The syntax is as follows:

object.filters.Light.addAmbient(R,G,B,strength)

The parameters, in parentheses, must be in the order shown.

addCone
By naming a variety of values, you can position a cone light source to act as a kind of spotlight on a particular portion of an element or image. Here is the syntax for this filter method:

object.filters.Light.addCone(x1,y1,z1,x2,y2,R,G,B,strength,spread)

Valid cone parameters (in this order) include the following:

  • x1 is the light’s starting point, or source position on the x axis
  • y2 is the light’s starting point, or source position on the y axis
  • z1 is the light’s starting point, or source position on the z axis
  • x2 is the light’s target point, or target position on the x axis
  • y2 is the light’s target point, or target position on the x axis

Unlike many other filter calls, valid color ranges are defined as base-10 RGB ranges, rather than as hexadecimals.

(0-255) Red
(0-255) Green
(0-255) Blue

And in degrees:

(0-255) Strength
(0-90) Spread Angle

You can only add a total of three cones to one image. In some versions of IE4, even if you only add three cones, if the user clicks a fourth time, an error message is generated.

addPoint
The addPoint filter adds a more finely focused area of light to an element than the addCone method. To use this method, follow this syntax:

object.filters.Light.addPoint(x,y,z,R,G,B,strength)

changeColor
The changeColor filter changes light color using the following syntax:

object.filters.Light.changeColor(lightnumber, r,g,b, zero/nonzero)

lightnumber refers to the indexed number in the collection. Zero/nonzero refers to a nonzero or zero (0) number, with zero changing the color in an increment specified in the r, g, b parameters, and a nonzero number setting the color to the value indicated.

changeStrength
This filter changes light strength. To use it, follow the syntax shown here:

object.filters.Light.changeStrength(lightnumber, strength, zero/nonzero

A zero/nonzero value of zero (0) results in an incremental or decremental change in strength value, and a value of nonzero results in a new strength set to the value indicated.

Clear
Clear deletes all the lights from the object, and has the following syntax.

object.filters.Light.Clear

moveLight
Moves a light source to a position indicated in the method’s parameters. The syntax looks like this:

object.filters.Light.moveLight(lightnumber, x, y, z, boolean)

boolean is a true/false operation, indicating whether the movement is absolute or relative to the source’s original position. False means absolute; true means relative.

mask
Mask creates a stencil-like effect of an object by painting the object’s transparent pixels and converting its nontransparent pixels into transparent ones. It has the following syntax:

{Filter: mask(Color=value)}

Valid parameter value is a hexadecimal number for the color value; which indicates the color that the transparent areas should be painted, as shown in the following example:

H1 {filter: mask (#333399)}

shadow
This shadow filter creates a border around one of its edges to simulate a shadow. It has the following syntax:

{ filter: shadow(color=value, direction=value)}

Valid parameter values are hexadecimal RGB values for color and a direction value of a point of a round path around the object (the value must be a multiple of 45 within a 360-degree path).

H1 {filter: shadow(#333333, 45)}

wave
The wave filter creates a sine wave across the vertical plane of an object. It has the following syntax:

{ filter: wave(add=value, freq=value, lightStrength=value,
phase=value, strength=value, )}

Valid parameter values are as follows:

  • The boolean values true and false for add tell IE whether or not to add the original image to the filter effect.
  • A frequency value is denoted by an integer that indicates the number of waves.
  • A value ranging from 1-100 indicates the strength of the light being used in the filter.
  • A phase value between 1-100 indicates the offset percentage vis-a-vis the wave.
  • A strength value denotes the intensity of the wave represented as an integer.

You can see these parameters in the following example:

H1 {filter: wave (false,10, 45, 20, 50)}

x-ray
This filter reduces an image to a black and white format to resemble an x-ray. It has the following syntax:

{ filter: Xray}

This filter takes no parameters, as reflected in the following example:

{filter: xray}

Reveal transition filter
This is a personal favorite of mine, mostly because I am inherently lazy, and, though not actually accessed by a style sheet, you can develop a nice page transition by simply writing it in the meta tag at the beginning of a document. The revealtrans filter has the following syntax:

{filter: revealtrans(duration=value, transition=value)}

Possible values include a floating-point number as a duration value and an integer for the type of transition you want. There are several kinds of transitions an object or page can make as it reveals itself. These transitions are listed.

Possible transistions

Two of the possible transition values are used in the following example:

.filter {filter: revealtrans(duration=10, transition=22)}

This style sheet creates a transition that can be applied to whatever HTML element takes the class name “filter.” You can also apply a transition page to a page as it is loaded or as it exits the page:

<META HTTP-EQUIV=“Page-Enter”
CONTENT=“RevealTrans(Duration=5,Transition=2)”>

Simply include this in your head tag along with any other meta tags you might have. Browsers that don’t support the transition will simply ignore it. You can also write a transition that creates the effect as the browser unloads the page:

<META HTTP-EQUIV=“Page-Exit”
CONTENT=“RevealTrans(Duration=5,Transition=2)”>

In fact, it’s been my experience that this tends to work better than the pages that have the Page-Enter attribute.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics