6 Times 9 Drop Shadow

About

The 6 times 9 Drop Shadow is an image-based drop shadow that uses CSS to achieve the effect and offers JavaScript to make the implementation a little easier.

The JavaScript is optional (it allows you to specify one DIV in the HTML, rather than the two DIVs that are required) but will require slightly more HTML without.

NOTE: The image is white, and thus requires a white background. The image used in the example below has been edited for the green background.

Example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

The drop shadow has been used extensively at Cat Dog Sine Theta, if you wish to see it in a real-world situation.

Using

Implementing

First add the CSS to your stylesheet, save the image and JavaScript file somewhere, and add

    <script src="dropshadow.js" type="text/javascript"></script>

to the end of the head section.

NOTE: Make sure the URL for the image in the CSS and the SRC for the JavaScript in the head are pointing to wherever you put the image and JavaScript files.

You now have two options: use the JavaScript, or do it manually.

JavaScript: If you're using the JavaScript, use

    <div class="shadow">Content</div>

for any DIV you want to have a drop shadow.

Manually: If you're not using the JavaScript, use

    <div class="outer"><div class="inner">Content</div></div>

for any DIV you want to have a drop shadow.

Both methods should work for any content you want - text, images, forms, etc.

NOTE: The CSS will probably work with a lot of HTML elements, but the JavaScript will only do DIVs.

Styling

The two CLASSes are .outer and .inner. CSS for styling the boxes can be applied to either of these, as well as the .shadow class used with the JavaScript.

If you use the CSS as shown below, then the boxes will be the full width of the container (e.g. the page, or in this case the green CONTENT column).

If you wish to specify a width and/or height, then I recommend applying it to .inner and adding float: left; to the CSS for .outer; this way, the inner DIV will be the size you want and the outer DIV will shrink to fit.

Download

CSS

The CSS for the drop shadow is:

/* 6 times 9 Drop Shadow - http://www.6times9.com/javascript/dropshadow/ */
.outer {background: scroll #fff url(dropshadow.gif) right bottom no-repeat; margin-top: 13px; margin-left: 13px;}
.inner {overflow: auto; border: 1px solid #999; left: -13px; top: -13px; position: relative;}

The 13px is the thickness of the shadow in the image. If you want to create your own image but use this code, then make sure you adjust the values accordingly.

Image

The image is 1500px by 1500px, but you can trim it to suit your needs if required. Just remember that it's the bottom-right corner that's important.

To download the shadow image just right-click and choose "Save As" (or the equivalent for your Operating System/Web Browser).

JavaScript

To download the JavaScript file just right-click and choose "Save As" (or the equivalent for your Operating System/Web Browser).

The current version is Alpha (2007-03-22) - No changelog.

Updates

There's now an RSS feed for easy notification of the infrequent updates to all 6 times 9 projects.

Feedback

I'd like to hear what you have to say about this; I've only been able to test it in IE, Firefox, and Opera in Windows - I have no idea if it'll work on a Mac, for example...

If you have any comments, compliments, or suggestions feel free to email me and let me know.