CSS: What's a good way to create a raised box effect?

Question

That is, the left and bottom borders of the element need to give a 3d effect of it popping out. Is there a good, purely-CSS way to accomplish this effect?

Answer 1

You could use the border-bottom-style and border-right-style, just as StackOverFlow does with the tags.

Use the styles inset and outset.

Answer 2

You can base your solution on this:

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

Answer 3

I found this question while trying to figure this out as well, and I think what you're looking for is something like this http://jsfiddle.net/9Lt2477w/.

.raisedbox { 
    padding: 10px;
    border: 1px solid #77aaff;
    box-shadow:  -1px 1px #77aaff,
         -2px 2px #77aaff,
         -3px 3px #77aaff,
         -4px 4px #77aaff,
         -5px 5px #77aaff;
}

Thanks to http://sam-morrow.com/playground/css-cubes.py for the help here. I didn't realize you could just keep adding additional lines into the box-shadow property.

Answer 4

For compatibility with more browsers you might want to simulate the inset/outset stuff by just adding a normal border bottom and right or top and left which is darker than the color of the div, in fact that is what Stackoverflow is using currently for the tags in my browser.

Answer 5

#foo {
    /* ... */
    border:8px outset #999;
    -webkit-box-shadow: 5px 5px 15px rgba(0,0,0,0.4);
    -moz-box-shadow: 5px 5px 15px rgba(0,0,0,0.4);
}

Here's the example live: http://jsfiddle.net/sjkXS/1/
Yes, the effect here is cheesily-extreme, indended to showcase what is possible.