Drop shadow on a div container?

Question

I have a searchbox with auto-suggest that pops a div up underneath it with multiple search string suggestions (like google). Is it possible to have drop shadow on the auto-suggest box with CSS or will I need a script of some sort? I tried a background image but the number of suggests can vary from 1 to 10 or 15.

I'd prefer something that works in IE6+ and FF2+ if possible. Thanks!

score 74 · Answer 1 · edited May 01 '11 at 07:28

74

This works for me on all my browsers:

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

then just give any div the shadow class, no jQuery required.

edited May 01 '11 at 07:28

alex

479,566
201
878
984

answered Feb 26 '11 at 16:25

Scott H

741
5
2

3

http://www.css3.info/preview/box-shadow/ - I found this site to have great examples of different shadow effects – Darcy Jul 05 '11 at 20:06
you don't need box-shadow by itself for IE9? – Jonathan Henson Jul 26 '11 at 16:31
3

In the latest versions of the major browsers, `box-shadow` should work properly. No vendor-prefixes required anymore. – Simon Verbeke Sep 23 '12 at 19:31
adding to simon verbeke's comment, box shadow wasn't even working for me in ff until I switch from -moz-box-shadow to box-shadow. +1! – kyle Jul 20 '14 at 20:50

alex · Answer 2 · 2012-06-08T12:10:10.863

12

CSS3 has a box-shadow property. Vendor prefixes are required at the moment 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 at css3please.

edited Jun 08 '12 at 12:10

answered May 13 '09 at 23:49

alex

479,566
201
878
984

Just note that for the absolute positioning to work right, the auto-suggest box has to be positioned either absolutely or relatively. – Andrew Noyes May 13 '09 at 23:57
What if I can't have a fixed height to the auto-suggest box? The number of suggests ranges from 1-15. – May 14 '09 at 00:08

score 3 · Answer 3 · answered Dec 25 '14 at 07:04

3

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

answered Dec 25 '14 at 07:04

Biswadeep Sarkar

841
9
17

score 2 · Answer 4 · edited Apr 29 '14 at 22:45

2

you might want to try this. Seems to be pretty easy and works on IE6 and Moz atleast.

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

The general syntax is : border-[postion]:[border-style] [border-width] [border-color] | inherit

The list of available [border-style]s are :

dashed
dotted
double
groove
hidden
inset
none
outset
ridge
solid
inherit

edited Apr 29 '14 at 22:45

alex

479,566
201
878
984

answered Mar 11 '10 at 05:27

The Machine

1,221
4
14
27

Just adds a border and doesn't drop a shadow. – Si8 Feb 19 '14 at 15:11

score 2 · Answer 5 · answered May 13 '09 at 23:56

2

The most widely compatible way of doing this is likely going to be creating a second div under your auto-suggest box the same size as the box itself, nudged a few pixels down and to the right. You can use JS to create and position it, which shouldn't be terribly difficult if you're using a fairly modern framework.

answered May 13 '09 at 23:56

Brant Bobby

14,956
14
78
115

Yup, and you can make a nice main box any shape you like with the right background image, and make an all-black one of the same shape for the drop-shadow and adjust the opacity to get the effect you want. – Diodeus - James MacFarlane May 14 '09 at 02:45

score -1 · Answer 6 · answered May 14 '09 at 00:28

-1

You can try using the PNG drop shadows. IE6 doesn't support it, however it will degrade nicely.

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

answered May 14 '09 at 00:28

KevMo

5,590
13
57
70

Drop shadow on a div container?

6 Answers6

Linked