Adding pizzazz with CSS shadow effects

- Hello friends, I'm Sue Jenkins, and welcome to Productivity Tips for Web Designers. In this lesson, I'll show you exactly how to add pizzazz to your text and graphics with a fun variety of shadow effects. With CSS, you can create two kinds of shadows: box shadows and text shadows. Most people simply apply a single shadow property to their objects but you can actually apply multiple shadows to any element. So, let me show you how that works. First, we'll start with a regular box shadow so you can review the CSS syntax.

You can apply the box shadow property to any block level element on the page including div tags and images. To create a box shadow, you'll use the box shadow attribute in your CSS. The five values for the box shadow property represent the horizontal offset, the vertical offset, the blur radius, the spread radius, and the color shown here as RGBA values. And the RGBA values is the RGBA all the way to the 1.00.

If you play with the offsets, spread, and blur values, you can create totally different styles for your box shadows. For instance, to add a hard edge shadow like this, you'll eliminate the blur value from your CSS. In this example, I'm using negative values to make the shadow fall on the top and left edges of the image. To create a shadow directly behind an object, creating a halo around all four edges like this, you'll eliminate the offset while adding a blur with a slight spread.

You can also create a shadow along a single edge by setting the horizontal or vertical offset to 0. In this example, the horizontal is set to 0 and the vertical is set to 10px so the shadow falls along the bottom. Box shadows can also fall along the inside edges of your element. So, here's an example with a hard inset shadow along two edges. And here's another one with a blurred inner shadow along all four sides. Embrace yourselves, you can also stack multiple shadow values to create overlapping shadow effects like this.

Let's talk now about text shadows. To create a shadow for your text, you're going to use the text shadow attribute in your CSS. The five values for this property represent the horizontal offset, the vertical offset, the blur radius, and the color shown here as RGBA values. Like box shadows, if you play with the offsets, blur, color, and alpha values, you can create completely different styles for your text shadows. In addition, you can create multiple text shadows by separating each shadow value with a comma like this example where one shadow is white and the other shadow is gray.

Or try stacking several shadow values to create text shadows with a 3D looking effect. You can also easily create a letter press effect like this which partially relies on your use of text and background colors to create the effect of text looking like it's literally pressed into the page. Or you can get your groove on with this 70s style rainbow effect which stacks three shadows behind your text, which itself can be any color. By the way, Dreamweaver Creative Cloud supports the application of both box and text shadow styles through the CSS styles panel though you will need to hand-code values when you stack multiple shadows within a single style declaration.

If you're hand-coding outside of Dreamweaver, you can get the correct CSS code quickly from a free box or text shadow generator website like cssmatic or css3gen. Some browsers, especially older versions, may not support the box shadow and text shadow attributes directly but they will you add additional declarations with the appropriate browser prefix like this. For instance, the webkit prefix helps with older versions of Safari and Chrome while the moz prefix helps with older versions of Firefox.

For any other browser scenarios, the older browsers will simply ignore the shadow property and not display it. I hope you enjoyed learning about these fun shadow effects. Feel free to use these directly or as a jumping off point for discovering your own interesting shadow effects for text and graphics on the web.