Css flayout menus are a popular and attractive design feature, adding depth and interest to an otherwise flat design. Most people use a graphics package like Photoshop to add drop shadows directly to an image. However, using the power of CSS it is possible to apply simple drop shadow effects without altering the underlying image.
There are various reasons you may want to do this. For instance, you may allow nontechnical people to administer your site who have no experience using Photoshop, or you may simply be uploading images from a location where you do not have access to Photoshop,
such as an Internet cafe. By having a predefined html css buttons,you can simply upload a regular image and have it displayed on your site with a drop shadow

One of the nicest benefits of using CSS is that it is nondestructive. If you decide that you want to remove the html css buttons, you can simply alter a couple of lines in your CSS files rather than having to reprocess all of your files.

The first thing you need to do is create the css flayout menu.You can create your buttons using Adobe Photoshop. Create a new Photoshop file, the dimensions of which are as large as the maximum size of your image. You can do a file that’s 800 pixels by 800 pixels just to be on the safe side. Unlock the background layer and fill it with the color you want your shadow to sit on. In my case I simply kept the background layer white. Create a new layer and fill it with white. Now move this layer up and left by 4 or 5 pixels and then apply a 4- or 5-pixel-wide drop shadow to this layer.

It is important to keep the code on one line and not separate the div and the image using whitespace. IE 5.5 has a whitespace bug that will cause a gap between the image and the drop shadow if your code is on separate lines. Use your creativity in css design dom in innovation scripting standard web web xhtml.

To create the effect, you first need to apply your shadow graphic to the background of the wrapper div. Because divs are block-level elements, they stretch horizontally, taking up all the available space. In this situation we want the div to wrap around the image. You can do this by explicitly setting a width for the wrapper div, but doing so reduces the useful ness of the flayout menu technique. Instead, you can float the div, causing it to “shrink-wrap” on modern browsers, with one exception: IE 5.x on the Mac. You may want to hide these styles from IE 5.x on the Mac like it's mentioned in this online css cook book.

Fortunately, you can re-create css professional effects with the clever use of PNGs, which are helpful when creating html css buttons, and the addition of a nonsemantic div. This method works by creating a PNG with alpha transparency to mask the edges of the drop shadow graphic.
First you need to make the masking PNG. Create a new Photoshop file that’s 800 pixels by 800 pixels. Delete the contents of the background layer and then make a 5-pixel-wide selection at the right edge of the screen. Fill this with a gradient from white to transparent. Make a 5-pixel-high selection at the top of the page and again, fill this with your gradient. You should end up with a white, fuzzy border along the top and left of your document, as shown in the free css scripts and templates designed to implement css design flexibility of the falyout menus.