Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Sunday, February 13, 2011

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:

PaddingThis 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;
 
BackgroundThe 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;
 
BorderThe 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;
 
ShadowThe 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;

There you have it. That's how you give your pictures some shadows. Cheers.

57 comments:

  1. it didn work for mine. i really like shadows. mine is internet explorer...which i dunno. you pardesi now??

    ReplyDelete
  2. @kitchenmorph: It won't work with IE, I've mentioned this twice in the post above. That's just how IE's 'advanced 'renderers' work. But I think IE9 will be able to support it like other browsers, but it's still in its beta version. If you're an IE fan, wait for the stable release to be out.

    ReplyDelete
  3. thanks dude, really helps a lot, am starting to apply all your tips here to familiarize each tweaks. lol

    ReplyDelete
  4. @PinoyBeBiz: No problem mate. Be sure to experiment them in your dummy blog first before applying to your real deal. Cheers.

    ReplyDelete
  5. Great tip YoboY thanks! But is there a way to exclude the images I want, say with some kind of code in the post editor?

    ReplyDelete
  6. 4bits: Oh yes, I can think of a way. 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:

    .ssnoshadow img{
    padding: none !important;
    border: none !important;

    -moz-box-shadow: 0px 0px 0px transparent !important;
    -webkit-box-shadow: 0px 0px 0px transparent !important;
    box-shadow: 0px 0px 0px transparent !important;
    }

    Now, when you've uploaded a picture, click on Edit HTML (as opposed to Compose mode), and find for the image's HTML. You will see this at the very first line of the HTML: class="separator"

    Change it to: class="ssnoshadow"
    And you're good to go. Cheers and God bless.

    ReplyDelete
  7. omg thanks for the quick reply! It works nicely, you're the best.

    ReplyDelete
  8. 4bits: Happy to help mate.

    Cheers and God bless.

    ReplyDelete
  9. Wow! Thanks for all you do! All of your tutorials have been so very helpful getting my blog up and running. Myself and my blog is grateful! :)

    http://big-brother-rantiness.blogspot.com/

    ReplyDelete
  10. @BBG. Happy to help. Glad you find them useful. Cheers and God bless.

    ReplyDelete
  11. Hey, I searched everywhere on Google and here as well, but I couldn't find anything. I was wondering how do I get a shadow or something on my pictures that are placed in gadgets. Here's my blog: http://malisticvanity.blogspot.com/ You see those small pictures on the right. They seem so out of place and a shadow would really do the trick. So if you have time, please reply. I'd be very thankful.

    ReplyDelete
  12. @malistic: Should have included this tweak in the tutorial as well. Here you go. Add this CSS instead:

    .Image 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);
    }

    Cheers.

    ReplyDelete
  13. Thank you. I don't see many people just helping others out of good will. You are my hero now. :)

    ReplyDelete
  14. @malistic: That's thoughtful. Thanks. And happy blogging.

    Cheers and God bless.

    ReplyDelete
  15. hi there, thanks for useful info! Just wondering (and apologies if you've already posted about this, if i can delete shadow border around entire page? http://makeupbysunshine.blogspot.com/ any suggestions would be helpful and thanks in advance :)

    ReplyDelete
  16. @sunshine: Glad you came to the right place. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

    .content-outer {
    -moz-box-shadow: 0px 0px 0px transparent !important;
    -webkit-box-shadow: 0px 0px 0px transparent !important;
    -goog-ms-box-shadow: 0px 0px 0px transparent !important;
    box-shadow: 0px 0px 0px transparent !important;
    }

    ReplyDelete
  17. Yes! Thank you so much. I'm in love with your site!

    ReplyDelete
    Replies
    1. Glad to hear that :) You're most welcome!

      Delete
  18. Thank you! EXACTLY what I wanted to do!!

    ReplyDelete
    Replies
    1. Glad you find it useful :) Happy Sunday!

      Delete
  19. Thanks a lot. Really Helpful.

    ReplyDelete
  20. In a jet-black background changing 'white' to 'cyan', will give a nice glow effect!

    ReplyDelete
    Replies
    1. Thanks for sharing that Sheldon. Bazinga!

      Delete
  21. I tried this and it didn't work, just to be safe, how do I 'undo' it?? when I go back to 'Add CSS' nothing is there.

    ReplyDelete
    Replies
    1. Perhaps it didn't get saved properly. You can always check your template's HTML if the codes are there..

      Delete
  22. Hey thanks for your help, I just wanted a border and padding, but no shadow, I've tried removing the last three lines of the code, but that doesn't work, am I doing it wrong? thanks

    ReplyDelete
    Replies
    1. Hi there,

      Here, add this to your CSS:

      .post img{
      -moz-box-shadow: 0px 0px 0px transparent !important;
      -webkit-box-shadow: 0px 0px 0px transparent !important;
      box-shadow: 0px 0px 0px transparent !important;
      }

      Let me know how it goes :)

      Delete
    2. that seems to take the whole padding and border away too :(

      Delete
    3. The padding is very much there.. There is no border defined to begin with.. Your shadows were doing the job previously.. You can replace the shadow with proper border by using the following:

      .post img{
      border: 1px solid black !important;
      -moz-box-shadow: 0px 0px 0px transparent !important;
      -webkit-box-shadow: 0px 0px 0px transparent !important;
      box-shadow: 0px 0px 0px transparent !important;
      }

      Give it a whirl..

      Delete
    4. I finally figured it out thanks! I was reading the above comments is it still possible to take away the white border etc from one image in particular each time? It's an image I put into the post? thanks

      Delete
    5. Hi Jasprit,

      Yes it is possible to remove your border from one or more selected images, instead of applying the rules to all the images.. Here's how you do it:

      http://www.southernspeakers.net/2011/12/removing-border-and-shadow-from.html

      Cheers :)

      Delete
    6. Thank you that worked perfectly! :)

      Delete
  23. Hi!

    I have a script (js) which contains information about styles to be applied to images which belong to that class.

    I want to apply this class to all the images at the posts of a blog...automatically and for all previous posts. Which code should I modify?

    Example.

    Defined class is: class="mystyle"

    I want that every img tag includes this class so the code of every image of a post would be like this:

    img class="mystyle" src="......"


    Thanks in advance

    ReplyDelete
    Replies
    1. Hi Plutomon,

      I can't say i'm following entirely. But if you're looking for the right class to apply a certain style to all your images, then use the following class: .post img or simply img

      Delete
  24. I have tried more codes but not of that worked perfect. Then add your code its work perfect. Than you so much.

    ReplyDelete
    Replies
    1. Excellent! Glad you've found the right code :)

      Delete
  25. Incredibly helpful - and I have now followed you! My blog looks 20 million times better now! Thank you very very much!

    cheers
    Lori

    ReplyDelete
    Replies
    1. Lol.. Glad I could be of help Lori. Let me know if you need any help at all.

      Cheers :)

      Delete
  26. For some odd reason this code has no effect on my blog. (Changing the color of the description title does nothing as well, if that's worth knowing.) I tried Safari and Firefox (both doing the changes and viewing the blog), but still nothing. Any ideas?

    ReplyDelete
    Replies
    1. Hi there,

      I've checked your blog, and the tweak is working fine. The color of the shadow is black, and so is your background - which is why you could not see anything. Just FYI, if you set a brighter background, this is how your images will look like --> http://img818.imageshack.us/img818/6264/20130317013325capture.png

      Delete
  27. Thanks for nice tips, I applied that my blog.

    ReplyDelete
  28. Hello! Is there any way to have the default shadow border around square/rectangular images, which is the bulk of what I have on my blog, and not have any border at all around round images?

    ReplyDelete
  29. Oh, please disregard my previous comment. I was able to find your tutorial about what I wanted to do. You are so awesome, thank you!!!

    ReplyDelete
  30. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Not following. Are you not able to add border for PNG images?

      Delete
    2. This comment has been removed by the author.

      Delete
    3. I can come up with a code but this will add border to all your pictures, including the ones in your sidebar, header, etc. Are you looking to add border to pictures in certain areas only?

      Delete
  31. Thanks for this post. I love you!

    missposion.blogspot.com

    ReplyDelete
  32. Thank you for this tutorial, it works for me great!

    ReplyDelete
  33. Hi, the coding isn't working for me. My website is on the Blogger platform but the template is not the pre-designed Blogger one.

    ReplyDelete
    Replies
    1. Let's have a look at your blog - what's your blog's URL?

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.