CSS Drop Shadow in WordPress

I found this effect at Neo’s blog. I don’t think it is suitable to use on my website so I use it on my personal website instead. You can see the demo at my personal blog or just visit Neo’s blog.

drop-shadow

To setup this effect is not difficult. It only involves CSS and a shadow image. First what you need to do is download this shadow image and upload it to your theme image folder. Like in my case, I uploaded it into /images.

Then, what you need to do is open your theme CSS file, style.css, and paste this code.

.entry img{
background: url(images/shadow.gif) no-repeat right bottom;
padding: 4px 10px 10px 4px;
border-top: #eee 1px solid;
border-left: #eee 1px solid;
}

Once finished, save the file and upload it back to your theme folder. As you can see in the CSS code above, the drop shadow will only work on images that are inside .entry class. Change the class name based on your theme structure.

Note: This trick is not limited for WordPress only. You can also use it on other websites other than WordPress. It is just CSS.

Comments

  1. i am newbie,can you explainme what do you mean by”Change the class name based on your theme structure.”?

    Thank you!

  2. Instead of using something like this:

    class=”style17″

    You would want to use something that is easier for you to work with like:

    class=”Outline”

  3. I am a big fan of CSS and am trying to use them more and more as I progress in my web page making abilities. Thanks for the write up.

  4. This is a really neat trick. Thank you very much!

  5. Thanks for that – just what I was looking for!