O'Reilly logo

HTML5 Multimedia Development Cookbook by Lee Jordan, Dale Cruse

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Adding drop-shadow effects to fonts

Once upon a time, it seemed like web designers and developers added drop shadows to every visual element they could. It was almost like they were getting paid by the drop shadow. Luckily that time has come and gone. Today, only the most fashionable designers and developers know to add drop shadows very sparingly Let's take a look at how to do that using only CSS.

Getting ready

To get started, let us use the previous example, and simply add a very subtle drop shadow to the headline font from a previous version of the author's portfolio site at http://dalejcruse.com.

How to do it...

In this recipe we will use some careful styling to add a tasteful drop shadow effect to some of our text.

<!DOCTYPE html> <html lang="en"> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required