Re: [css3-background] box-shadow spread radius and rounded corners

On Sun, May 16, 2010 at 7:20 PM, Brad Kemper <brad.kemper@gmail.com> wrote:
>
> On May 16, 2010, at 3:28 AM, Brendan Kenny wrote:
>
>> Spread is instead an entirely graphic effect, originally defined by
>> the needs of print, but with definite use cases today. I think the key
>> is in these cases, because outside of simulating shadows, it is
>> primarily used to add an offset shape (or path), to add a second
>> border (which was mentioned as one natural outcome from where the spec
>> is going right now), or to add a pseudo inner or outer glow.
>>
>> Spread is used to make bigger shadows _or_ it is used to make
>> something not very shadow-like at all; the rasterized results can look
>> similar (hence the historical use of spread to create drop shadows),
>> but the motivations are totally different.
>
> It is used to offset the edge of the shadow, without increasing the blurriness
> of the shadow, and without having the _ change_ to width/height based on
> the proportions of the element (it is instead an even increase all the way
> around). While the terms "spread" and "choke" originated with the practice
> of filling gaps between printed colors, the usefulness of the effect for shadows
> is well proven. This usefulness is not based on any need to re-create nature,
> it is based on the need to take artistic license in order to create a desired
> visual effect.
>
> It is especially useful for text, if we can ever bring it over to text-shadow too,
> because it allows the shadow to be seen on all sides of the character (so
> that a white letter against a dark shadow is visible, for instance), without
> over-blurring the letter shape. But its usefulness carried over to rectangular
> shapes too. When I spread the shape of a rectangle, it is not just because
> I want a bigger shadow; it is because I want the the edge moved outward,
> usually to allow some of the shadow to show on the other side of the object
> too without making it blurrier. It is an artistic need, and block shadow is an
> artistic effect.

Right, sorry, I might not have been clear enough that I definitely
think that spread is important, that it is well established, and that
it should be included as a background property.

What I maybe should have said, and this might have made my email
shorter, is that scaling a shadow and spreading a shadow, while not
orthogonal effects, are definitely independent except at the point
[spread=0, scaling=1]. Any other value for one effect can not be
matched by the other except in a "resembles" sense (and if it's a
large value with no blur, they won't even resemble each other).

Since that is the case, I think it makes sense for box-shadow to be
defined in a way that resembles the physical effect that it is
mimicking (as most of the language for the property already does, e.g.
an inner shadow effect is "one that shadows the canvas onto the box,
as if the box were cut out of the canvas and shifted behind it"). This
also simplifies box-shadow's definition, because it would no longer be
a mix of the more intuitive "cast a shadow" definition and the largely
pixel-space-based spread algorithm. It also allows for larger or
smaller shadows that retain their element's original shape.

*However,* spread is such a fundamental effect in graphic design that
it should have its own property (I suggested "box-spread," but
whatever will do). This also simplifies things, because there's no
reason to worry about authors using rogue box shadows to make second
borders or something, because the spread property is there for them.

Your argument above, about the need for the purely artistic effect of
spread, is a great argument for a distinct spread property. In that
case it is an artistic effect, and doesn't really have much to do with
shadows. There's no reason to limit the expressiveness of a drop
shadow by using a totally artificial algorithm to change size, nor is
there a reason to take what's really a spread with a required offset
and call it "box-shadow." Both are great effects, let's have both.

box-spread: inset? && [<spread-radius> <blur-radius>? && <color>? ]

?

Received on Monday, 17 May 2010 04:40:27 UTC