How To Create Drop Shadows On A Blog

Drop shadows can be a nice effect to add to your blog- you can add drop shadows practically anywhere on your blog just by altering your code. Here are a few of my favorite ways to add drop shadow.

To post images:

To make your images look like they are a photograph-

1. look for this code in your HTML:

.post img {
margin: 0px;
padding: 5px;
background: $imagebgColor;
border: 1px solid $imageBorderColor;
}

2. Now replace the code above with this code:

.post img {
margin: 0px;
padding: 0px;
background: #ffffff;
border: 9px solid #ffffff;
-moz-box-shadow: 0px 0px 2px 3px #cccccc;
-webkit-box-shadow: 0px 0px 2px 3px #cccccc;
}

3. Now hit save, and it should be done. If your border isn't the color you want- you can put in the color code you want.
If you want to alter this code to your taste. You can change the color of the shadow- by changing the color code. All color codes start with a # symbol and are six digits long.

If you want a thicker or thinner shadow, you can adjust the areas (shown above in green) by increasing or decreasing the numbers. Hit preview to see what the adjustment of numbers will do- once it's to your satisfaction be sure to save it.

To add drop show without a photo border-

1. look for this code in your html:

.post img {
margin: 0px;
padding: 5px;
background: $imagebgColor;
border: 1px solid $imageBorderColor;
}

2. Now replace the code above with this code:

.post img {
margin: 0px;
padding: 0px;
background: #ffffff;
border: 0px solid #ffffff;
-moz-box-shadow: #222222 4px 4px 10px;
-webkit-box-shadow: #222222 4px 4px 10px

}

3. Now hit save, and it should be done. Again you can change the color of the shadow- by changing the color code. All color codes start with a # symbol and are six digits long. You can view a list of color codes Here.

Shadow behind your post body:

1. look for this code in your HTML:

#outer-wrapper {
width: 950px;
margin: 0px auto 0;
text-align: left;
font: $bodyfont;
}

The section you need will vary from blog to blog- it may also look like this:

#blog-wrapper {
margin: 0 auto; /* auto – to make the template lay in the screen center */
padding: 7px;
margin-top: 0px;
margin-bottom: 35px;
text-align: center;
position: relative;
width: 980px;
background: $blogframeColor;
border: 0px solid $blogBorderColor;

}

Once you find the right code add these lines of code before the } symbol:

-moz-box-shadow: 0 0 40px #616161;
-webkit-box-shadow: 0 0 5px #616161;
-goog-ms-box-shadow: 0 0 10px #333333;
box-shadow: 0 0 40px #616161;

Make sure you hit preview before saving to be double sure you have the added lines of code in the right section. If it isn't putting shadow behind the post body- like shown Here then you will need to find the right section of code.

Once you have code added correctly, you can adjust the color of the shadow- you can add your own color codes.

Have any suggestions for tutorials? I would love to hear your ideas- feel free to leave your suggestion in the comments section 🙂