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.


Pleasure Product E-commerce Experts Discuss Latest Trends

Adult mail order is a concept that has existed for many years. Phil Harvey famously operated a groundbreaking mail order business for adult products during the 1970s. But e-commerce has expanded the concept... More »

Adult Retailers Predict Consumer Trends for 2017

When adult e-commerce was exploding in popularity in the 2000s, some tech writers predicted that brick-and-mortar adult stores would be meeting their demise. But those obituaries were premature. E-commerce,... More »

2017 Outlook: Viewpoints of Top Industry Trends

Executives from the leading businesses of the online adult entertainment industry recently weighed in the question, “What do you see as the likely top trends that will influence the industry?”... 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.


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


Mar 31 - Apr 02
Denver, CO.
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!