Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

Easy Visual Effects to Spice Up Your Webpage

By Stephen Bucaro

Starting with version 4.0, Microsoft began implementing functions in Internet Explorer that let you use some very interesting visual effects on your Web page. With the release of Internet Explorer 5.5, these effects included filters, transitions, and Vector Markup Language. Using Cascading Style Sheets (CSS), you can implement the effects on your Webpage. Using Dynamic HTML (DHTML), you create dynamic visual effects that rival Flash, without the high cost and excessive download time.

Filters are the easiest visual effects to create. In this article, I will explain how to use filters to add interesting visual effects to your Webpage. To make learning easier, I will keep the code to bare bones minimum. My goal is to make the code easy for you to understand and modify to create your own custom visual effects.

Static filters are the easiest visual effects to create. With some very simple CSS code, you can apply a filter to create an effect, such as a drop shadow behind the text. Static filter effects are a very easy way to enhance a Webpage with minimum effort and without scripting. One of the easiest static filters is "glow".

Bucaro TecHelp

The code shown below makes the text "Bucaro TecHelp" appear to glow.

<span style="position:relative; width:250; height:50;
font-family:verdana; font-size:24pt; font-style:bold;
 color:#00ff00;
filter:progid:DXImageTransform.Microsoft.Glow
(Color=#00cc00,Strength=5)">Bucaro TecHelp</span>

All the code in this article will be similar to that shown above, so I'll explain it in detail here. The code defines an html span. A span defines a retangular area on a webpage. The style property "position:relative;" lets the span into position along with the other elements on the webpage. To lock the span into position on the webpage, specify "position:absolute;", and then define a "left" and "top" pixel location. The "Width" and "height" properties should be set large enough so that the "font-size" can fit inside the span.

The second line is where you specify the font. This code is easy to understand, except for the "color" attribute. The pound sign in the color attribute indicates that the number is "hexadecimal" coded. The number is divided into three sections, two characters each to specify the amount red, green, and blue of which the color will be composed. So you can see the amount of red and blue are zero, and the amount of green is "ff".

Note: The decimal numbering system uses numbers 0 through 9 to get 10 values. The hexadecimal numbering system uses numbers 0 through f to get 16 values. The hexadecimal numbering system is used quite frequently in web design, especially for color definitions, so you might want to become familiar with it. You probably recognized that the color #00ff00 is simply green, but you could just code "color:green;" and it would work.

The line starting with the word "filter" applies the filter. Within the parenthisis are the parameters passed to the filter. You only need two parameters to make the glow filter work, "color" and "strength".

To use this code, simply paste it into the body of your webpage. Change the text "Bucaro TecHelp" to your text. Then experiment with different font, color, and glow filter parameters. I personally think the text should be brighter than the glow to make it look like the text is glowing. You can experiment with different values to see what looks best. You can paste as many of these html spans into your webpage as you like, using different parameters with each.

Bucaro TecHelp

The code shown below makes the text "Bucaro TecHelp" appear to have a shadow.

<span style="positon:relative; width:250; height:50;
font-family:verdana; font-size:24pt; font-style:bold;
 color:#00ff00;
filter:progid:DXImageTransform.Microsoft.shadow
(color=#00cc00, direction=135, strength=4)">
Bucaro TecHelp</span>

The shadow filter needs three parameters, "color", "direction" and "strength". In this example, I reduced the amount of green in the shadow (relative to the text) from #00ff00 to #00cc00. The direction is from 0 to 360 with 0 at the top and increasing clockwise. The direction 135 (135 degrees) causes the shadow to go to the lower right, as if the light was coming from the upper left. If you look at the 3D elements on your browser, you'll see this is the convention.

Paste the code into the body of your webpage. Change the text to your text. Then experiment with different font, color, and shadow filter parameters. You can paste as many of these html spans into a webpage as you like, using different parameters with each.