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;
}
margin: 5 10px 10px 1;
border: 2px solid #ddd;
}
.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;
}
margin: 5 10px 10px 1;
box-shadow: 0 0 10px #111;
border: 2px solid #ddd;
}
.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.
