HTML and CSS Reference
In-Depth Information
FIGURE 4.9
Multiple box
shadows in action. (left)
FIGURE 4.10
An inner, or inset,
box shadow. (right)
Yo u n e x t n e e d t o k n o w t h a t y o u c a n i n c l u d e m u l t i p l e b o x s h a d o w s o n a s i n g l e
container. You just write the different shadows you want one after another, delim-
ited 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
).
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).
