Paul Irish (why nobody else sends me such awesome stuff beats me), showed me yet another CSS3/HTML5 website.

What is interesting is, the site author uses 4 empty divs to create the vignetting effect on the four corners of the viewport. I thought it would be a good use of box-shadow property to recreate the same effect, minus the 3 extra divs (I am not the first to think of it).

The caveat is, the CSS3 box-shadow property slows down webkit browsers considerably. So, until this bug is resolved this demo will only work on non-webkit browsers like Opera 10.5x, Firefox 3.5+ (IE 9 Platform Preview claims box-shadow support, but this demo does not render box-shadows there).

You could use the same technique to add vignetting to images. Here is how:

1. In your HTML document, add a wrapper element to the image, I have this:

   <p class="vignette"><img src="image.jpg"></p>

2. In your CSS file, add this:

   p.vignette {
     position: relative;
   }
   p.vignette img {
    display: block;
   }
   p.vignette:after {
    -moz-box-shadow: inset 0 0 10em #666;  
    -webkit-box-shadow: inset 0 0 10em #666;   
    box-shadow: inset 0 0 10em #666;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    content: "";
   }

   The content: "" is essential to make sure the pseudo-element is generated. z-index positions the pseudo-element above the image.

3. Die Ende!

Yes, I do wish webkit would hurry up and fix those horrible box-shadow bugs. Till then, you can indulge with me in this fantasy and view the demo :)