Home > Features > Elemental Shadowing With Cascading Style Sheets • Bookmark   • Newsletters   • Register Search Options


Elemental Shadowing With Cascading Style Sheets

Elemental Shadowing With Cascading Style Sheets

July 14, 2010
Text size: 
View in Digital Mag
Get XBIZ News
XBIZ Research
Will virtual reality boost the paysite market?
Yes, it will soon
Yes, but in a few years
Out of 179 votes. Results based on votes submitted by members of XBIZ.net social network.

" As with many types of web programming, with CSS compatibility, one size does not fit all, making cross-browser uniformity not always attainable. "

Website designers have long used cascading style sheets (CSS) to define, enhance and layout their projects, with varying degrees of design sophistication and cross-browser compatibility. This latter challenge of ensuring consistent visual display among viewing platforms has led some designers to employ hybrid table-based/pure CSS approaches; to rely on the CSS support of web design software; or even minimize their use of CSS.

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.


Visa Cracks Down on ‘Shell’ Billing Firms

There was a time not so long ago when website operators created billing companies in favorable jurisdictions, whose sole purpose was to bill customers for services provided by the operator and remit the... More »

Randazza: Trump Victory, Big Prop 60 Win

On Tuesday afternoon, I boarded a transatlantic flight. Given all of the negativity in the 2016 presidential race, I was delighted that I would be absent for the results. I found both Donald Trump and... More »

Dissecting an $11.9M Affiliate Marketing Judgment

The Federal Trade Commission scored another major win in early October when the 2nd U.S. Circuit Court of Appeals upheld a lower court ruling, requiring LeadClick Media LLC to pay an $11.9 million award. The... More »
Stay informed of the latest industry developments. Get XBIZ newsletters delivered to your inbox. Subscribe today!
Enter email address:

* To manage existing subscriptions click here.

Submit your press release to
multiple news outlets with 1 click.
Subscribe to RSS news feeds or
add free content to your website.
Access XBIZ news and articles
with your mobile device.
Subscribe to XBIZ World magazine, the industry's leading e-commerce trade publication, delivering in-depth coverage of the online, mobile and ancillary digital markets.


Everything To Do With Sex Show

Jan 27 - Jan 29
Halifax, Nova Scotia

The European Summit

Mar 04 - Mar 07
Barcelona-Sitges, Spain

The TEA Show

Mar 05 - Mar 06
Hollywood, CA

Phoenix Forum 2017

Mar 23 - Mar 26
Tempe, Arizona
Everyday thousands of business professionals browse XBIZ's industry directory for quality products and services. Not listed yet? Your company could be losing potential new business. Submit your company today!
Use XBIZ RSS feeds to stay informed of the latest industry developments or as a content syndication tool for your website!