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

css effect border
Hamster picture Hamster · Jan 6, 2011 · Viewed 37k times · Source

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

Phrogz picture Phrogz · Jan 6, 2011 
#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.

Related questions

Fade Effect on Link Hover?

on many sites, such as http://www.clearleft.com, you'll notice that when the links are hovered over, they will fade into a different color as opposed to immediately switching, the default action. I assume JavaScript is used to create …

Read More
How do you make an image or button glow when you mouse over using javascript or jquery?

I want to add a glowing effect when I mouse over a button or image. How do I do this with javascript, jquery, or CSS? Here is an example of what I want it to look http://www.flashuser.net/…

Read More
(CSS) Make a background image scroll slower than everything else

here is is my CSS code for the body: body { padding: 0; margin: 0; background-image: url("../images/background.jpg"); background-repeat: no-repeat; background-color: grey; background-size: 100%; } What I want to do is make it so that the image scrolls slower than everything else on …

Read More