CSS Section Summary - Neils Resource WebCSS Section Summary - Neils Resource WebI.E. Filters - CSS - Web Dev. - Neils Resource Web

Contract Menu | Expand Menu

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:
  • 0 = uniform
  • 1 = linear
  • 2 = radial
  • 3 = rectangular
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):
  • 0 = top
  • 45 = top right
  • 90 = right
  • 135 = bottom right
  • 180 = bottom
  • 225 = bottom left
  • 270 = left
  • 315 = top 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">

Last Update: 05/03/2008 - I.E. Filters - CSS - Web Design - Neils Resource Web

html 4.01 strict css 2.1 javascript 1.2