Using image shadow boxes/containers

You can apply a “drop shadow” effect to any images in your content by applying a simple CSS markup. The effect comes in several different sizes:

For the drop shadow to work properly, the image must be exactly the correct pixel dimensions for the class.

Click here for visual samples of all the available classes.

To insert the markup in Dreamweaver, you can either do it in Code view, or select the image, press Ctrl-T (Apple-T on a Mac) and insert the markup.

Code example:

<div class="image_large"><img src="test1.jpg" alt="680x210" /></div>

<div class="image_medium"><img src="test2.jpg" alt="450x210" /></div>

<div class="image_small_square"><img src="test3.jpg" alt="210x210" /></div>

<div class="image_small_tall"><img src="test4.jpg" alt="210x315" /></div>

<div class="image_small_4x3"><img src="test5.jpg" alt="210x158"/></div>

<div class="image_small_short"><img src="test6.jpg" alt="210x80"/></div>

[edit] Corner caption (tag for text over image)

There is also a CSS class to put a corner caption on an image. This corner caption works only in the 680x210 and 450x210 dimensions.

First download the PSD file for the corner caption template: Go to ftp://wdn:1869@ucommdev.unl.edu/image_templates/ and look for image_tag.psd.

After you've saved your corner caption as a PNG file and uploaded it to a web server, use the following markup to make it appear on the top left corner of your image.

<div class="image_large">
<img src="your_tag_image.png" id="imagetag" alt=""/> <img alt="" src="your_image.jpg">
</div>

Here's an example of what it will look like: