TL;DR: Intoduction to box shadow and its usage in layout

What is box-shadow?

When declaring a box-shadow, there are a few variables that the browser will take into consideration when rendering the effect. The variables will be given in the order shown below.

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

1. Horizontal offset (required). This refers to how much the shadow will be shifted horizontally relative to the parent element. Positive means shifted right, negative means shifted left.
2. Vertical offset (required). This refers to how much the shadow iwll be shifted vertically realative to the parent element. Positive means shifted up, negative means shifted down.
3. Blur radius (required). This refers to the amount of additional “feathering effect” of the shadow. The more blur the shadow, the further the shadow will extend. A shadow with 5px horizontal offset and 5px blur radius will have a total of 10px shadow.
4. Spread radius (optional). This refers to how far away from the outlines the shadow actually start. Positive values will extend the shadow, negative values will decrease its size.
5. Color (optional). Takes in any color, in any format. If this value is omitted, the shadows will be drawn in the foreground color (text color, color). Using a semi-transparent color like rgba(0,0,0,0.4) is common because it allows the bottom to show through a bit, like a real shadow.

Cross browser support

Well, like a lot of css declaration, different browsers support the effect using declaration of different names. This is how to apply a normal shadow to some of the modern browsers.

.shadow {
   -moz-box-shadow:    0 0 10px #000000;
   -webkit-box-shadow: 0 0 10px #000000;
   box-shadow:         0 0 10px #000000;
}

Adding these 3 declarations will get you through most browsers, if you want to apply box shadow on Internet Explorer 8 and below, you can use the filter effect to do so. More details on how to do that here. If you need, here is a tutorial that shows the effect of the filter.

What can I do with it?

Other than just normal shadows, the box-shadow declaration can be used in far more interesting ways. Here, I am going to show you how the box-shadow can help in designing your layout or wireframing your sites.

Let’s say we have a pretty generic content layout and you want to have one of the parts highlighted. Most of us will instantly wrap the area in a parent element and apply the style to the content, but it is possible to have the highlighting effect using only css, without having to alter the html elements.

Play around with the source to see what you can change.

How do you do that?

After you have seen the effect, now think about how the effect can be achieved using box-shadows alone.

To achieve this, the box-shadow effect we will be using isn’t really a shadow, but more of a “box effect”. We set the blur radius to 0, so that the edges of the “shadow” will remain sharp. Then we have 2 shadows, one shifted by a certain amount to the left, another by the same amount to the right.

When this is rendered, it will give the illusion of an area highlighted using a box. Coupled with the use of the right padding amount, this effect can be very nice when used to layout your content.

Are they any more cool effects?

Of course, the box-shadow can do much more than just this. Over the next few posts, I will be sharing more of these effect with you. I will teach you how to implement them, how to use box-shadow for unique situations.

If you are interested to know more, you can always search online for your favourite effect and share with us in the comments below. I await your responses.