Website
Design

Service

ScriptFX - Web page design help

Become a
Domain Reseller

Here
 

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:

The glow effect has been added to a <span>.  Style has been added  to give the measurements etc. Here is an example of code:

<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

WHAT
IS
HIDDEN
UNDER
TEXT

Here are some more examples of what can be achieved

Invert Image
Grayscale Image
Mirror Image
X-ray Image
Wave Filter
Blur Filter
Shadow Filter
DropShadow Filter
Emboss Filter
Glow Filter

Restore

 

Here a transparent .gif has had the effects applied to it.

 

Invert Image
Grayscale Image
Mirror Image
X-ray Image
Wave Filter
Blur Filter
Shadow Filter
DropShadow Filter
Emboss Filter
Glow Filter

Restore

This time, the same filters are applied to a <div> which has a colored background. The cell is also colored to help show off the effect, but the effect is only applied to the <div>


 

HERE IS SOME TEXT THAT THE FILTERS WILL BE APPLIED TO

 

Invert Image
Grayscale Image
Mirror Image
X-ray Image
Wave Filter
Blur Filter
Shadow Filter
DropShadow Filter
Emboss Filter
Glow Filter

Restore

Now the filters are applied to the same <div>, but with no colored background to the <div> itself, only the table cell is colored to show off the effect more.

 

HERE IS SOME TEXT THAT THE FILTERS WILL BE APPLIED TO

 

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.

back  -  home  -  Filter scripts

 

Discount Templates Discount Domains Domain Reseller  Template-Layouts 
Sponsor a child    Living Kidney Donation