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

On Aug 28, 2009, at 8:45 AM, David Perrell wrote:

> 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.

That looks like a bug.

> I think an *inside* keyword is more descriptive of what's wanted,  
> and the shadow should completely hide the background around its  
> outside edge.

I agree that "inside" or "inner" would be a better keyword than  
"inset" for describing this effect (IMO). In PhotoShop, the effect is  
called "inner shadow".

> (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.

That is not necessarily what you always want, but at least you have  
options (gradient, or what is more or less a hack of inner shadow).

> (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,

That's an interesting idea. I don't recall it being discussed before.

> and vertical radii percentages would have to refer to the box  
> height, not the (completely unintuitive) width.

The way it is now allows you to have radii that do not change when,  
say, more text is added to a box, which is more often what authors  
will need (especially when vertical and horizontal radii are supposed  
to be the same). Width is more often unchanging in a layout than  
height is.

> (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.

?

Received on Friday, 28 August 2009 16:56:18 UTC