W3C home > Mailing lists > Public > www-style@w3.org > August 2009

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

From: David Perrell <davidp@hpaa.com>
Date: Fri, 28 Aug 2009 08:45:38 -0700
To: <www-style@w3.org>
Message-ID: <HIEDLECHAFDEPLGKECDDEEDBANAB.davidp@hpaa.com>
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:20 GMT