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.

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);
   	position: absolute; 
   	bottom: 15px; 
   	z-index: -1; 
   	width: 40%; 
   	height: 20%; 
   	content: ""; 
   	background: rgba(0, 0, 0, 0.7); 
   }
   

   Thanks simurai for better box-shadow values!

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!

Update: I have noticed that it sorta breaks on very wide boxes, I have no obvious solution yet, but I have updated the background for article:before and article:after to mitigate that.