The IE 5.5 Special Effects Gallery

1 Conversation



Microsoft Internet Explorer 5.5 contains a number of visual filters which can be added to standard HTML to

spice up web pages. The article Using

IE 5.5 Visual Filters in Guide-ML introduces these features, explains how they can be incorporated into

Guide-ML-compatible commands, and provides simple examples and sample code.

This article is a gallery of special effects using these filters. The code producing each effect is

provided, and you are of course very welcome to use these on your own pages.

Disclaimer

NB. If you are viewing h2g2 in a version of IE prior to 5.5, or in another browser altogether, you may not

be able to view the effects as displayed and described here. In fact you will probably wonder what all the fuss

is about.

Submitting entries for the IE5.5 Gallery

Just drop me a message in the "Submit Your IE5.5 Special Effect" conversation below. Include a link to an

article containing the effect. If I use it here, then I will of course credit you. Please do not submit

other people's work as your own, although let me know of any others you see around the place, and I may add

links to them.

The Gallery

Rainbow Stripe

Notes: This uses the Gradient procedural surface effect across six horizontal table cells. As it is an

underlying surface, it is possible to type some text on top, although this would be restricted by having to

balance the text by typing some in each cell. Use the WIDTH and HEIGHT parameters to adjust the dimensions of

the stripe.

</TABLE>
<TABLE WIDTH="100%" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR HEIGHT="100px">
<TD style="FILTER:
progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ff0000,endColorStr=#ff6600);">
</TD>
<TD style="FILTER:
progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ff6600,endColorStr=#ffff00);">
</TD>
<TD style="FILTER:
progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffff00,endColorStr=#00ff00);">
</TD>
<TD style="FILTER:
progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#00ff00,endColorStr=#0000ff);">
</TD>
<TD style="FILTER:
progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#0000ff,endColorStr=#000033);">
</TD>
<TD style="FILTER:
progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#000033,endColorStr=#660066);">
</TD>
</TR>
</TABLE>

Flag Wave

Notes: This uses a Wave effect sandwiched between two BasicImage rotations to produce a lateral wave. This

could be useful for producing a fluttering flag, for example. Use the FREQ and STRENGTH parameters to adjust

the amount of fluttering.

<TABLE><TR><TD><IMG style="
FILTER:
progid:DXImageTransform.Microsoft.BasicImage(Rotation=3)
progid:DXImageTransform.Microsoft.Wave(Freq=1,LightStrength=10,Phase=90,Strength=5)
progid:DXImageTransform.Microsoft.BasicImage(Rotation=1)"
WIDTH="100px" HEIGHT="100px"
src="B1035830"/></TD></TR></TABLE>

And here are a few flags from the 2006 World Cup. These are displayed side by side by using a nested

table.

