Vignetting is the technique of fading of an image at its edges, often seen in wedding photographs, or in shots taken by a toy camera. In essence, it creates an inner frame for an image.

We can implement a similar technique to that used by the previous example of creating simple image masks; by maximizing the border-radius, you can create elliptical cut-out effects, as shown above.

Fading the inner edge of the image is a little trickier: we can’t use inner shadow on an img tag, as the shadow will be presented behind the image, and be completely obscured. Instead, we’ll set the image as the background for a paragraph, for reasons that will become apparent later. Right now, the paragraph is empty:

<p id="vignette"></p>

And the CSS, with the width and height of the image we are going to put in the background of the paragraph. Right now, I’m keeping to the minimum CSS needed, with no concessions for older browsers:

p#vignette { 
	width: 500px; height: 188px;
	background-image: url(golden-gate-bridge.jpg); 
	border-radius: 50%;
	box-shadow: inset 0 0 60px rgba(0, 0, 0, 1);
	overflow: hidden;
}

That works very well, but lacks accessibility. As background images cannot have alt or title applied, it behooves us to fill the paragraph with an explanation of what the image represents:

<p id="vignette">Golden Gate Bridge in fog</p>

And added to our CSS:

p#vignette { 
	width: 500px; height: 188px;
	background-image: url(golden-gate-bridge.jpg);
	border-radius: 50%;
	box-shadow: inset 0 0 60px rgba(0, 0, 0, 1);
	overflow: hidden;
}

That also works, but leaves the text cut off by the edge of the (invisible) border and overflow: hidden. It would be much nicer to have the text in the centre of our vignette, using text-align, and an old trick to vertically centre a single line of text in a box of known height, by using that same height as the value of line-height:

p#vignette {
	text-align: centre;
	line-height: 180px;
}

If you wanted to keep the text as an ersatz image caption, you could increase line-height to place it lower in the vignette; alternatively, you could make the text disappear entirely using one of several possible techniques. The text should still be read by screen readers, to retain accessibility:

p#vignette {
	color: rgba(0, 0, 0, 0);
}

Villa on Lake Como, Italy

Sadly, changing the inner shadow color to white (assuming that the vignette was on a page with a white background) does not effectively “blur” the outer edge of the image as might be expected. That will have to wait for more advanced techniques, discussed presently.

By using different turn radius values for each corner of the border, you can make images fit into cut-out “windows”, while (optionally) adding the same technique: think of the shapes of the stanzas of Raphael’s frescoes in the Papal apartments.

p#lake-como {
	width: 450px; height: 300px;
	background-image: url('lake-como-villa.jpg');
	border-radius: 50% 50% 10px 10px;
	box-shadow: inset 0 0 100px rgba(0, 0, 0, 1);
}

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.