Add a Fancy Drop Shadow to Your Comment Avatars

A reader of this blog posted a comment asking me to share the code that I’m using for the comment gravatar images. I’ve provided the code below, but keep in mind that you can always use Firebug to look at the CSS code used on elements of a website. I’m not saying you should copy code from other sites, but you can certainly get ideas and learn from other web developers as to how they achieve certain effects.

It’s really just CSS that was used to achieve the border and drop shadow effect, along with an image I had to create.

Now, you can certainly recreate that shadow effect using only CSS and that’s also an option for you. Here are two links to tutorials on that:

• CSS Drop Shadows Without Images from Nicolas Gallagher.
• Pure CSS3 box-shadow page curl effect from Matt Hamm.

Here’s my simple CSS code that I used for the avatar images on this site. Just add this to your custom.css file.

.custom span.avatar {
   background: url(images/shadow.png) no-repeat center bottom;
   float: right;
   height: 103px;
   margin-left: 10px;
   width: 86px;
}

.custom .avatar img {
    background: #FFFFFF;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #DDDDDD;
    padding: 5px;
}

Here is a link to the image file I used. If your avatar image on your site is not the same size then the shadow won’t work and you’ll need to create a new one, or you can just try out one of the CSS solutions I provided above. You can always adjust the avatar image size too.

Of course, you aren’t limited to this styling. You can get creative and style the comment gravatar images any way you want with CSS.

Tagged as: thesis tips, web design