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:
In your HTML document, add a wrapper element to the image, I have this:
<p class="vignette"><img src="image.jpg"></p>
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.- 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 :)