HTML and CSS Reference
In-Depth Information
FIGURE 4.11
A box shadow
with a spread value.
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.
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.
