6 times 9 Drop Shadow

This is a project I created many years ago, and haven't touched in about 10 to 13 years. It's mainly here for posterity, but if you still find it useful (and if it still works) then by all means feel free to make use of it. Any references to "6 times 9" are because that is the retired website where I was previously hosting things like this.

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 an optional convenience; it allows you to specify one DIV in the HTML, rather than the two DIVs that are actually required.

NOTE: The image is white, and thus requires a white background. Had I been making it today I'd have used a transparent PNG, but such is life...

Example

Using JavaScript:

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.

Without JavaScript:

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.

Using

Add the following CSS to your stylesheet:

/* 6 times 9 Drop Shadow - http://richardwinskill.uk/code/dropshadow.php */
.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.

Then add

<script src="dropshadow.js"></script>

to 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.

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.

Download

To download the dropshadow image just right-click and choose "Save As" (or the equivalent for your device/web browser).

To download the JavaScript file just right-click and choose "Save As" (or the equivalent for your device/web browser).

Last updated: (version "Alpha")