How can I make a CSS wraparound drop shadow? Or is there a good way? With the least duct tape?

Question

I would like a rectangular DIV to have a dropshadow around it on all four sides.

Now I might be able to get something like I want by using a container div and have one drop shadow with positive and one with negative values; I haven't seen what I could push. And because this is being done in boilerplate code, I could have a series of nested DIV's with different border colors, the old pre-CSS way. Some way I might be able to make four dropshadows for four DIV's. See, for instance, "CSS shadows on 3 sides."

However, all the solutions I have seen, or seen evidence of in searching, smell like duct tape. Are drop shadows strongly enough designed for 2 sides that 4 sides cannot be gracefully implemented without duct tape?

I'll use duct tape if I have to, but I'd rather find out if there's a good way to do it before choosing among brands of duct tape.

score 1 · Accepted Answer · answered Mar 14 '13 at 20:17

1

You're looking to have more of an overhead, hover shadow?

.shadow {
    -webkit-box-shadow:0 0 10px rgb(0,0,0);
    -moz-box-shadow:0 0 10px rgb(0,0,0);
    box-shadow:0 0 10px rgb(0,0,0);
}

You can use it with inset too, makes a really nice 3d look to the edges.

answered Mar 14 '13 at 20:17

PlantTheIdea

16,061
5
35
40

Bingo; upvoted and intend to accept when allowed in 9 minutes. Thanks, – Christos Hayward Mar 14 '13 at 20:21
no problem. i love using subtle versions of these guys on :hover. – PlantTheIdea Mar 14 '13 at 20:22
Hadn't thought about that; I'll be delighted to let that suggestion simmer. – Christos Hayward Mar 14 '13 at 20:31
combine it with a CSS transition, and its like the element rises from the page ;) – PlantTheIdea Mar 14 '13 at 20:36

score 0 · Answer 2 · answered Mar 14 '13 at 20:21

0

You can just add the optional spread value (the 10px) to your syntax. Like this:

.dropshadow {
-webkit-box-shadow: 0px 0px 5px 10px rgba(0,0,0,.5);
-moz-box-shadow: 0px 0px 5px 10px rgba(0,0,0,.5);
box-shadow: 0px 0px 5px 10px rgba(0,0,0,.5);
}

answered Mar 14 '13 at 20:21

Christoffer Helgelin Hald

571
4
15

How can I make a CSS wraparound drop shadow? Or is there a good way? With the least duct tape?

2 Answers2