CSS3 In-Depth

CSS3 In-Depth Text Shadows and Box Shadows

Topics:

This course has been updated! We now recommend you take the CSS In-Depth, v2 course.

Check out a free preview of the full CSS3 In-Depth course:
The "Text Shadows and Box Shadows" Lesson is part of the full, CSS3 In-Depth course featured in this preview video. Here's what you'd learn in this lesson:

The key to a good-looking shadow is transparency. Don’t use opaque shadows. The four settings for a shadow are left, top, blur and color. Create better looking text-shadows by including multiple shadows. Multiple shadows can be added by separating each text shadow with a comma. Box shadows are similar in syntax to text-shadows, however, they add two additional values: inset and spread. Estelle experiments with generated content and box-shadow. Text stroke in CSS allows you to outline text. However, it currently only works in webkit and can be re-created using text-shadow.

Get Unlimited Access Now