JavaScript & PHP‎ > ‎

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.

Example

NOTE: The example is non-functional; once I spend more time with Google Sites I'll hopefully get all the JavaScript working. At the moment my primary goal is availability of the scripts. The example is, however, representative of the appearance of the proper script; largely due to being a screenshot of it...

Drop

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

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.

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

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.

Feedback

I'd like to hear what you have to say about this or any other project on the site.

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

Download

Note that the first version uploaded here was last updated 2007-03-22. The date of any subsequent changes will be accurately reflected in the date shown in the table.

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 & JavaScript

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.

Both it and the JavaScript are available from the links below.

SelectionFile type iconFile nameDescriptionSizeRevisionTimeUser
ą

View Download
The drop shadow image.  9k v. 3 31 Dec 2012, 14:33 Richard Winskill
ċ

Download
Optional JavaScript to simplify the implementation of the drop shadow.  1k v. 4 23 Mar 2013, 21:46 Richard Winskill
Comments