HTML / CSS: How to make a vignette effect? 4 images? CSS3 graphics?

Question

I am looking for a good solution on how to make a vignette effect for a website. Corners should be darker than the background color of the page, like a radial gradient.

So far I have tried different approaches:

• 4 DIVs set to: absolute, top / bottom: 0px, left / right: 0px with one image in each of them (links to image blocks) Bad idea at all?)
• Same as above, but with fixed heights / widths for div and background image instead of image (still blocking links ?!)
• Numerous CSS3 backgrounds. Two on the back for the upper left / right and an additional div at the bottom with a height: 300; margin-top: -300px to always display at the bottom (poor browser support).
• CSS3 radial gradient on the body (as soon as you scroll through the text, you will lose the background. An additional div can fix this. Also poor browser support again)

About browser support: The solution should work in the latest version of firefox, chrome, IE and, if possible, in opera and safari (in importance). This is an absolute minimum. But it should really work in older browsers. Firefox 3.6 and IE 8 or even 7, if possible. I don’t know much about the history of chrome versions, but it seems that almost all chrome users have been updated, so don’t give up support for chrome 15 and lower ?! Are there even any significant changes that could make something work in chrome 17, but not for example 15?

CSS3 radial gradient is, in my opinion, the best solution, but I'm afraid that many users will not support it, because of their old browsers. And with the 4 DIV solution, I have problems with links that cannot be clicked due to the image blocking it. I tried messing around with z-index, but this does not work. I gave the z-index DIVs: 1 and #container (where all the content is located) the z-index 10. Does this work? Does the z-index affect links?

So what do you guys think would be a good solution? I clearly need help here. Thanks!

Answer 1

You can use the inner shadow box

box-shadow: inset 0 0 100px #000; 

demo: http://jsfiddle.net/ACPUP/

But this does not work in IE7 / 8. Older versions of Firefox, Chrome, Safari or Opera may 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 browsers support them.

 box-shadow: inset 0 0 120px #000, inset 0 0 80px #000, inset 0 0 40px #000; 

Answer 2

I used this technique described earlier in this blog and it works very well. However, not sure about the support of older browsers.

Answer 3

depending on what you want, something like this might work;

 <style> height: 100%; width: 100%; /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI++); background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 63%, rgba(0,0,0,0.65) 99%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0)), color-stop(63%,rgba(0,0,0,0)), color-stop(99%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 63%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 63%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 63%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* IE10+ */ background: radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 63%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */ } </style> svg + xml; base64, PD94bWwgdmVyc2lvbj0iMS4wIiA / Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI ++); <style> height: 100%; width: 100%; /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI++); background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 63%, rgba(0,0,0,0.65) 99%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0)), color-stop(63%,rgba(0,0,0,0)), color-stop(99%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 63%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 63%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 63%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* IE10+ */ background: radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 63%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */ } </style> 

Works in my browser, should work on all browsers. This is messy, of course, but it allows you to set it in HTML, then you can have a body, for example, with the color or image that you want.

See it in action. http://jsfiddle.net/joshuamartin/taN2Z/4/

http://www.colorzilla.com/gradient-editor/

Answer 4

Using CSS!

A slight variation on Willem's answer, as recommended by JohnK, who knocked down his hat Chris Coyier :

 box-shadow: inset 0 0 85px rgba(0, 0, 0, 0.4); 

JSFiddle: http://jsfiddle.net/charlesgoodwin/wKQ2y/

It works very well!