CSS Tips: Box Shadows, Insets and Single Sided

Have you ever wanted to create a framed section of your website with a highlighted shadow style border, but didn’t know how? Well, using one of CSS 3’s great features called “box shadow” you can!

Example:

Example

.boxshadow {
box-shadow: 6px 6px 5px 5px #cccccc;
-moz-box-shadow: 6px 6px 5px 5px #cccccc;
-webkit-box-shadow:6px 6px 5px 5px #cccccc;
}

Browser Compatibility:

You will notice that I include 3 different forms of box-shadow code in my CSS. This is to ensure full browser compatibility among the Firefox, Opera, Safari and Chrome browsers. Internet Explorer requires extra code, which I will mention a little further down.

Explaining The CSS:

There are 5 parts to the Box Shadow code:

  1. Horizontal Offset (ie. 2px). This is the number that will tell the browser where to display the horizontal shadow. A positive number will move the shadow to the right and a negative will move the shadow to the left.
  2. Vertical Offset (ie. 2px). Similar to the horizontal offset, this moves the shadow up or down. A positive figure will move the shadow below the box and a negative number moves the shadow above the box.
  3. Blur Radius (ie. 5px). This allows you to “blue” the shadow to give it more or less detail. Note: this is optional.
  4. Spread Radius / Size (ie. 5px). This displays how large your box shadow is displayed. 0 is used by default. Note: this is optional.
  5. Color. Using different color codes you can specify how your shadow looks.

Insets and Single Sides:

In addition to regular shadow effects, you can use the “inset” feature to add the shadow inside the box instead of outside. The remaining properties remain the same (ie. horizontal, vertical, blur etc).

Inset

.insetboxshadow {
box-shadow: inset 0 0 8px #000000;
-moz-box-shadow: inset 0 0 8px #000000;
-webkit-box-shadow: inset 0 0 8px #000000;
}

From time to time you may also wish to only display a shadow on 1 side of a box. This is done by giving the spread/size a negative number (ie. negative spread radius) which will result in your shadow only being displayed on a single side of the box. Play around with this to see how it looks.

1 Sided

.1sideboxshadow {
box-shadow: 0px 8px 8px -8px #000000;
-moz-box-shadow: 0px 8px 8px -8px #000000;
-webkit-box-shadow: 0px 8px 8px -8px #000000;
}

Internet Explorer Additional CSS:

As with most things IE, they don’t recogise standard HTML out of the box, so you need to add a little extra code to make the magic happen. In this case we need to include a second CSS Div Class. A big thanks to css-tricks.com for helping me with this particular bit of code.

.ieshadow {
margin: 40px;
background-color: rgb(255,255,255); /* Required by IE. RGB 255 = White */
box-shadow: 2px 2px 5px 5px rgba(255,255,255,0.6);
-moz-box-shadow: 2px 2px 5px 5px rgba(255,255,255,0.6);
-webkit-box-shadow: 2px 2px 5px 5px rgba(255,255,255,0.6);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,
ShadowOpacity=0.30);
-ms-filter: “progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,
MakeShadow=true,ShadowOpacity=0.30)”;
zoom: 1;
}

.ieshadow .iecontent {
position: relative; /* This ensures the inner section is not blurred */
padding: 100px;
background-color: #ffffff;
}

Blue Shadow

The HTML code would therefore look like:

<div class=”ieshadow”>
<div class=”iecontent”>
Content
</div>
</div>

As with most things, trial and error will often get you the best results. If at first you’re not happy with the shadow of your divs, edit the css and try new settings.

Helpful Resources:

Css-tricks.com – Box Shadows
CSS Secrets Squidoo Lens

Share This: