How to create shaded divs like this with CSS

.box {
    width: 120px;
    height: 60px;
    border: 1px solid #000;
    background: yellow;

    -webkit-box-shadow: 3px 3px 0px #777;
    -moz-box-shadow: 3px 3px 0px #777;
    box-shadow: 3px 3px 0px #777;
}

It is supported in many browsers: http://caniuse.com/#search=box-shadow

Notable exceptions are IE 7 and 8. If you need it, you can use CSS3 PIE to provide box-shadow.

+1

thirtydot Jun 06 '11 at 9:48

source share

If you need only a white background (or any fixed background color), you can make a field with a transparent colored part, and the edges a background. Then you set this as a background image, and the background color can control the color of the face in the field.

+1

Joey Jun 06 '11 at 10:03

source share

amustill · Accepted Answer · 2011-06-06T09:49:15+0000

This uses the CSS box-shadow method, which is compatible in Firefox 3.5+, Safari 3+, Chrome, Opera 10.5+, and IE9 +.

http://jsbin.com/usabe4

Several box-shadoware used to approximate the desired effect, than one box-shadowcapable of:

#box1 {
    background: yellow;
    -moz-box-shadow: 1px 1px 0 orange, 2px 2px 0 orange, 3px 3px 0 orange;
    -webkit-box-shadow: 1px 1px 0 orange, 2px 2px 0 orange, 3px 3px 0 orange;
    box-shadow: 1px 1px 0 orange, 2px 2px 0 orange, 3px 3px 0 orange;
}

How to create shaded divs like this with CSS

More articles: