Adding Shadow Around Blogger Post Pictures

It has been some time since I last composed a post. I moved to another country and I have just settled down - to a certain extent. And now I'm back - hopefully at full swing again. So, today I'm going to show how you can add shadows around your post pictures. I'm not much in the mood for words so let's cut to chase shall we?

Oh, by the way, it won't work with Internet Explorer 8 or any other older version of IE.

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

.post-body img {
padding: 1px;
background: transparent !important;
border: 1px solid transparent !important;

-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
}

That's it, you're done. If you're looking for a way to customise the outcome of this tutorial, see below for explanations of what each line does, and how you can change it.

Customization:

Padding	This line adds a small gap around your image. It is associated with the next line to it, the 'background' attribute. If you're looking for a way to change the white padding to a different color, see the background section below. If you want to remove the padding, set it to 0px. Example: padding: 0px;
Background	The background attribute adds color to the padding attribute. To change the color, just change the word 'transparent' to something else. For example: background: black !important;
Border	The border attributes works like both 'padding' attribute and 'background' attribute combined. You can set it's width and color all in one line. So why add both padding and border? Well, you can achieve a nice effect by the combination of these two, by setting your padding to be white and your border to be a crisp black line. So, if you prefer it, change the border attribute to: border: 1px solid black !important; To remove the border, use: border: none !important;
Shadow	The last three lines are the lines that control the shadow of your images. There are three lines because the shadow attribute is browser-specific. So for different browsers, a different line must be used. The above three lines are sufficient to cover most browsers. But you will never get it to work in IE, so don't beat yourself about it. You can adjust the horizontal projection of the shadow (let the shadow be more towards the left or right side of the picture), the vertical projection of the shadow (let the shadow be more towards the top or bottom side of the picture), the shadow spread, the color of the shadow and it's opacity. No matter what you do, make sure you apply the changes to all three lines. To adjust the horizontal projection of the shadow (to determine where the shadow will be), adjust the first '3px' values (of all 3 lines). Negative values will bring the shadow towards the left side of the image. To adjust the vertical projection of the shadow, adjust the second '3px' values (of all 3 lines). Negative values will bring the shadow towards the top of the picture. To control the shadow spread, adjust the '10px' values (of all 3 lines). To adjust the opacity of the shadow, adjust the '.8' values (of all 3 lines) To change the color of the shadow, replace 'rgba(0, 0, 0, .8)' with your preferred color. Here's an example. In this example, I'm going to set the horizontal projection of the shadow to be towards the left, the vertical projection to be towards the bottom, the spread to be 3px, and let the shadow be white (in case your blog has a black background). -moz-box-shadow: -6px 5px 3px white; -webkit-box-shadow: -6px 5px 3px white; box-shadow: -6px 5px 3px white;