Is this tab-shadow possible in only CSS?

Question

Is it possible to duplicate the shadow effect you see here: http://a.imagehost.org/0835/sample.png without any images and using only CSS?

Let me clarify.... look at the shadow, it's around the tab and the content block itself, not just a simple div tag...

Please don't clutter up the question with useless comments unless you have something to contribute — Ben, Jan 13 '11 at 21:27

score 4 · Answer 1 · answered Jan 14 '11 at 03:53

4

Since your tab will most likely contain an anchor to make it clickable, I'd make the anchor a block element, give a background color, and increase the height to cover the bottom part of the shadow.

Here is a demo: http://jsfiddle.net/xFbfp/1/

answered Jan 14 '11 at 03:53

methodofaction

70,885
21
151
164

mitch · Accepted Answer · 2011-01-13T21:54:51.377

1

try this:

#tab {
    -moz-box-shadow: 0px -10px 5px #888;
    -webkit-box-shadow: 0px -10px 5px #888;
    box-shadow: 0px -10px 5px #888;
    z-index: 1;
}
#content {
    -moz-box-shadow: 0px 0px 5px #888;
    -webkit-box-shadow: 0px 0px 5px #888;
    box-shadow: 0px 0px 5px #888;
    z-index: 0;
}

http://www.css3.info/preview/box-shadow/

edited Jan 13 '11 at 21:54

answered Jan 13 '11 at 21:23

mitch

985
10
12

can't you apply this to two separate divs? One with drop shadow above, the main content box (under the tab) will have drop shadow beneath? – mitch Jan 13 '11 at 21:49
If the tab was on top of hte content area, the tab's shadow would still be visible between the tab and content area... – Ben Jan 13 '11 at 21:57
1

not if the drop shadow for the tab is above it (ie the dropshadow never appears below the tab). – mitch Jan 13 '11 at 23:01

score 0 · Answer 3 · answered Jan 13 '11 at 21:23

Nope not that kind of 'faded' effect. You could do a solid shadow by playing about with some margins. But you would need a background image to get that faded effect.

OR

You could use CSS3 to do it which would go something like this:

#mydiv
{
   box-shadow: 10px 10px 5px #888;
}

score 0 · Answer 4 · answered Jan 13 '11 at 21:24

0

You need two boxes. One for the main one and one for the tab. The tab does not have a shadow on the bottom and must overlap the larger box to cover up that portion of its top shadow.

answered Jan 13 '11 at 21:24

Diodeus - James MacFarlane

112,730
33
157
176

How can I tell a shadow to not be on the bottom of an element? – Ben Jan 13 '11 at 21:27
1

You're right. You need a third box to cover it up that has no shadow. – Diodeus - James MacFarlane Jan 13 '11 at 21:51

score 0 · Answer 5 · answered Jan 13 '11 at 21:25

0

Only a idea...

If you use div´s: You can try to use z-index with the tab div and align it to the content div to cover the shadow (of content div)...

But the round corners are the problem between tab and content div...

answered Jan 13 '11 at 21:25

Mika

1,539
15
22

That would work, except I'm trying to get a shadow on the top of the content div as well without covering up the tab – Ben Jan 13 '11 at 21:31

score 0 · Answer 6 · edited May 23 '17 at 11:52

0

Creating a CSS3 box-shadow on all sides but one has useful info on how to sort out the various box-shadow issues.

edited May 23 '17 at 11:52

Community

1
1

answered Jan 13 '11 at 22:35

andreasbovens

1,447
12
11

score 0 · Answer 7 · answered Jan 17 '11 at 13:30

Well this is two absolutely positioned divs, with the tab div z-indexed on top of the content div. You just set a -y 3px offset for the tab shadow and a 3 pixel blur and you're good to go. From playing around with it, you kind of need to use rgba, with a .5 alpha value in order to get the proper shadow effect.

alt text

Is this tab-shadow possible in only CSS?

7 Answers7