Visual Filters in DHTML

The shadow and glow visual filters

here are the blur and alpha filters

DHTML - dynamic HTML - allows us to introduce dynamic content into our web pages, without loading another page. Visual Filters and Transitions can give us visual effects that would otherwise require scripting or Java applets. dhtml started with Internet Explorer 4. The dissolve effect on opening and closing this page is done with a transition filter. Try passing the mouse over this page. Here, we have a dhtml visual filter showing shadowed text:-

http://kelvin.infinites.net
Hampton Wick
A village in S.W. London U.K.

Here's the code for the blue shadow:-

 <div style="width:100%;height:150;text-align:center;filter:shadow(color=blue)"> 

		<font color=blue size=+3><br>

		http://kelvin.infinites.net<br>

		Hampton Wick <br>

		A village in S.W. London U.K.<br>

		</font>

	

</div>

Some may notice that height and width do not belong in <div>, but they are needed for dhtml visual filters.

Search engines may be looking for the <H1> tag, so we may need to exercise care when applying filters to page headings. Also, note that visual filters are most easily applied in divisions that allow the full page width to be used.

This combination of five dhtml visual filters adds a shadow to an image, flips it vertically and horizontally, blurs it and inverts the colours:-

Here's the code:-

<div style="width:100%;height:150;text-align:center;filter:shadow(color=maroon) flipV flipH blur() invert()"> <img src=tile.jpg align="center"> </div>

This next dhtml visual filter is called glow, and you will see that it takes variable parameters:-

http://kelvin.infinites.net
Hampton Wick
beside the River Thames in London.

Here is the code for the glow filter:-

<div style="width:100%;height:150;text-align:center;filter:glow(color=red; strength=50)">
<font color=maroon size=+2>http://kelvin.infinites.net <br>
Hampton Wick <br>
beside the River Thames in London.</font> </div>