CODEWITHSUNDEEP
css
Ben
Ben

Reputation: 62484

Is this tab-shadow possible in only CSS?

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

Upvotes: 3

Views: 6177

Answers (7)

Michael Mullany
Michael Mullany

Reputation: 31805

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

Upvotes: 0

methodofaction
methodofaction

Reputation: 72455

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/

Upvotes: 4

andreasbovens
andreasbovens

Reputation: 1437

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

Upvotes: 0

mitch
mitch

Reputation: 995

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/

Upvotes: 1

Mika
Mika

Reputation: 1539

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

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

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.

Upvotes: 0

Chris
Chris

Reputation: 3201

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

Upvotes: 1

Related Questions