demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Golden Gate Bridge in fog

Simple CSS Masks: Creating Image Vignettes

css / masks

Estimated reading time: 2 minutes, 25 seconds

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 . As background images cannot have alt and 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); }
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.