General info & examples re Filters & Transitions

back  -  home  -  filters index

NOTE: One important thing to note. You need to apply the filter effects to an object that has measurements i.e. width etc. such as an image, table cell. You cannot apply the effect to say <H1> or <p>.  To overcome this, you can create a <div> or <span>, giving them measurements, then whatever is within those tags will have the effect applied to them. Here is an example and the glow effect has been applied:

<span style="width: 568; filter: progid:DXImageTransform.Microsoft.Glow (Strength='2', color='green') align:centre;font-weight:bold;font-size:14px;"><p align="left">Text or image goes in here</span>

If you use a WYSIWYG editor, such as Front Page, then the effects can only be seen in the Preview mode or your browser, not in normal mode.

Anyway, have fun using some of the effects, I have certainly had fun compiling them.

EXAMPLES

Here is an example of a RandomDissolve Transition effect between text and a background image:

Mouse over Me

Here are some more examples of what can be achieved

Please read the following before using any of the effects. This just contains general info that may help you. Also a selection of effects for you to view. Then check out the links on the filters index page where some of the effects are fully explained.

Microsoft Filters and Transitions are viewable by IE4 and 5.5.

Filter effects are very much like the filters you apply to graphics in a graphic program. You can apply shadows, blur effects, invert the colors and even make text or an object glow. For browsers that cannot see the effects - the original text, image etc is still viewable as normal - just the effect is missing, so make sure that whatever effect you apply, the page would still view okay without it. It is no good having white text on a white background, then applying a red "glow". People who cannot see the effect, would then only have white text on white background i.e. invisible!

Transitions are time-based filters that create an effect when going from one visual state to another. By combining filters and transitions with basic scripting, you can create visually engaging and interactive documents.

Some effects behave differently in IE4 and IE5.5, and some effects are only viewable in IE5.5. However, I think the end result is quite worth the effort of using some of them. I do not propose going into any great length on how one can combine the filters to produce different effects or the workings of them all. These pages really are just to show you what can be achieved.