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:
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!
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;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With