Is this tab-shadow possible in only CSS?

Is it possible to duplicate the shadow effect you see here: http://a.imagehost.org/0开发者_运维问答835/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...

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/

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/

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;
} 

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.

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...

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

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.