Adding A Box Shadow Effect To Content Boxes

If you like the way content boxes look when they’re lifted off the page, then this tutorial is for you.

You can easily apply the box shadow effect to existing content boxes site wide or on a per box basis.

If you already use colored content boxes in WordPress, you can also easily add  the CSS code to create a box shadow effect to your existing code.

Examples

This is a standard colored content box.

This is a colored content box with a shadow effect added.

Here’s the code for another content box with width set at 500px and text aligned centre.

/* WP Sites Content Box With Shadow Effect
------------------------------------------------------------ */

.content-box-testshadow {
margin: 0 25px 25px;
overflow: hidden;
text-align: center;
width: 500px;
padding: 20px;
background-color: #f0f8ff;
-moz-box-shadow: 0px 0px 20px #000000;
-webkit-box-shadow: 0px 0px 20px #000000;
box-shadow: 0px 0px 20px #000000;
}

Here’s the HTML code:

<div class="content-box-testshadow">Enter content box text here.</div>

So how do you add the shadow effect to a content box?

Adding A Box Shadow

Use a online CSS3 code generator to produce the code.

Then add the code to your existing code which produces the content boxes. Place the code into your child themes style.css file and add the line of HTML code where ever you want to display your content boxes with a box shadow effect in your theme.

Standard Content Box Code

/* Standard Content Box
------------------------------------------------------------ */

.content-box-yellow {
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
background-color: #fef5c4;
border: 1px solid #fadf98;
}

Here’s some sample code which goes in your child themes style.css file.

This code includes the code for creating a box shadow effect which you can generate using a CSS3 generator.

/* WP Sites Content Box Shadow Effect
------------------------------------------------------------ */
.shadow-effect-box {
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
background-color: #F5F5F5;
border: 2px solid #999999;
-moz-box-shadow: 0px 0px 20px #000000;
-webkit-box-shadow: 0px 0px 20px #000000;
box-shadow: 0px 0px 20px #000000;
}

This code adds support for moz (Firefox) and webkit (Safari/Chrome).

Here’s the HTML code you paste into your WordPress text editor.

<div class="shadow-effect-box">Enter content box text here.</div>

Plugin

Another option would be to install a plugin.

Drop Shadow Boxes is a plugin which i tested which also creates a widget.

Other Effects

There’s lots of different effects you can add to your existing themes CSS code simply by generating the code using a free online tool.

Then its simply a matter of adding the code to your themes existing CSS and testing it on a local installation before pasting it into your live site.