Leichter Schatten mit CSS3

<div class="blueBox"></div>

.blueBox {
width: 400px;
height: 300px;
margin: auto;
position: relative;
background-color: #1E8CBE;
}

.blueBox:before{
-webkit-transform: skew(0deg, 4deg);
box-shadow: 7px 7px 7px #000;
-moz-box-shadow: 7px 7px 7px #000;
-webkit-box-shadow: 7px 7px 7px #000;
position: absolute;
background-color: #000;
bottom: 2px;
right: 12px;
content: '';
z-index: -1;
width: 280px;
height: 25px;
}

1. Mit der Klasse .blueBox erstellen wir eine klassische Box mit der Position relative.  Die Position ist für unseren nächsten Schritt besonders wichtig.
2. Mit dem Selektor :before erstellen wir eine weitere Box. Dieser hat die Besonderheit sich mit der Hilfe von box-shadow und –webkit-transform zu schattieren und zu transformieren.  Damit unsere Haupt-Box, also die Klasse blueBox, unseren Selektor (oder zumindest nur ein Teil davon) als Schatten verwenden kann, setzen wir hierfür die z-index: -1 und ändern dabei die Position. Somit wird der Selektor hinter unserer Klasse platziert und das was zu sehen bleibt, ist lediglich ein leichter Schatten für unsere blueBox.

Demo