How to create shaded divs like this with CSS

I need to create shaded divs like those shown in the image below, using only 开发者_高级运维CSS. Any idea about how to create them using less coding?

Thank you!

Here's a method using CSS's box-shadow, which is compatible in Firefox 3.5+, Safari 3+, Chrome, Opera 10.5+ and IE9+.

http://jsbin.com/usabe4

Multiple box-shadows are being used to get closer to the desired effect than a single box-shadow is capable 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;
}

Did you try using box shadow in css 3:

box-shadow:5px 5px 0 #CCCCCC

For more details check: http://css-class.com/test/css/shadows/box-shadow-blur-offset-light.htm

Put two div's on top of each other (use z-index) and move the lower one two pixels down/right.

Is a CSS3 box-shadow close enough?

http://jsfiddle.net/4kS4F/

.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's supported in many browsers: http://caniuse.com/#search=box-shadow

The notable exceptions are IE 7 and 8. If you need it to work there, you could use CSS3 PIE to provide the box-shadow.

If you need only a white background (or any fixed background color) you can make the box an image with the colored part being transparent and the edges being your background color. Then you set that as the background image, while the background color can control the face color of the box.