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...
-moz-box-shadow: 0px -10px 5px #888;
-webkit-box-shadow: 0px -10px 5px #888;
box-shadow: 0px -10px 5px #888;
-moz-box-shadow: 0px 0px 5px #888;
-webkit-box-shadow: 0px 0px 5px #888;
box-shadow: 0px 0px 5px #888;
Solution courtesy of: mitch
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.
You could use CSS3 to do it which would go something like this:
box-shadow: 10px 10px 5px #888;
Discussion courtesy of: Chris
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...
Discussion courtesy of: Mika
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:
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.
This recipe can be found in it's original form on Stack Over Flow.