USING THE GLOW FILTERS
 (Internet Explorer 4 or newer only)
 

BACKGROUND

 
  
Warning
The technique described in this tutorial uses Microsoft specific extensions.  Specifically, the "Glow" filter is specific to Microsoft browsers, so this technique only works on Internet Explorer 4 or newer.   

Syntax
The glow effect can be added by adding the following filter property to a style-sheet:  
filter:progid:DXImageTransform.Microsoft.Glow(Strength, Color, Enabled) 

Notes:

  • All the parameters are optional.  
  • The Strength parameter specifies the pixel distance of the glow.  
  • The Color parameter specified the color of the glow.  It can be specified as #AARRGGBB, which is composed of the hexadecimal valued of alpha, red, green, and blue.  Or, the alpha component can also be ignored by specifying the 6 digits #RRGGBB format.  For more info on color, click here.   
  • The Enabled parameter is a boolean value, which accepts true or false.  
  • More information is available at Microsoft site:  http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/glow.asp
          
 

GLOWING TEXT

 
 


When glowing normal text elements, you can use <DIV> or <SPAN> tag as a generic type.  In addition, you can also glow predefined text elements, such as <H1> and <LI>.   Below are some examples:

Using inline style-sheet on a <SPAN> element 

<SPAN STYLE="filter:progid:DXImageTransform.Microsoft.Glow(Color=#FF0000, Strength=5); 
  width:100%">This text is glowing</SPAN>
 
The #FF0000 is the RGB value of red.  That code produces something like this:  

This text is glowing.

 The width or height property of the style sheet must be specified when applying the filter to text elements.  In the above example, I set the width to 100%.  In general, if you're having problems with the filter not behaving as expected, the first thing to do is to make sure that the width or height property is specified in the style-sheet.  (Note: setting width to 100% could be problematic in certain situation - as you will see later.) 

Using inline style-sheet on a <H2> element: 

<H2 STYLE="filter:progid:DXImageTransform.Microsoft.Glow(Color=#FF0000, Strength=5); 
  width:100%">This H1 element is glowing</H2>

This H2 element is glowing

Using internal style-sheet with <SPAN> element

 Here I'm creating a class named "glowClass" and "glow2Class" and I can apply the class to html elements that I want to glow. 

<STYLE>
<!--
.glowClass {filter:progid:DXImageTransform.Microsoft.Glow(Color=#8800FF00, Strength=3)}
.glow2Class {filter:progid:DXImageTransform.Microsoft.Glow(Color=#FF00FF, Strength=5)}
//-->
</STYLE>

Example:

<SPAN CLASS="glowClass">This text is glowing using the glowClass.</SPAN>
<SPAN CLASS="glow2Class">This text is glowing using the glow2Class.</SPAN>

This text is glowing using the glowClass.
This text is glowing using the glow2Class.

Using internal style-sheet width <DIV> element
The same same style-sheet can be used on elements such as DIV or H2. 

<DIV CLASS="glowClass2" STYLE="font-size:2em;">
  This text is glowing using the glow2Class.</DIV>

<H2 CLASS="glowClass">This H2 is glowing using the glowClass.</H2>

This text is glowing using the glow2Class.

This H2 is glowing using the glowClass.

Highlighting link elements
Two examples are shown below.  The first one is using the same same style-sheet as above.  The second one is using inline style-sheet: 

<A CLASS="glowClass" HREF="blank.html">This link is glowing using the glowClass.</A>

<A STYLE="filter:progid:DXImageTransform.Microsoft.Glow(Color=#FF0000, Strength=5); 
  width:100%" HREF="blank.html">This link is glowing using internal style-sheet.</A>

This link is glowing using the glowClass.
This link is glowing using internal style-sheet.

Using inline style-sheet on a <SPAN> element within a paragraph:

Recall that one of the glitches that we have to deal with with filters is that the width or height property must be specified when applying to text elements.  Although I usually can just set the width to 100%; this is problematic because setting the width to 100% will cause a line break to be added.  It's not easy to know in advance the width of the text, but fortunately, there is a workaround: in this situation: set the height to a value that is reasonably close to the height of the font.  (Note: setting the height to 1px usually works also, but that is risky).  An example is below: 

<p>This is a line above the glowing text.<br>
This is a paragraph with 
<SPAN STYLE="filter:progid:DXImageTransform.Microsoft.Glow(Color=#FF0000, Strength=5);\
   height:12px;">&quot;glowing&quot;</SPAN> portion<BR>
This is a new line below the glowing text.</p>
 

This is a line above the glowing text.
This is a paragraph with "glowing" portion
This is a new line below the glowing text.

  
 

GLOWING NON-TEXTUAL ELEMENTS

  
 


The glow filter can also be applied to non textual elements.  Here are some examples:

Using inline style-sheet on a <TABLE> element: 

<table 
  STYLE=
    "filter:progid:DXImageTransform.Microsoft.Glow(Color=#FF0000,Strength=5); width:60%" 
  border="1">
  <tr>
    <td width="50%" bgcolor="#CCCCCC">&nbsp;Table text</td>
    <td width="50%" bgcolor="#CCCCCC"><b>
      <font size="6" color="#FFFF00">Table text</font></b>
    </td>
  </tr>
  <tr>
    <td width="50%">&nbsp;</td>
    <td width="50%"><b><font size="6" color="#0000FF">Table text</font></b></td>
  </tr>
</table>

The table looks like below:

 Table text Table text
  Table text

Using inline style-sheet on a <IMG> element: 

<img 
  STYLE="filter:progid:DXImageTransform.Microsoft.Glow(Color=#FFFF00,Strength=15);" 
    border="0" src="images/image2.jpg" width="250" height="200">

If the image is nontransparent, then the glow is added around the image.  Frankly, this isn't very useful except maybe to glow the image when the mouse is over it.

On a transparent image, though, the glow is added around the transparent edges:

  
 

MAKING LINKS GLOW UPON MOUSE OVERS

  
 


We can override the hover pseudo class to assign the filter when the mouse is hovering over the link.

Glowing upon mouse overs: 

<STYLE>
<!--
a:hover 
{
  filter:progid:DXImageTransform.Microsoft.Glow(Color=#FF0000, Strength=5); 
  width:100%;
}
//-->
</STYLE>

The width or height property must be specified.  
  
<A HREF="link.html">This link is will glow.</A>

This link will glow

If the link does not falls on a new line, the width must not be set to 100%.  If you do that, the link will jump into a new line, like this for example: This paragraph has a link.  Move the mouse over the link.

The workaround for this is to set the height to something reasonably close to the font height (setting it to 1px also seem to work-but it's a risky hack) :
<STYLE>
<!--
a:hover 
{
  filter:progid:DXImageTransform.Microsoft.Glow(Color=#FF0000, Strength=5); 
  height:12px;
}
//-->
</STYLE>

The following is a link within a paragraph.

Changing glow color upon mouse overs:

To make the link glow at all time, simply add the filter to the normal link style (bold portion below), and then alter the color on the link's hover class to change the color of the glow. 

<STYLE>
<!--
a
{
  filter:progid:DXImageTransform.Microsoft.Glow(Color=#FFFFCC, Strength=5); 
  height:12px;
}
a:hover 
{
  filter:progid:DXImageTransform.Microsoft.Glow(Color=#FF0000, Strength=5); 
  height:12px;
}
//-->
</STYLE>

Example link.
 

 

<<INDEX>>

 Terms of Use
(C) F. Permadi