Shadow of Apple's Environment-Sheets - in CSS3?

Is it possible to create shadows like the shadow of Apple's environment-information sheets with CSS3?

开发者_开发百科_{(source: apple.com)}

The solution doesn't have to be cross-browser compatible.

Check out the demo on this site:

http://lab.galengidman.com/css3stickynote/

They do something really similar in pure CSS with a bunch of :before and :after voodoo.

Here is the particular code they use for the shadow effects:

#stickynote:before {
    content:'';
    display:block;
    width:90%;
    height:20%;
    position:absolute;
    left:10px;
    bottom:3px;
    background-color:rgba(0,0,0,.5);
    -o-transform:rotate(-3deg);
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    box-shadow:0 0 10px #000;
    -webkit-box-shadow:0 0 10px #000;
    -moz-box-shadow:0 0 10px #000;
    opacity:1;
    z-index:-1;
}

#stickynote:after {
    content:'';
    display:block;
    width:90%;
    height:20%;
    position:absolute;
    right:10px;
    bottom:3px;
    background-color:rgba(0,0,0,.5);
    -o-transform:rotate(3deg);
    -webkit-transform:rotate(3deg);
    -moz-transform:rotate(3deg);
    box-shadow:0 0 10px #000;
    -webkit-box-shadow:0 0 10px #000;
    -moz-box-shadow:0 0 10px #000;
    opacity:1;
    z-index:-1;
}

Yes. See this blog post and the demo page for how it's done