This chapter is from the book
This chapter is from the book
This chapter is from the book
Adding Depth with box-shadow
Next on the whistle-stop tour is box-shadow (also in www.w3.org/TR/css3-background), which allows you to add drop shadows to containers. This property is very useful for adding depth to a design, highlights, and user feedback when used in conjunction with pseudo-classes and transitions, as you’ll see in later examples (buttons, link highlights, etc.)
The basic box-shadow syntax is as follows:
box-shadow: 2px 2px 1px black;
The first two unit values specify the horizontal and vertical offset of the shadow from the container. Positive values offset the shadow right and down, whereas negative values offset the shadow left and up. The third unit value specifies the amount of blur radius the shadow has (this is optional and defaults to 0 if not explicitly declared). Increase the value for more blurry, spread-out shadows. The color is, as you’d expect, the color of the shadow.
This basic shadow creates the effect shown in Figure 4.5.
){kind=link}
Figure 4.5 A basic box shadow.
Using a subtle shadow like this is ideal for implying just a bit of depth or texture, making the container look slightly raised.
Now let’s add some rounded corners into the mix:
border-radius: 10px; box-shadow: 2px 2px 1px black;
As you can see in Figure 4.6, the shadow follows the shape of the rounded corners, which is rather convenient.
){kind=link}
Figure 4.6 Box shadow and rounded corners together.
Using more offset and blur produces a more striking effect:
border-radius: 10px; box-shadow: 5px 5px 10px black;
The box now looks like it has truly been lifted into the air (Figure 4.7):
){kind=link}
Figure 4.7 A more pronounced box shadow produces a nice lift.
But something about the box just doesn’t look right. The shadow is rather unnatural. Usually, shadows have a tint of the color of whatever is below them peeking through. But never fear; you can achieve this look easily using an RGBA color (Figure 4.8):
){kind=link}
border-radius: 10px; box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
Figure 4.8 An RGBA color gives the box a natural-looking, more subtle shadow.
You next need to know that you can include multiple box shadows on a single container. You just write the different shadows you want one after another, delimited by commas:
border-radius: 10px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.5),
10px 10px 15px rgba(0,0,0,0.5),
-1px -1px 30px rgba(0,0,0,0.2);
This trio creates some immediate depth, plus the suggestion of multiple light sources (the very faint shadow is offset left and up using negative values) (Figure 4.9).
){kind=link}
Figure 4.9 Multiple box shadows in action.
Now let’s look at inner box shadows. You can make any box shadow an inner box shadow by adding the inset keyword at the start. For example:
border-radius: 10px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.5),
inset 5px 5px 8px rgba(0,0,0,0.5);
Figure 4.10 shows the result. This technique is useful for creating nice “button being pushed in” type thingamajigs (technical term).
){kind=link}
Figure 4.10 An inner, or inset, box shadow.
Finally, let’s look at one more possible unit value you could include: spread. I’m not talking about middle-aged spread or marmalade but the fact that you can add a fourth unit value to specify an amount that the shadow size will increase by in all directions. It’s like “padding” for shadows. For example:
border-radius: 10px; box-shadow: 5px 5px 10px 10px rgba(0,0,0,0.5);
See the effect in Figure 4.11. I’ve never found a use for adding a spread value, but you probably will.
){kind=link}
Figure 4.11 A box shadow with a spread value.
NOTE
Use box shadows responsibly! Used subtly they can produce a great effect and lift a design. However, if you use them a lot on the same site and on large containers, they can make the site look cluttered and horrible. They can also cause a significant performance impact, especially if you combine them with animations. They are expensive to render in terms of processing power required.
Adding Box Shadow Support to OL’ IE
Adding CSS3PIE into the mix, as you did earlier, also adds box-shadow support for older versions of IE. But remember CSS3PIE’s limited support for RGBA: It is often better to provide an alternative style with a nontransparent color that might be more effective. You could provide this in a conditional-commented stylesheet.