Julie Spackman's CIT260 Presentation

Shadows

CSS Shadow Effects

The CSS shadow properties let add customizable shadow effects to text, images, or even divs.

The shadow properties can take five values:

1. Horizontal Offset
   positive means the shadow will be to the right.
   negative means the shadow will be to the left.
2. Vertical Offset
   positive means the shadow will be below.
   negative means the shadow will be above.
3. Blur Radius (optional)
   0 is sharp, and higher numbers are more blurred.
4. Spread Radius (optional)
   positive increases shadow size.
   negative decreases shadow size.
   0 is default.
5. Color

Let's try it out!

**If you have a text color on a box and no color set in the shadow, the shadow will take on the text color. But the basic use only requires the horizontal and vertical offsets.

box-shadow: 10px 10px;

You can add color to your specification:

box-shadow: 10px 10px teal;

Let's add a blur!

box-shadow: 5px 5px 5px olive;

We can play with the Spread Radius

box-shadow: 5px 5px 5px 10px navy;

And have no horizontal or vertical offset so the shadow is more like a frame.

box-shadow: 0px 0px 5px 10px olive;

If you use a negative spread radius, you can have a shadow smaller than the object.

box-shadow: 0px 10px 8px -8px black;

You can also create a neat effect with an inner shadow.

box-shadow: inset 0px 0px 15px navy

More Shadows

Text-Shadow

At the very least, you need to specify the horizontal and vertical offsets.
*if you don't specify a shadow color, the color will be the same as the text.

Now with a color:

And then some blur:

You can use the blur to make it look like the text is glowing:

You can also use the shadow like a carving effect if you use a text color the same color as the background.

You can add multiple shadows to text with a list of shadows separated by commas.

And you can use the multiple text-shadows to add an outline to letters.

Even More Shadows

Box-Shadows on Divs

You can combine images, text, and whatever you need into an element that you can put a shadow on to.

box-shadow: 5px 5px 3px 3px teal;

You could even layer text shadowing onto your element that then has a shadow on it.