Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Drop Shadows in CSS3
CSS3 includes two properties—text-shadow and box-shadow—that allow you to apply shadows to text and containers programmatically. This is fantastic, as it cuts down on Photoshop time! Both are applied in basically the same way:
text-shadow: 2px 2px 5px black; box-shadow: 4px 4px 10px black;
The first two unit values are the horizontal and vertical offset from the original thing being shadowed; the third value is the amour of blur to apply to the shadow, and the color is the base color of the shadow (see Figure 8). Use any color values you like.
)
Figure 8 Giving the box more depth with drop shadows, via the box-shadow and text-shadow properties.
box-shadow has a couple of extra options:
box-shadow: 4px 4px 10px 10px black;
The extra unit value provides a spread value for the shadow—making it bigger than the original box. Think of it as padding for shadows. I've never used it, but you might.
The inset keyword causes the shadow to turn into an inner shadow, which can be fantastically useful for creating a pressed-down button effect, as shown in Figure 9:
box-shadow: inset 4px 4px 10px black;
)
Figure 9 Using the inset keyword to create an inner box-shadow.