<TABLE>
<TR>
<TD>
<!-- Germany -->
<TABLE style="
FILTER:
progid:DXImageTransform.Microsoft.BasicImage(Rotation=3)
progid:DXImageTransform.Microsoft.Wave(Freq=1,LightStrength=10,Phase=90,Strength=3)
progid:DXImageTransform.Microsoft.BasicImage(Rotation=1)"
HEIGHT="14px" WIDTH="23px" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR><TD BGCOLOR="#000000"></TD></TR>
<TR><TD BGCOLOR="#FF0000"></TD></TR>
<TR><TD BGCOLOR="#FFD700"></TD></TR></TABLE>
</TD>
<TD>
<!-- England -->
<TABLE style="
FILTER:
progid:DXImageTransform.Microsoft.BasicImage(Rotation=3)
progid:DXImageTransform.Microsoft.Wave(Freq=1,LightStrength=10,Phase=90,Strength=3)
progid:DXImageTransform.Microsoft.BasicImage(Rotation=1)"
HEIGHT="14px" WIDTH="23px" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR ROWSPAN="2">
<TD COLSPAN="2" BGCOLOR="#FFFFFF"></TD>
<TD COLSPAN="1" BGCOLOR="#FF0000"></TD>
<TD COLSPAN="2" BGCOLOR="#FFFFFF"></TD></TR>
<TR ROWSPAN="1">
<TD COLSPAN="5" BGCOLOR="#FF0000"></TD>
</TR>
<TR ROWSPAN="2">
<TD COLSPAN="2" BGCOLOR="#FFFFFF"></TD>
<TD COLSPAN="1" BGCOLOR="#FF0000"></TD>
<TD COLSPAN="2" BGCOLOR="#FFFFFF"></TD></TR>
</TABLE>
</TD>
<TD>
<!-- France -->
<TABLE style="
FILTER:
progid:DXImageTransform.Microsoft.BasicImage(Rotation=3)
progid:DXImageTransform.Microsoft.Wave(Freq=1,LightStrength=10,Phase=90,Strength=3)
progid:DXImageTransform.Microsoft.BasicImage(Rotation=1)"
HEIGHT="14px" WIDTH="23px" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>
<TD BGCOLOR="#0000FF"></TD>
<TD BGCOLOR="#FFFFFF"></TD>
<TD BGCOLOR="#FF0000"></TD>
</TR></TABLE>
</TD>
<TD>
<!-- Netherlands -->
<TABLE style="
FILTER:
progid:DXImageTransform.Microsoft.BasicImage(Rotation=3)
progid:DXImageTransform.Microsoft.Wave(Freq=1,LightStrength=10,Phase=90,Strength=3)
progid:DXImageTransform.Microsoft.BasicImage(Rotation=1)"
HEIGHT="14px" WIDTH="23px" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR><TD BGCOLOR="#FF0000"></TD></TR>
<TR><TD BGCOLOR="#FFFFFF"></TD></TR>
<TR><TD BGCOLOR="#0000FF"></TD></TR></TABLE>
</TD>
<TD>
<!-- Ivory Coast -->
<TABLE style="
FILTER:
progid:DXImageTransform.Microsoft.BasicImage(Rotation=3)
progid:DXImageTransform.Microsoft.Wave(Freq=1,LightStrength=10,Phase=90,Strength=3)
progid:DXImageTransform.Microsoft.BasicImage(Rotation=1)"
HEIGHT="14px" WIDTH="23px" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>
<TD BGCOLOR="#FF8C00"></TD>
<TD BGCOLOR="#FFFFFF"></TD>
<TD BGCOLOR="#008000"></TD>
</TR></TABLE>
</TD>
<TD>
<!-- Sweden -->
<TABLE style="
FILTER:
progid:DXImageTransform.Microsoft.BasicImage(Rotation=3)
progid:DXImageTransform.Microsoft.Wave(Freq=1,LightStrength=10,Phase=90,Strength=3)
progid:DXImageTransform.Microsoft.BasicImage(Rotation=1)"
HEIGHT="14px" WIDTH="23px" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR ROWSPAN="2">
<TD COLSPAN="2" BGCOLOR="#0000CD"></TD>
<TD COLSPAN="1" BGCOLOR="#FFFF00"></TD>
<TD COLSPAN="4" BGCOLOR="#0000CD"></TD></TR>
<TR ROWSPAN="1">
<TD COLSPAN="7" BGCOLOR="#FFFF00"></TD>
</TR>
<TR ROWSPAN="2">
<TD COLSPAN="2" BGCOLOR="#0000CD"></TD>
<TD COLSPAN="1" BGCOLOR="#FFFF00"></TD>
<TD COLSPAN="4" BGCOLOR="#0000CD"></TD></TR>
</TABLE>
</TD>
<TD>
<!-- Spain -->
<TABLE style="
FILTER:
progid:DXImageTransform.Microsoft.BasicImage(Rotation=3)
progid:DXImageTransform.Microsoft.Wave(Freq=1,LightStrength=10,Phase=90,Strength=3)
progid:DXImageTransform.Microsoft.BasicImage(Rotation=1)"
HEIGHT="14px" WIDTH="23px" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR ROWSPAN="3">
<TD BGCOLOR="#FF0000"></TD>
</TR>
<TR ROWSPAN="5">
<TD BGCOLOR="#FFFF00"></TD>
</TR>
<TR ROWSPAN="3">
<TD BGCOLOR="#FF0000"></TD>
</TR>
</TABLE>
</TD>
<TD>
<!-- Portugal -->
<TABLE style="
FILTER:
progid:DXImageTransform.Microsoft.BasicImage(Rotation=3)
progid:DXImageTransform.Microsoft.Wave(Freq=1,LightStrength=10,Phase=90,Strength=3)
progid:DXImageTransform.Microsoft.BasicImage(Rotation=1)"
HEIGHT="14px" WIDTH="23px" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>
<TD COLSPAN="5" BGCOLOR="#3CB371"></TD>
<TD COLSPAN="8" BGCOLOR="#FF0000"></TD>
</TR></TABLE>
</TD>
<TD>
<!-- Poland -->
<TABLE style="
FILTER:
progid:DXImageTransform.Microsoft.BasicImage(Rotation=3)
progid:DXImageTransform.Microsoft.Wave(Freq=1,LightStrength=10,Phase=90,Strength=3)
progid:DXImageTransform.Microsoft.BasicImage(Rotation=1)"
HEIGHT="14px" WIDTH="23px" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR><TD BGCOLOR="#FFFFFF"></TD></TR>
<TR><TD BGCOLOR="#FF0000"></TD></TR></TABLE>
</TD>
<TD>
<!-- Switzerland -->
<TABLE style="
FILTER:
progid:DXImageTransform.Microsoft.BasicImage(Rotation=3)
progid:DXImageTransform.Microsoft.Wave(Freq=1,LightStrength=10,Phase=90,Strength=3)
progid:DXImageTransform.Microsoft.BasicImage(Rotation=1)"
HEIGHT="14px" WIDTH="14px" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR >
<TD COLSPAN="5" BGCOLOR="#FF0000"></TD>
</TR>
<TR >
<TD COLSPAN="2" BGCOLOR="#FF0000"></TD>
<TD COLSPAN="1" BGCOLOR="#FFFFFF"></TD>
<TD COLSPAN="2" BGCOLOR="#FF0000"></TD></TR>
<TR >
<TD COLSPAN="1" BGCOLOR="#FF0000"></TD>
<TD COLSPAN="3" BGCOLOR="#FFFFFF"></TD>
<TD COLSPAN="1" BGCOLOR="#FF0000"></TD></TR>
<TR >
<TD COLSPAN="2" BGCOLOR="#FF0000"></TD>
<TD COLSPAN="1" BGCOLOR="#FFFFFF"></TD>
<TD COLSPAN="2" BGCOLOR="#FF0000"></TD></TR>
<TR >
<TD COLSPAN="5" BGCOLOR="#FF0000"></TD>
</TR>
</TABLE>
</TD>
<TD>
<!-- Serbia -->
<TABLE style="
FILTER:
progid:DXImageTransform.Microsoft.BasicImage(Rotation=3)
progid:DXImageTransform.Microsoft.Wave(Freq=1,LightStrength=10,Phase=90,Strength=3)
progid:DXImageTransform.Microsoft.BasicImage(Rotation=1)"
HEIGHT="14px" WIDTH="23px" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR><TD BGCOLOR="#0000FF"></TD></TR>
<TR><TD BGCOLOR="#FF0000"></TD></TR>
<TR><TD BGCOLOR="#FFFFFF"></TD></TR></TABLE>
</TD>
<TD>
<!-- Togo -->
<TABLE style="
FILTER:
progid:DXImageTransform.Microsoft.BasicImage(Rotation=3)
progid:DXImageTransform.Microsoft.Wave(Freq=1,LightStrength=10,Phase=90,Strength=3)
progid:DXImageTransform.Microsoft.BasicImage(Rotation=1)"
HEIGHT="14px" WIDTH="23px" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR >
<TD COLSPAN="5" BGCOLOR="#FF0000"></TD>
<TD COLSPAN="8" BGCOLOR="#008000"></TD></TR>
<TR >
<TD COLSPAN="2" BGCOLOR="#FF0000"></TD>
<TD COLSPAN="1" BGCOLOR="#FFFFFF"></TD>
<TD COLSPAN="2" BGCOLOR="#FF0000"></TD>
<TD COLSPAN="8" BGCOLOR="#FFFF00"></TD></TR>
<TR >
<TD COLSPAN="5" BGCOLOR="#FF0000"></TD>
<TD COLSPAN="8" BGCOLOR="#008000"></TD></TR>
<TR >
<TD COLSPAN="13" BGCOLOR="#FFFF00"></TD></TR>
<TR >
<TD COLSPAN="13" BGCOLOR="#008000"></TD></TR>
</TABLE>
</TD>
<TD>
<!-- Argentina -->
<TABLE style="
FILTER:
progid:DXImageTransform.Microsoft.BasicImage(Rotation=3)
progid:DXImageTransform.Microsoft.Wave(Freq=1,LightStrength=10,Phase=90,Strength=3)
progid:DXImageTransform.Microsoft.BasicImage(Rotation=1)"
HEIGHT="14px" WIDTH="23px" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR><TD COLSPAN="7" BGCOLOR="#87CEEB"></TD></TR>
<TR><TD COLSPAN="3" BGCOLOR="#FFFFFF"></TD>
<TD COLSPAN="1" BGCOLOR="#FFD700"></TD>
<TD COLSPAN="3" BGCOLOR="#FFFFFF"></TD>
</TR>
<TR><TD COLSPAN="7" BGCOLOR="#87CEEB"></TD></TR>
</TABLE>
</TD>

