RE: [CSS3] border-radius and box-shadow for vignetting

Test use of the -moz- versions of these properties to produce vignette effect in Firefox 3.5:

http://hpaa.com/firefox/vignette.htm

Observations:

(1) On my display, the 'inset' argument to box-shadow really is producing an *inset* of about 1/2 pixel, exposing the background around the outside edge. I think an *inside* keyword is more descriptive of what's wanted, and the shadow should completely hide the background around its outside edge.

(2) The use of border-radius and box-shadow for vignetting has advantages over radial gradients, the reason being the vignette width is constant around the shadow edge. (The gradient width is wider in the direction of its longer axis.)

(3) It would be nice to have this effect on dynamically-sized elements, but the current spec won't allow this. Box-shadow would have to include percentage radii, and vertical radii percentages would have to refer to the box height, not the (completely unintuitive) width. 

(4) According to https://developer.mozilla.org/en/CSS/-moz-border-radius-topleft, two different <border-radius> arguments should produce an elliptical quarter-radius. Not so with percentages.

David Perrell

Received on Friday, 28 August 2009 15:46:52 UTC