Divya Manian

RSS Feed Youtube Channel Github

Vignettes with CSS3 Box Shadows

vignette.png

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 :)

Comments