Introduction

These samples show how to combine IE's visual filters to achive some "good looking" effects. Everybody that knows their Photoshop stuff well knows what some playing with standard filters can achieve. Click on the samples to see the style that was added.

3D Text

This was made using one span with blur and then another one atop of it.

WebFX WebFX

Glass Text

Same tecnique as above but both have alpha filters added.

WebFXWebFX

Background Picture Text

This is a bit tricky. First (actually last but think of it as first) you create the text and applying a mask (this makes the text transparent and the rest the maskcolor). Then below this you have div with a background color. Surronding these two you have a div with the chroma filter (this removes the mask color).

WebFX

Inner Shadow

First I added a mask() to remove the inside, then a shadow() was added. Since there is nothing inside the shadow is displayed inside. Then I removed the mask using chroma(). Before this I added the same text with a white color and the second text was moved above this using position: relative; left: -200px;

WebFXWebFX

Outline Text

You could just add glow but it looks better if the glowing is placed on the inside. To do this you add mask, glow and chroma.

WebFX

More to follow...

Maybe I'll try to create some more but this will do for now. If you got any nice ideas please post them to me or EAE. Remember that you can use the Filter Tool to try some filter combinations!

Author: Erik Arvidsson