Fantastic Collection of WordPress Themes & Website Templates

Fat Free CSS Drop Shadows

Most of the current publicized methods for implementing drop shadows in web design are far too excessive, some require wrapping the images in three extra divs, most rely on sliced images or sluggish javascript, but there’s a really simple method to add shadows to any block-level element without the need for any of this other faff, just pure, logical CSS.

As you’ll see in the examples, one can generate shadows of any width, in any colour and on any background. This technique is also rendered exactly the same in all browsers because, well, it’s just so simple (and simple solutions make me tingle).

Example: 2px Subtle Shadow

Example Image 1
img.shadow {
background: #afafaf;
padding: 1px;
border: 1px solid #d6d6d6;
}

Note that the above code is suited for this site’s background colour, I figuring out what colours to use before simply copying and pasting the code.

The logic behind this is quite simple, pad the element with 1 pixel of spacing to reveal its background colour (which is set to an appropriate shade of grey), then set the element’s border to a 1 pixel solid, lighter shade of grey. This gives a subtle (and in my opinion, good-looking) shadow effect, and won’t give you any headaches in the long run. I recommend using Photoshop to create a 3 pixel drop shadow on a layer (using your site’s background colour as the document background) and use this to reference your shadow colours.

If you’d like to see some more examples and take a look at the code, I’ve set up an Example Page. Using the methods documented there you can generate shadows of any size, even though I do believe the more subtle look is much nicer.

I’ve used this technique on a handful of client’s sites, even on dark backgrounds and it always works wonderfully, and since there’s no extra images, tricky javascript etc, you feel a lot cleaner when using this :)

Free Themes

Web Services Template

This is a beautiful and clean Web Services / Business Template.

Photography Template

This is a beautiful and clean photography template.

Hosting Business Template

This is a beautiful and clean Hosting/Business Template that can be used for companies who offer design related products or services to their customers.

Business Web Template

This is a beautiful and clean Business Template that can be used for companies who offer design related products or services to their customers.

Green Design Template

This is a beautiful and clean Green Design Company Template that can be used for companies who offer design related products or services to their customers.

Auto Website Template

This is a beautiful and clean Auto Website Template that can be used for companies who offer design related products or services to their customers.

Revolutionary WordPress Theme

Clean and easy on eyes Wordpress theme, well structured, top quality coded with optional ad spots, fully widgetized and ready to go!!!

LightCSS WordPress Theme

Clean and easy on eyes theme, well structured, top quality coded with featured posts, ads spots, fully widgetized and ready to go!!!

ColdBlue Blogger Template

For those of you who love the simplicity of our popular ColdBlue Wordpress theme, but use Blogger as your blogging platform…you can now rejoice! The theme is now available!

Curious WordPress Theme

Curious is released and developed free of charge and will be continually improved and updated.

SandDollar WordPress Theme

SandDollar is released and developed free of charge and will be continually improved and updated...

ColdBlue WordPress Theme

ColdBlue is a WordPress Theme created to be aesthetically pleasing, open, minimalistic and easy to use.

Sharpfolio: WordPress Portfolio Theme

Sharpfolio is a WordPress theme designed to enable Web Designers, Graphic Designers, Photographers, Motion Designers, Artists or any creative professional....