The Shadowy Side of CSS

For years, when webdesigners wanted to do shadowed effects with text or content boxes, they had to do so through the use of images. Either the text had to be saved in an image format, having been edited with an image program to make the text shadowed, or the content box had to be created with several slices of images to create the illusion of a whole box with a shadow slightly behind it. There were usually a good number of invisible tables behind the scenes setting up all these images so that the text and/or content boxes looked “natural” on the page, too. It was all a very convoluted process.

But thanks to the advent of CSS3 (and its wider browser support), we webdesigners can now add a little bit of shadow to our text and to our content boxes, with the box-shadow and text-shadow properties!

Shading Content Boxes with Box-Shadow

Any divided layer ID or class you create can have a box-shadow property added to it. Say, if I wanted to give a little pop of slightly-blurred gray shadow to my sidebar boxes, I could add something like this to the CSS class:

.sidebar {box-shadow: 5px 5px 5px #CCCCCC;}

What this means to the browser is: “I want a shadow that is positioned 5px to the right and 5px below this sidebar class, wherever it appears. I want that shadow to be blurred just around the edges (about 5 pixels around the edge). And I want the color to be #CCCCCC, or medium gray.”

Now, shadows don’t have to be gray or black, or even neutral colors. You can edit them to be any color, positioned as far away or as close to your content box as possible, and blurred/spread out as far as you like.

.sidebar {box-shadow: 30px 30px 5px 5px #0000FF;}

This shadow is positioned 30px to the right and 30px below the box it’s shading; it’s also bright, bright default-web-color blue. Another measurement is the “spread” of the shadow, how far it seems to be blended out into the background color of the website. The spread is the fourth pixel measurement (the second “5px” item). In this case, the shadow is blurred within itself 5px, and is blurred outward 5 more pixels.

You can choose any color shading and any size of shadow–experiment with this and see what you’d like to try with it. I’d also suggest visiting W3Schools’ Box-Shadow sandbox, where you can see different values and properties played out before your eyes. It’s a great way to see what you’d like for your design without having to hand-code it all first.

A Word about Browser Compatibility: Other Methods of Box-Shadow

For most new browsers, the above method (box-shadow) should work. However, if you want to completely cover your bases when it comes to browser compatibility, you’ll want to add the following lines of code to your shadowed box’s CSS id or class:

-webkit-box-shadow: (horizontal measurement) (vertical measurement) COLOR CODE;
-moz-box-shadow: (horizontal measurement) (vertical measurement) COLOR CODE;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=Hexadecimal Code Of Your Choice, offX=Horizontal measurement, offY=Vertical Measurement, positive=true);

Many thanks to DynamicDrive.com for explaining this!

These three items are coded in very similar ways to the box-shadow property, but they are understandable to browsers requiring these specialized CSS codes. You’ll just need to make sure that you’re adding in the same pixel measurements and color codes as your box-shadow property, and you’ll be all set.

Making Text Pretty with Text-Shadow

At last, at last! I found a way to make my text shadowed without having to open Photoshop. My webdesigning soul is content. 🙂

Adding this property to any CSS (whether you’re stipulating body text, classes or ids of text) will make your text shadowed. For instance, I could make headings on my blog stand out a bit by doing the following code, making them shadowed with light gray just a bit below and to the right:

.heading {text-shadow: 1px 1px #EEEEEE;}

This would give me a very sharp light gray shadow, just to the right and just below my text. If, instead, I wanted a more diffuse text shadow, I could add the “blur” pixel measurement to my text-shadow property:

.heading {text-shadow: 1px 1px 10px #EEEEEE;}

The “10px” measurement in this example is how much the shadow is blurred beneath the text, and in this case 10px creates a very vague, misty appearance of any color underneath the text.

If you want to see more examples of text-shadow’s basic abilities, I like the W3Schools.com’s Text-Shadow Sandbox. Also, if you want to see some really crazy, funky effects that just a little finagling with text-shadow can create, I would suggest Zachstronaut’s article on text-shadow–you can do some awesome architectural, animation-like looks with just a few lines of code!

Alert: Internet Explorer Thinks Text-Shadow Has Cooties

As of this writing, Internet Explorer does not support text-shadow at all. Party poopers. (Just because Firefox got invited to the prom and IE didn’t… LOL). If you want text shadows to show up in IE, there are several fixes available across the web–these are some of the best and most understandable:

Full CSS3 Text Shadows–Even in IE (detailed, image- and example-filled, and BEAUTIFUL–requires a downloaded script, though)
Text-Shadow @ HowToCreate (simple tutorial taking you through several different steps of adding text-shadow)
CSS3 Text Shadow in IE @ ImpressiveWebs (how browsers compare in displaying shadows; using filter: glow for IE-only shadows)
IE Text Shadows @ WhatTheHeadSaid (CSS-heavy explanation of how to hack in text shadows for IE)

When Should I Even USE Shadows in CSS?

Shadows on a webpage are like makeup on a woman: just enough enhances natural beauty, but too much detracts from natural beauty.

To avoid your page looking like it’s been attacked and left bruised, only put shadows on special parts of your page. A lovely text-shadow on the main logo of your page, for instance, can look classy; adding a shadow underneath your “Latest Updates” box can help it “pop out” from the page enough to be noticed. You can also add shadows underneath every big heading on your page, or beneath featured images to help them look a little more 3-D.

Also, do not depend on text-shadows and box-shadows to make your page intelligible. White text on a light-gray background, no matter how shadowed you make the text, is still going to be illegible to most readers. By the same token, don’t make shadows and glow effects so bright behind the text that readers can’t focus on the text. Both of these mistakes will send your readers running for the hills. (And don’t let box shadows trail down on top of text below them…very annoying to try to read through!)

Use shadows as a lightly-placed accent, in other words, and your site will look great.

Summary

Shadows, when used as accents on your webpage, can provide some wonderful image-like effects without ever having to set foot in Photoshop or any other image-editing program. Try them out for your site, experiment with how they look, and see what elements on your page you’d like to shadow!

One thought on “The Shadowy Side of CSS”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.