From the course: Productivity Tips for Web Designers

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Adding pizzazz with CSS shadow effects

Adding pizzazz with CSS shadow effects

From the course: Productivity Tips for Web Designers

Start my 1-month free trial

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…

Contents