MyBB Community Forums

On the center frame of this website, there is a shadow along its edge that gives a cool 3D effect....how do you do that?

You can do that with images or using the CSS shadow properties.

MyBB.com does it using a couple of PNG images (one for sides and one for bottom) and a fixed-width container. This is the easiest cross-browser-compatible way to do it, but box-shadow (and browser-specific friends) on the container is the best (and a bit easier too) if you only care about the latest browsers (even IE9 supports it).

div#shadow {
position: relative;
background: url(http://mybb.com/assets/images/shadow.png) top left repeat-y;
width: 980px;
margin: auto auto;
height: auto;
}

Thanks guys! So one method is by code, the other method is a picture that's just slightly bigger than the main frame?