Sickdesigner

Our latest posts have mostly been about design, so today we’re going full on code monkey with a cool CSS3 technique: Vignettes! The technique involves a few divs, a bit of simple CSS, and a whole lot of fun. So click the pic and read on.

Of course, there are those of you just looking for the quick fix so, without further ado, here’s the link to the demo page:

DEMO

So, what’s this puppy about?

For those of you who don’t know, a vignette effect is a discoloration on the edges of an image. This effect usually appears in photography and it can be either accidental or intentional. It can also be either light or dark, depending on the situation. Like this:

Good, now that that’s out of the way, let’s continue to the actual tutorial.

We’ll be dividing the vignette into four div elements as shown in the diagram above.

Using absolute positioning we’ll be telling the four divs to sit in their respective corners and using a combination of CSS Gradients and RGBA we’ll fade the discoloration towards the center.

One should be careful not to overdo it with the vignette. A black vignette on a white background will look really cheap, mostly due to universal browser dithering problems, so a subtle approach is key to a successful effect.

We’ll also set the height/width of the divs using percentages. This way we’ll get a proportional vignette according to the user’s screen size. The trick with this technique is using just the right amount of height/width. Too much, and the content will become unselectable on account of the divs having a high z-index value. Too little and the effect is barely noticeable. I did a few experiments and the widest range of usable heights/widths is somewhere around 12%-17%. In this tutorial I used 15% which seems to work fine for resolutions from 1024×768 up to 1920×1080.

The HTML

The HTML part is really, really straight forward – just four empty divs, in no particular order:

<div id="top"></div>
<div id="right"></div>
<div id="bottom"></div>
<div id="left"></div>

The CSS

Here where the magic really happens:

/* First we set the four elements of our vignette
to be on top no matter what and set their initial
width and height which we'll overwrite in the next declarations.
*/
#top, #bottom, #left, #right{
height: 100%;
position: absolute;
z-index: 999;
width: 100%; }


/* Overwriting the default 100% */
#top, #bottom{
height: 15%; }


#left, #right{
width: 15%; }


/* We set the gradient with CSS3 from a solid gray to
a 100% transparent color which should be the same as
the body background color, to have a nice, clean falloff.
And we're also setting the position of the vignette elements.
*/
#top{
background-image: -moz-linear-gradient(100% 100% 90deg, rgba(255, 255, 255, 0), #e1e1e1 );
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e1e1e1), to(rgba(255, 255, 255, 0)));
top: 0; }


#bottom{
background-image: -moz-linear-gradient(100% 100% 90deg, #e1e1e1, rgba(255, 255, 255, 0) );
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0)), to(#e1e1e1));
bottom: 0; }


#left{
background-image: -moz-linear-gradient(100% 100% 180deg, rgba(255, 255, 255, 0), #e1e1e1 );
background-image: -webkit-gradient(linear, left center, right center, from(#e1e1e1), to(rgba(255, 255, 255, 0)));
left: 0; }


#right{
background-image: -moz-linear-gradient(100% 100% 180deg, #e1e1e1, rgba(255, 255, 255, 0) );
background-image: -webkit-gradient(linear, right center, left center, from(#e1e1e1), to(rgba(255, 255, 255, 0)));
right: 0; }

The code may look a bit stuffy at first but it’s quite easy to maintain as only the hex values of the gradient and perhaps the height/width values need adjustment.

Browser compatibility

All in all I’d say it’s a pretty useful and usable technique, but if you must extend it’s compatibility to Opera and IE7 and above you could use fixed heights/widths and a repeating transparent PNG image. A lot less cool, but you get the point.

I hope you enjoyed this little technique and if you ever get the chance to use it somewhere, I’d appreciate dropping a line and showing off.

by Radu Chelariu