More of this Feature Part 1: CSS for Images and Networks

Join the Discussion "I have recently gone from Windows 98 to Windows NT Server, and for some reason, whenever I am surfing the Net and click on any page with graphics, my processor utilization exceeds 100% and I am disconnected. I've been forced to surf the web with no graphics... ." -JCANDIFF1

Related Resources Intranet Resources Network Programming Resources Web Server Resources

Grayscale

Grayscale filtering reduces color content in an image to shades of gray. This filter makes sense in cases where the image's color palette overwhelms or otherwise gets in the way of whatever message the containing page is trying to convey. To define this effect, simply include the following code in the CSS file.

img.grayed { filter: gray; }

Shadow and Dropshadow

Shadow filters produce an anti-aliased drop shadow. Both the color of the shadow and its angle (relative to 12 o'clock position, rotating clockwise) can be specified. This code illustrates a basic shadowing effect that adds depth and some richness to the page.

img.shadowed { filter: shadow( color=gray, direction=135 ); }

Drop-shadow filters offers somewhat more control over shadowing, leading to more effect possibilities. The following example emphasizes strength of line to a greater degree.

img.dropshadowed { filter: dropshadow( color=gray, offx=3, offy=3, positive=1 ); }

Fade

Fade filters offer a simple form of translucency in images. While other applications of alpha channel filters exist in CSS, the following illustrates a basic watermark-like effect that can be very useful in providing subtle emphasis to a graphic. Note that specifying a lower number for opacity (in the range zero to 100) achieves higher transparency.

img.faded { filter: alpha(opacity=30); }

In Conclusion

Using CSS image filters like the ones shown above can improve the visual appeal of Web content. Because CSS-I utilizes client-side processing to achieve these effects, Web pages that utilize CSS for their images can conserve bandwidth. Note that CSS includes several other forms of style support besides CSS-I.