I.E. Filters - CSS - Web Dev. - Neils Resource Web| Summary of Content |
| Unfortunately Internet Explorer Only. CSS filters are a pretty simple way to add effects to text, images etc.. without having to build your own special graphics using the likes of Photoshop, PSP etc. As with the Gradient (has its own page) filter these only work on Internet Explorer 4.0+, and only work on text if height and width are specified. The filters that only work on an image if it has transparent parts are indicated. If you hit that magic result it may be worth trying to replicate it in a graphics package for cross browser compatability as I can't see any other browser opting to support these filters (?). A word of Warning the use of these filters can cause HTML and / or CSS validation errors. This doesn't mean they won't work, its a Microsoft 'standards' thing. Just be sure to test them out cross browser wise. Frontpage extensions enabled on your (or ISP) server will help everyone to see the site as you planned. |
A double mouse click anywhere on the page (except when over hyperlinks) will take you back to the top. |
| Alpha | |
| Alters the opacity of the object, which makes it blend into the background. | |
| Style 1 - IMAGES or Text fades from Right to Left | |
Using Text |
<span style="width:50;height:20;font-size:20px;color:#000080;font-weight:bold;filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=200, FinishY=0)"Using Text"</span> |
|
<img src="image.gif" width="90" height="67" style="filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=200, FinishY=0)"> |
| Style 2 - Gives a Feather effect Around the text or Image | |
Using Text |
<span style="width:50;height:20;font-size:20px;color:#000080;font-weight:bold;filter:alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=0, StartY=0, FinishX=200, FinishY=0)">Using Text</span> |
|
<img src="image.gif" width="90" height="67" style="filter:alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=0, StartY=0, FinishX=200, FinishY=0)"> |
| Style 3 - Gives a Rectangle effect Around the text or Image | |
Using Text |
<span style="width:50;height:20;font-size:20px;color:#000080;font-weight:bold;filter:alpha(Opacity=100, FinishOpacity=0, Style=3, StartX=0, StartY=0, FinishX=200, FinishY=0)">Using Text</span> |
|
<img src="image.gif" width="90" height="67" style="filter:alpha(Opacity=100, FinishOpacity=0, Style=3, StartX=0, StartY=0, FinishX=200, FinishY=0)"> |
| Parameters | |
| opacity | Level of the opacity. 0 is fully transparent, 100 is fully opaque. |
| finishopacity | Level of the opacity at the other end of the object. |
| style | The shape of the opacity gradient:
|
| startX | X coordinate for opacity gradient to begin. |
| startY | Y coordinate for opacity gradient to begin. |
| finishX | X coordinate for opacity gradient to end. |
| finishY | Y coordinate for opacity gradient to end. |
| Blur | |
| Adds a motion blur to images and text. | |
| This needs experimenting with, could be o.k for 'fat' text, but images(!) | |
| Using Text | <span style="width:50;height:20;font-size:20px;color:#000080;font-weight:bold;filter:blur(add=1, direction=50, strength=7)">Using Text</span> |
 |
