How to make a vignette effect in HTML?
I'm looking for a good solution on how to make a vignette effect for a website. The corners should be darker than the background color of the page like a radial gradient.
So far I tried different approaches:
- 4 DIVs set to position:absolute, top/bottom:0px,left/right:0px with one image in each of them (images block links. Bad idea in general?)
- Same as above but with fixed heights/widths for the divs and an background image instead of an image (still blocking links?!)
- CSS3 multiple backgrounds. Two on the body for top left/right and an extra div on the bottom with height:300;margin-top:-300px to always be displayed on the bottom (bad browser support)
- CSS3 radial gradient on body (as soon as you scroll you loose the background. An extra div could fix this. Also bad browser support again)
About browser support: The solution must work in the newest version of firefox, chrome, IE and if possible opera and safari (ordered by importance). That's the absolute minimum. But it should really work in older browsers too. Firefox 3.6 and IE 8 or even 7 if possible. I don't know much about chromes version history, but it seems that chrome users are almost all up to date, so it's no big problem to drop support for chrome 15 and lower?! Are there even any significant changes that would make something work in chrome 17, but not for example 15?
The CSS3 radial gradient is in my opinion the best looking solution, but I'm afraid that a lot of users wouldn't support it, because of their old browsers. And with the 4 DIV solution I have problems with links that can't be clicked, because of the image blocking it. I tried messing around with the z-index, but that doesn't work. I gave the DIVs z-index:1 and the #container (where all content is placed) an z-index of 10. Shouldn't that work? Does z-index even influence links?
So what do you guys think, would be a good solution? I clearly need some help here. Thanks!
Answer
You could use an inner box-shadow
box-shadow: inset 0 0 100px #000;
demo: http://jsfiddle.net/ACPUP/
But it doesn't work in IE7/8. Older versions of Firefox, Chrome, Safari or Opera might need their prefix: -webkit-box-shadow, -moz-box-shadow or -o-box-shadow.
You can also stack these shadows for a more dramatic effect, but I don't know if older versions of browsers support that.
box-shadow: inset 0 0 120px #000, inset 0 0 80px #000, inset 0 0 40px #000;