Friday, October 17, 2014

A Close Look at CSS Box Shadow - Six Revisions

A Close Look at CSS Box Shadow - Six Revisions


A Close Look at CSS Box Shadow

Posted: 17 Oct 2014 03:00 AM PDT

The CSS box-shadow property can be used to give block elements a drop shadow or an inner shadow. Let’s take a close look at this CSS property.

Examples

Below are three different examples of applying the CSS box-shadow property on a div.

Example 1: Simple Drop Shadow

Here’s how you could give a div a subtle gray drop shadow.

box-shadow: 0 0 10px gray;

A basic gray drop shadow rendered using CSS box-shadow.

Example 2: Inner Shadow

An inner shadow can be rendered using the inset property value.

box-shadow: inset 0 0 10px;

An inner shadow rendered using CSS box-shadow.

Example 3: Offset Drop Shadow

In this example, the box shadow is cast with a bias towards the bottom-right side of the box by using a horizontal offset and vertical offset of 5px.

box-shadow: 5px 5px 10px;

Offset drop shadow (bottom right).

What if you wanted to have the shadow at the top-left portion of the box instead? We can do so using negative values for the horizontal offset and vertical offset. In the following example, the horizontal offset and vertical offset is set to -5px.

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

Offset drop shadow (top left).

Now that you’ve seen a few examples of CSS box-shadow in action, let’s dig a little deeper.

Syntax

The general syntax of the box-shadow property is as follows:

box-shadow: [inset] [horizontal offset] [vertical offset] [blur radius] [spread distance] [color];

CSS Property Values

The CSS box-shadow property has six possible property values:

  1. inset
  2. horizontal offset
  3. vertical offset
  4. blur radius
  5. spread distance
  6. color

Only two property values are required: the horizontal offset and the vertical offset.

Four property values, the horizontal offset, vertical offset, blur radius, and spread distance, must use a CSS length unit (e.g. px, em, %, etc.)

The color value must be a CSS color unit such as a hex value (e.g. #000000).

Property Value Summary

Property value Required? Unit Default value if not specified
inset No keyword If inset is not specified, the box shadow will be outside of the HTML element.
horizontal offset Yes length No default value. It must be specified.
vertical offset Yes length No default value. It must be specified.
blur radius No length 0
spread distance No length 0
color No color Equal to the color property of the HTML element/s that the box shadow is being applied to.

inset

If the inset keyword property value is present, the box shadow will be placed inside the HTML element.

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

CSS box-shadow with inset property value specified.

As a comparative reference, here’s the same box shadow without the inset property:

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

CSS box-shadow with inset property value not specified.

horizontal offset

The horizontal offset value controls the x-axis position of the box shadow. A positive value will shift the box shadow to the right, while a negative value will shift it to the left.

In the following example, the horizontal offset is set to 20px, or double the value of the vertical offset (which is set to 10px), so the shadow is two times wider horizontally.

box-shadow: 20px 10px;

CSS box-shadow with horizontal offset value at 20px.

vertical offset

The vertical offset controls the box shadow’s position on the y-axis. A positive value will move it down while a negative value will move it up.

In the following example, the vertical offset has a length of -20px, or double the length of the horizontal offset (10px), so the size of the shadow is twice as big on the vertical axis. Also, since the value is negative, the location of the shadow is offset towards the top of the box.

box-shadow: 10px -20px;

CSS box-shadow with vertical offset value at -20px.

blur radius

The blur radius property value affects the blurriness/sharpness of the box shadow.

The blur radius is optional. If you don’t specify it, it will default to 0. Additionally, it can’t have a negative value, unlike horizontal offset and vertical offset.

If the blur radius is 0, the box shadow will be sharp and its color will be solid. As you increase the value, it will become blurrier and more opaque.

In the example below, the blur radius value is set to 20px, thus the blurriness is quite pronounced.

box-shadow: 5px 5px 20px;

CSS box-shadow with blur radius set at 20px.

spread distance

The spread distance makes the box shadow larger or smaller in all directions. If it has a positive value, the box shadow will grow in size on all sides. If it has a negative value, the box shadow will contract on all sides.

Notice how, because of the positive spread distance (10px), there’s a 10px drop shadow on all sides of the box because there is no horizontal offset and vertical offset:

box-shadow: 0 0 10px 5px;

CSS box-shadow with a positive spread distance  value.

When the spread distance is negative, the shadow shrinks on all sides. In the following example, the shadow is smaller than the box’s width because of its negative spread distance and the absence of a horizontal offset:

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

CSS box-shadow with a negative spread distance  value.

color

As you can already tell by its name, the color value sets the box shadow’s color. It can be specified using any CSS color unit. Specifying a color value is optional.

By default — in other words, if you don’t explicitly state a color value for your box shadow — the shadow’s color will be equal to the color value of the HTML element the box-shadow property is being applied to. For instance, if you have a div that has the color of red, the box shadow’s color will also be red:

color: red;  box-shadow: 0 0 10px 5px;

CSS box-shadow without a color value specified.

If you want a different shadow color, then you’ll need to specify it in the box-shadow property value declaration. Below you can see that even though the foreground color of the div is still red, the box shadow color is blue.

color: red;  box-shadow: 0 0 10px 5px blue;

CSS box-shadow without a color value of 'blue'.

Multiple Box Shadows

This is where you can get really creative with this CSS property: You can apply more than one box shadow on an element.

The syntax is as follows:

box-shadow: [box shadow properties 1], [box shadow properties 2], [box shadow properties n];

In other words, you can have multiple box shadows by separating each property value group with commas (,).

In the following example, there are two box shadows: A red one at the top-left side of the box, and a blue one at the bottom-right side.

box-shadow: -5px -5px 30px 5px red,               5px 5px 30px 5px blue;

CSS box-shadow with multiple box-shadow property values.

Browser Support

The CSS box-shadow property has good browser support. Using Internet Explorer as the least common denominator, the property has been supported since IE 9 (which was released in 2011).

CSS Box Shadow Examples

You can see a live demo of all the box shadow examples used in this article by clicking the button below.

View Demo

CSS Box Shadow Examples

Related Content

About the Author

Example of a website with a large background image: Jacob Gube is the founder of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.

The post A Close Look at CSS Box Shadow appeared first on Six Revisions.

No comments:

Post a Comment