<img src="image.gif" width="90" height="67" style="filter:blur(add=0, direction=50, strength=7)"> |
| Parameters | |
| add | True or false. If true, the image is added to the blurred image; if false, the image is not added to the blurred image. |
| direction | The direction of the blur, going clockwise, rounded to 45-degree increments. The default value is 270 (left):
|
| strength | The number of pixels the blur will extend. The default is 5 pixels. |
| Chroma | |
| Makes a specific colour transparent. Usually used with images, but it also works with scrollbars and backgrounds. | |
Using Text |
<span style="width:50;height:20;font-size:20px;color:#000080;font-weight:bold;filter:chroma(color=#000080)"Using Text"</span> |
|
img src="image.gif" width="90" height="67" style="filter:chroma(color=#FFFFFF)"> |
| Parameters | |
| color | The colour that you'd like to be transparent. |
| Drop Shadow | |
| Creates a shadow of your object at the specified X (horizontal) and Y (vertical) offset and colour. | |
| Using Text | <<span style="width:50;height:20;font-size:20px;color:#000080;font-weight:bold;filter:dropshadow(color=#9BAD71, offx=5, offy=5)">Using Text</span> |
|
<img src="image.gif" width="90" height="67" style="filter:dropshadow(color=#9BAD71, offx=5, offy=5)"> |
| Parameters | |
| color | The colour, in #RRGGBB format, of the drop shadow. |
| offx | Number of pixels the drop shadow is offset from the visual object, along the x-axis. Positive integers move the drop shadow to the right, negative integers move the drop shadow to the left. |
| offY | Number of pixels the drop shadow is offset from the visual object, along the y-axis. Positive integers move the drop shadow down, negative integers move the drop shadow up. |
| positive | If true, all opaque pixels of the object have a drop shadow. If false, all transparent pixels have a drop shadow. The default is true. |
| FlipH | |
| Creates a horizontal mirror image of the object. Good with images for a 'bookends' effect. | |
Using Text |
<span style="width:50;height:20;font-size:20px;color:#000080;font-weight:bold;filter:fliph">Using Text</span> |
|
<img src="image.gif" width="90" height="67" style="filter:fliph"> |
| FlipV | |
| Creates a vertical mirror image of the object. | |
| Using Text | <span style="width:50;height:20;font-size:20px;color:#000000;font-weight:bold;filter:flipv">Using Text</span> |
|
<img src="image.gif" width="90" height="67" style="filter:flipv"> |
| Glow | |
| Creates a glow around the object. If it's a transparent image, the glow is created around the opaque pixels of it. | |
Using Text |
<span style="width:50;height:20;font-size:20px;color:#000080;font-weight:bold;filter:glow(color=#FFD700, strength=7)">Using Text</span> |
|
<img src="image.gif" width="90" height="67" style="filter:glow(color=#FFD700, strength=7)"> |
| Parameters | |
| color | The colour you want the glow to be. |
| strength | The intensity of the glow (from 1 to 255). |
| Greyscale | |
| Converts the the colours of the object to 256 shades of gray. | |
Using Text |
<span style="width:50;height:20;font-size:20px;color:#FFFFFF;font-weight:bold;filter:gray">Using Text</span> |
|
<img src="image.gif" width="90" height="67" style="filter:gray"> |
| Invert | |
| Maps the colours of the object to their opposite value in the color spectrum, i.e. a "negative." | |
Invert |
<span style="width:50;height:20;font-size:20px;color:#CC0000;font-weight:bold;filter:invert">Using Text</span> |
|
<img src="image.gif" width="90" height="67" style="filter:invert"> |
| Mask | |
| Turns transparent pixels to a specified colour and makes opaque pixels transparent. | |
Using Text |
<span style="width:50;height:20;font-size:20px;color:#000000;font-weight:bold;filter:mask(color=#000000)">Using Text</span> |
|
<img src="image.gif" width="90" height="67" style="filter:mask(color=#000000)"> |
| Parameters | |
| color | The colour that the transparent areas will become |
| Shadow | |
| Creates an attenuated shadow in the direction and colour specified. It's a cross between Drop shadow and Glow. | |
Using Text |
<span style="width:50;height:20;font-size:20px;color:#000080;font-weight:bold;filter:shadow(color=#9BAD71, direction=225)">Using Text</span> |
|
<img src="image.gif" width="90" height="67" style="filter:shadow(color=#9BAD71, direction=225)"> |
| Parameters | |
| color | The colour of the shadow. |
| direction |
The direction
of the shadow, in degrees clockwise from vertical. The default is 225 degrees (bottom left). 0 = Top 45 = Top right 90 = Right 135 = Bottom right 180 = Bottom 225 = Bottom left 270 = Left 315 = Top left |
| Wave | |
| Gives the object a sine wave distortion to make it look wavy. | |
Using Text |
<span style="width:50;height:20;font-size:20px;color:#000080;font-weight:bold;filter:wave(add=0, freq=1, lightstrength=20, phase=100, strength=10)">Using Text</span> |
|
<img src="image.gif" width="90" height="67" style="filter:wave(add=0, freq=1, lightstrength=20, phase=100, strength=10)"> |
| Parameters | |
| add | A value of 1 adds the original image to the waved image, 0 does not. |
| freq | The number of waves. |
| lightstregth | The strength of the light on the wave (from 0 to 100). |
| phase | At what degree the sine wave should start (from 0 to 100). |
| strength | The intensity of the wave effect. |
| Xray | |
| Grayscales and flattens the color depth. | |
Using Text |
<span style="width:50;height:20;font-size:20px;color:#000080;font-weight:bold;filter:xray">Using Text</span> |
|
<img src="image.gif" width="88" height="31" style="filter:xray"> |
Hyperlink titles have been abbreviated, (right click on the link and select properties for the full URL)
Double mouse click anywhere on the page to take you back to the top (except when over the links)
Last Update: 05/03/2008 - I.E. Filters - CSS - Web Design - Neils Resource Web
