Learning JavaScript

CSS3 box-shadow

In CSS3, we can add shadows to objects without using images. We do need to add prefixes for Mozilla and Webkit browsers, so in effect adding the same styles 3 times (unless we use Prefix free).

We have quite a lot of options with how we create the shadows; they can be outset, inset (or both), and have multiple colours – all of which I’ll explore below.

Outer shadow

Here is how an outer shadow applied to an image tag appears via the medium of this yummy looking cupcake:


CSS3 outer box-shadow

View demo

The markup:

img {
	-webkit-box-shadow: 0px 0px 5px 3px #999;
    	-moz-box-shadow: 0px 0px 5px 3px #999;
    	box-shadow: 0px 0px 5px 3px #999;
}

This markup produces an outer shadow, with the shadow extending the same amount from every side of the element it is assigned to (in this case, an image). The meanings of the four numbers are as follows:

  1. Horizontal offset
  2. Vertical offset
  3. Blur distance
  4. Spread distance

Outer shadow (offset)

In the previous example, we didn’t add any values to make the shadow appear offset. Let’s see what happens when we do:


CSS3 outer offset box-shadow

View demo

Markup:

img {
	-webkit-box-shadow: 4px 4px 5px 3px #999;
    	-moz-box-shadow: 4px 4px 5px 3px #999;
    	box-shadow: 4px 4px 5px 3px #999;
}

Inner shadow

We can also make shadows appear to be inside of an element. I shall use a div as an example this time, as we may not be able to see the inside shadow with an image in the way:


CSS3 inner box-shadow

View demo

Markup:

div {
	-webkit-box-shadow: inset 0 0 5px 3px #999;
    	-moz-box-shadow: inset 0 0 5px 3px #999;
    	box-shadow: inset 0 0 5px 3px #999;
}

Inner and outer shadows on the same element

Multiple shadows can be applied to an element. Here is an example of when both inner and outer shadows are applied to a div. Each shadow is a slightly different colour (outer shadow is darker grey, inner shadow is lighter grey), so we can see them easier:


CSS3 inner and outer box-shadows on the same element

View demo

Markup:

div {
    	-webkit-box-shadow: inset 2px 2px 4px 1px #ccc, 2px 2px 4px 1px #999;
    	-moz-box-shadow: inset 2px 2px 4px 1px #ccc, 2px 2px 4px 1px #999;
    	box-shadow: inset 2px 2px 4px 1px #ccc, 2px 2px 4px 1px #999;
}

Double shadows of the same type

We can’t just put two different types of shadows onto an object, we can also apply two shadows of the same type; for example, two inner shadows:


CSS3 double inner box-shadows on the same element

View demo

Markup:

div {
    	-webkit-box-shadow: inset 2px 2px 4px 1px #ccc, inset -2px -2px 4px 1px #999;
    	-moz-box-shadow: inset 2px 2px 4px 1px #ccc, inset -2px -2px 4px 1px #999;
    	box-shadow: inset 2px 2px 4px 1px #ccc, inset -2px -2px 4px 1px #999;
}

Multiple coloured shadows

Shadows don’t even have to be only one colour. Here is an example of an outer shadow with no offset, with the shadow blending from purple to pink to orange:


Multiple coloured outer box-shadow

View demo

Markup:

div {
    	-webkit-box-shadow: 0 0 4px 2px #90f, 0 0 4px 4px #f06, 0 0 4px 7px #f90;
    	-moz-box-shadow: 0 0 4px 2px #90f, 0 0 4px 4px #f06, 0 0 4px 7px #f90;
    	box-shadow: 0 0 4px 2px #90f, 0 0 4px 4px #f06, 0 0 4px 7px #f90;
}

What happens if I apply box-shadow to text?

This will happen – the shadow will follow the box shape of the text element (it won’t go around the characters):


Applying box-shadow to text

View demo

If this is what you want, fine, but if you want the shadow to follow the shapes of the characters, use text-shadow instead.

Leave a Reply

Your email address will not be published. Required fields are marked *