</TR>
</TABLE>

Multi-coloured Glow

Notes: This is four overlaid Shadow effects, using a different colour in each corner. Setting the strength

higher than 3 can cause some of the text to be obscured.


Font face = Impact, Size=6, white text, multicoloured shadows, strength 3.

<!-- Multi-coloured Glow -->
<TABLE><TR>
<TD STYLE="filter:
progid:DXImageTransform.Microsoft.Shadow(color=#999900,direction=45,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#990000,direction=135,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#000099,direction=225,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#009900,direction=315,strength=3)">
<FONT COLOR="FFFFFF" SIZE="6" FACE="IMPACT">
Font face = Impact, Size=6, white text, multicoloured shadows, strength 3.
</FONT>
</TD>
</TR></TABLE>

Cropped Image

Notes: Use the AlphaImageLoader filter to crop an image. Here's a half-badge.


<!-- Cropped Image -->
<TABLE><TR HEIGHT="76px"><TD
STYLE="position:relative; width:40px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='/h2g2/skins/Alabaster/images/25_Edited_Entries.gif', sizingmethod=crop);">
</TD></TR></TABLE>

Bookmark on your Personal Space


Entry

A12458586

Infinite Improbability Drive

Infinite Improbability Drive

Read a random Edited Entry


Written and Edited by

References

h2g2 Entries

Disclaimer

h2g2 is created by h2g2's users, who are members of the public. The views expressed are theirs and unless specifically stated are not those of the Not Panicking Ltd. Unlike Edited Entries, Entries have not been checked by an Editor. If you consider any Entry to be in breach of the site's House Rules, please register a complaint. For any other comments, please visit the Feedback page.

Write an Entry

"The Hitchhiker's Guide to the Galaxy is a wholly remarkable book. It has been compiled and recompiled many times and under many different editorships. It contains contributions from countless numbers of travellers and researchers."

Write an entry
Read more