Cast a shadow on a container div?

Question

I have a search query with auto-help that returns a div below it with several sentences of a search string (e.g. google). Is it possible to have a shadow in the auto-suggestion box using CSS or will I need a script? I tried a background image, but the number of sentences can vary from 1 to 10 or 15.

I would prefer something that works in IE6 + and FF2 +, if possible. Thank!

Answer 1

This works for me in all my browsers:

.shadow { -moz-box-shadow: 0 0 30px 5px #999; -webkit-box-shadow: 0 0 30px 5px #999; } 

then just specify any div shadow class, jQuery is not required.

Answer 2

CSS3 has a box-shadow property. Vendor prefixes are currently required for maximum browser compatibility.

 div.box-shadow { -webkit-box-shadow: 2px 2px 4px 1px #fff; box-shadow: 2px 2px 4px 1px #fff; } 

There is a generator available in css3please .

Answer 3

The most common way to do this is likely to be to create a second div under your box with an automatic suggestion the same size as the box itself, pushing a few pixels down and to the right. You can use JS to create and host it, which should not be terribly difficult if you use a fairly modern infrastructure.

Answer 4

you can try this. This seems to be pretty easy and works on IE6 and Moz at least.

 <div id ="show" style="background-color:Silver;width:100px;height:100px;visibility:visible;border-bottom:outset 1px black;border-right:outset 1px black;" ></div> 

General syntax: border- [postion]: [border-style] [border-width] [border-color] | inherit

List of available [border-style] s:

• dotted line
• dotted line
• double
• groove
• is hidden
• insert
• no one
• outset
• crest
• solid
• inherits

Answer 5

 .shadow { -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; } 

Answer 6

You can try using shadows for PNG. IE6 does not support it, however it will deteriorate beautifully.

http://www.positioniseverything.net/articles/dropshadows.html