Webmasters still relying on tables, images and other “hard coded” solutions to design elements that CSS can render nicely might benefit from some experimentation with other techniques that can improve the style and load-time of their sites.
For example, CSS will render drop shadows and other shadowing effects, with or without the use of additional images to provide the “shadow” — with some platforms (such as the popular Firefox web browser) delivering much better results than others do.
One such use is to add a shadowing effect to text, via the text-shadow style, which allows users to specify the xand y-offset, along with an optional blur radius and the shadow’s color, i.e.: {textshadow: 0.25em 0.25em 0.25em #666;}
A “sunken” letterpress effect is also available purely through CSS by using a lighter shadow color than the text color, a slight vertical offset, and minimal blurriness.
The World Wide Web Consortium provides a number of examples of text shadow implementations in CSS (www.w3.org/Style/Examples/007/text-shadow), but as with many of these CSS techniques, Internet Explorer users will not see the added stylistic sophistication. Despite the lack of universal compatibility, experimentation with these styles and their parameters will deliver impressive results for those that can enjoy them.
Although designers can accommodate Internet Explorer users via a transformation filter such as filter:progid:DXImageTransform.Microsoft.Shadow(color=’#666666’, Direction=135, Strength=4) the effects are usually not as subtle as those obtained via standards-valid CSS methods, so these approaches are often (perhaps unwisely) ignored.
As a side note, Microsoft recommends the addition of the tag meta http-equiv=”XUA-Compatible” content=”IE=8” to the head element of web pages where the highest possible levels of Internet Explorer interoperability with CSS are required. It still will not allow the display of textshadow styles, but other techniques might benefit from the tag.
As with many types of web programming, with CSS compatibility, one size does not fit all, making cross-browser uniformity not always attainable — but a lot easier to meet if you make use of jQuery-enhanced CSS or community-backed OpenSource solutions.
For example, WordPress users will appreciate the versatile Shadows plugin (www.deepport.net/computing/wordpressshadows-plugin/), which adds crossbrowser shadowing to a variety of elements, including blockquotes, divs and images, through the addition of specified classes within your theme’s style sheets and templates.
While nothing new and certainly not the end-all of high-end web design, using CSS to provide elemental shadowing can spice up a standards-based design and still enable graceful degradation across lesser platforms. As with variable transparency and character animations among many other design features, a little shadowing can go a long way, so moderation is the key; but the depth this technique adds to a site’s design is hard to beat.
