Question

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!

Answer 1

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;
}