Why this site looks better in Firefox
Thumbnail
Borrow my code

Feel free to borrow any code you like on this site for modification and use on your site. For support implementing just leave a comment for Cd&. You will also find Cd& providing answers and solutions on Experts-Exchange, HTML Forums, and other help sites where support is available. If there is a snippet you need for your web site, send a request to Cd&, and it might end up being made available on the site.

If use code from coboldinosaur.com a link would be appreciated.

If you have code on your site that might help other developers, you could add a Borrow button and join the movement to make good open source code easily accessible to all developers.

Close
Dzone icon Reddit icon Facebook icon RSS Icon

COBOLdinosaur


Effective Use of the CSS3 box-shadow Property

Author: COBOLdinosaur

Regular visitors to this site have probably noticed that I like to use a lot of box shadows. I think the box-shadow property is one of the coolest things ever in CSS. I see a lot of sites where a few shadows would really sharpen them up. I cannot imagine why developers spend all kinds of time trying to get some lame jquery menu working and don't have 15 minutes to spend enhancing the content with a few shadows instead of bloating the page with images that include a shadow.

Perhaps the problem is that the rich range of effects available make developers think it is complex or difficult. So maybe I can help a little with this exploration of the possibilities.

The basic syntax defined in the W3C specification is:
Formal syntax: initial-value=none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
Multiple effects can be applied to a single element by using a comma separated list, and the effects will stack with the first on top and the last on the bottom. An outside box-shadow renders under the element background so only the part outside the boundaries of the box shows. When inset is specified the effect renders between the element content and the element background. If there is no color specified, then the default is browser dependant (grayscale for most compliant browsers). However, because the default color is not explicit in the standard it should be specified. That way it will render as the same color cross-browser.

The first thing to look at are the offsets. offset-x specifies the horizontal position relative to the element and offset-y specifies the vertical position relative to the element. Both of the offsets will accept a negative value, so we can put the shadows on any side of the box.

If we define shadows like this:
{box-shadow:5px 5px;} AND {box-shadow:-5px -5px;}
We get:

{box-shadow:5px 5px;}
{box-shadow:-5px -5px;}
Kind of boring. Looks like a broken border. So let's put the shadow all the way around with:

{box-shadow:5px 5px,-5px -5px;}
and we get:

{box-shadow:5px 5px,-5px -5px;}
UGH!!! Even worse

Don't worry it gets better. You need to see the ugly basic look to understand why the other options are needed. The effect can be applied to any element even individual table cells. We could apply an inset shadow to a cell we want to highlight like this:
#specialCell {box-shadow:inset 10px 10px;} to give us a special emphasis like this:

normal 1 normal 2 normal 3
same SPECIAL same
final same1 final same2 final same3

Notice how the inset sets the shadow inside the element. But that is still butt-ugly. We need some real help with this so...

Lets look at the rendering modifiers. blur-radius specifies how wide and light the blur effect will be. The default value(zero) applies a sharp edge to the shadow; like the ugly stuff we have done so far. As the value is set higher, the blur gets wider and lighter. Negative values are not accepted. Because the standard does not specify how the blur is calculated, there are some differences in the rendering cross-browser.

The spread-radius sets the size of the shadow. The default value of zero will set the size of the shadow to be the same size as the element. Negative values will result in a smaller size and positive values will render a shadow that is larger than the element.

If we now add blur to our elements with:
{box-shadow:5px 5px 5px;} AND {box-shadow:-5px -5px 5px;}
We get:

{box-shadow:5px 5px 5px;}
{box-shadow:-5px -5px 5px;}

 

With spread like:
{box-shadow:5px 5px 0px 5px;} AND {box-shadow:-5px -5px 0px 5px;}
We get:

{box-shadow:5px 5px 0 5px;}
{box-shadow:-5px -5px 0 5px;}

Looks like the key to getting that soft modern look is the blur; but round corners would probably also help. Let's add the whole thing to that table cell plus a little color for dramatic effect; and we will do something with the table itself with round corners added:
#specialCell {box-shadow:inset 10px 10px 35px 3px blue;}
#tabl {border:2px solid firebrick;border-radius:10px;box-shadow:5px 5px 6px 8px silver;}
gives us this:

normal 1 normal 2 normal 3
same SPECIAL same
final same1 final same2 final same3

Now we are getting somewhere. That is now a dramatic look. Still somewhat crappy in IE10, but that is to be expected. When it comes to browsers, Microslop quit innovating over 10 years ago and they are still way behind the curve when it comes to modern rendering.

A few more examples (I rounded the corners because I like the look it adds to the shadows):

box-shadow: 60px -16px crimson;
box-shadow: 10px 5px 5px black;
box-shadow: 3px 3px red, -1em 0 0.4em teal;
box-shadow: inset 5em 1em cyan;
box-shadow: 0 0 1em orange;
box-shadow: inset 0 0 1em orange;
box-shadow: 10px 10px;
box-shadow: 10px 10px 5px darkmagenta;
box-shadow: inset 2px 2px 2px 2px darkred;
box-shadow: 10px 10px gray, -10px -10px lightcyan, 0px 0px 5px 5px sienna;
box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
box-shadow: 0 0 5px 5px black, 0px 0px 15px 15px gold, 0px 0px 25px 25px firebrick;

 

BROWSER SUPPORT

Special effects:

As a final little piece, I have a version of the sample that W3C has on their site to illustrate the effect of combining box-shadows and border-radius. I really love this because the major browsers all render differently; and none of them has it wrong. The W3C intentionally left the blur and spread algorithm loosely defined (a compromise between the major manufacturers, I suspect). So, now we have something to drive the morons nuts and separate the professionals from the idiots who do not understand that all browsers do not use the same rendering code. Some of those idiots will be easy pickings for plugin scammers who will sell them some lame hack that claims to make the shadows look the same by generating some invalid code or breaking the DOM.


    width:100px;
    height:100px
    border:12px solid blue;
    background-color:orange;
    border-bottom-right-radius:60px 90px;
    border-top-left-radius:60px 90px;
    box-shadow:64px 64px 24px 40px green, 12px 12px 0px 18px gold inset;
    padding:1.5em;

Gives us this for a paragraph containing text, AND... No hacks

Combined with other CSS3 properties, the box shadows can produce some startling effects that previously required graphics; and at just a tiny fraction of the resource requirements and response time of the old bloated graphic/scripting approaches the developers were forced to use to add pop to their layouts. One caution: there is always a temptation to use hyphen hacks... BAD IDEA! Using hacks just makes you look like an idiot when a manufacturer changes the way a hack works and breaks your pages. If you want to be standards compliant (the professional approach), then use only REAL STANDARDS; not the manufacturer hacks that they stick in so they can claim compliance without actually delivering it. Playing with the hacks in a test/experimental environment is okay to get the feel of coming events, but don't use the hacks in a live public page unless you want to look stupid when it breaks.

Shadows do not change structural layout because they do not add any size to the box. The shadows may overlap other boxes or their shadows so you need to make sure that you have enough margin and/or padding to avoid clashing. Of course a design may also use the overlap for effect as well.

I hope that I have given you enough to get you started, and now I will go hide in the shadows and have a couple beers. If you found this article helpful you might also get some use from:

If you found this article helpful you might also be interested in:


Got an idea for an article? Author Guidelines

To comment on this article LOGIN or REGISTER FOR FREE