Paul Irish showed me this implementation of CSS3 drop-shadows. The demo only works for webkit based browsers (though it will work on Firefox if the appropriate vendor-prefixes are added to the stylesheet).

I first noticed this kind of drop-shadow on Mike Matas’s old website. Looking at the CSS for the CSS3 implementation of the drop-shadow (uses box-shadows to avoid the use of an image), there were a number of things that I found missing:

1. The article is absolutely positioned. It will not work in Firefox if it is not so (the simple fix is to add display: block; to the style of the article element).
2. The method requires a block element within article to render correctly. The CSS for the block element has a lot of styles that I think are unnecessary and complicated.
3. The stylesheet was longer and more complicated than necessary.

As an attempt to try a simpler version of it, I came up with this implementation of CSS3 Drop-shadows. This is what I did:

1. Add a wrapper around the container that needs shadows. Position it relatively. Position the element that needs the drop shadows relatively.

2. Absolute position the pseudo-elements like the demonstration above, except position them behind the main content with z-index: -1, like so:

   article:before, article:after {
     -webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
     -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
     box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
     -webkit-transform: rotate(-3deg);
     -moz-transform: rotate(-3deg);
     -o-transform: rotate(-3deg);
     position: absolute;
     left: 10px;
     bottom: 15px;
     z-index: -1;
     width: 50%;
     max-width: 300px;
     height: 20%;
     content: "";
   }
   

   Thanks simurai for better box-shadow values, Nicolas Gallagher for fluid-layout fixes and further refinement, and seutje for suggesting the removal of background color on pseudo-elements!

3. Fin. This is 44 lines of code as compared to 84 lines of code in the original demo and works on all the latest versions of Opera, Chrome, Safari and Firefox. But, Opera’s, and Firefox’s implementation of transforms are not as good as Webkit’s.

It is interesting to attempt it for fun, but this is definitely not ready for production use!

Nicolas Gallagher’s explanation of his fixes is a good read.