How-To Add Box-Shadows Around Your Blog Post Images

I’m using one of StudioPress’s Streamline themes, and was playing around with my post images, I wanted a shadow around each image that was placed in to each post, but was not sure how-to go about adding this effect, well I figured it out and  I would like to share the concept with you also.

First thing is to access your Style sheet.css

Go to Appearance > then editor, scroll down to  ( style.css ) and click on that file.

Next, look for the following code :: ( Post img )

.post img {
margin: 5 10px 10px 1;
border: 2px solid #ddd;
}

Source code

.post img {
margin: 5 10px 10px 1;
border: 2px solid #ddd;
}

Add the box shadow effect just before the border ::

( box-shadow: 0 0 10px #111; )

.post img {
margin: 5 10px 10px 1;
box-shadow: 0 0 10px #111;
border: 2px solid #ddd;
}

Source code

.post img {
margin: 5 10px 10px 1;
box-shadow: 0 0 10px #111;
border: 2px solid #ddd;
}

Here is your post image results ::

Here’s  the results of how your post images will look after you’ve inserted them in to your blog post. If you notice there’s a dark shadow around the images  below.

Control the thickness and colors, around the post images ::

Now that you’ve learned how to add the  ( Box shadow ) around your post images, you can also control the thickness and colors, also.

Make the following changes to the ( 10px ) to increase the shadow thickness for your post images. You can increase or decrease, the ( Pixel ) dimensions to get the correct effect.

Changing the shadow color ::

You can also change the color of the shadow by changing the hex number ( #111 ) to any color hex of your choice.

Example ::

What I’ve done is change the hex color from #111 to #8B0000 and the results are as follow.

Note :

This effect can be applied to most if not all, of StudioPress’s themes, the coding may be a little different but should still work the same.