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

On Mon, May 17, 2010 at 9:41 AM, Brad Kemper <brad.kemper@gmail.com> wrote:
>
> On May 16, 2010, at 9:34 PM, Brendan Kenny wrote:
>
>> 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>? ]
>
> But I want to spread the shadow without spreading the box. If the element's box itself is being spread too, it ruins the whole point of spreading the shadow.
>
> Also, this is the time for resolving issues with the draft, not for adding all-new features

Good point, I should have thought that through before suggesting a new
spread property.

> such as shadow scaling (which, BTW, in my view would have very limited appeal). I would not describe shadow spread as "totally artificial" any more than any other part of an effect, such as having "dotted" as part of border-style. It is a common part of specifying shadow-like effects, which is considerably more important than whether or not it describes something accurately in nature.

"artificial" was not meant pejoratively, just in the sense that it is
an algorithm used to tweak the visual result of the effect and has
nothing to do with the geometry of shadows. (ahem)

Here is the way Firefox currently renders a "deep" inset shadow,
adapted from Example XXVIII with the following values
-moz-border-radius: 35px;
-moz-box-shadow: 10px 10px 1px 30px rgba(0, 0, 0, 0.4) inset;
background-color: orange;
border: 5px solid blue;
height: 144px;
width: 144px;

http://extremelysatisfactorytotalitarianism.com/w3style/deep_box_shadow.png

No one would mistake the image on the right for a deep, inset element;
the square corners throw the effect off. This is an unrealistic use
case for spread because of how it renders, but a situation in which a
scaled shadow could certainly be used. You can imagine (mostly because
this is exactly what I would like to do) using differently scaled
shadows on neighboring elements to add more interesting visual depth
to a page, or scaling and offsetting a box-shadow in tandem with
transitions and animations to represent a changing light direction or
a receding/approaching element. I think these cases are extremely
likely to come up based on the way animated transforms have been used
so far.

I disagree that the deeper inset shadow on the right is what authors
will expect in this case, and I think the reaction of most in this
thread to spread's effect on the shape of a shadow shouldn't be
ignored. Spreading was historically used to create simple drop shadows
in print, and this has carried over to e.g. Photoshop, but that's no
reason to limit the options of a drop shadow to the mechanics of
spread when defining shadows from scratch. Illustrator is actually a
good example of this; its drop shadow effects do not have a spread
option, and spread is only used on objects as a kind of extra stroke
in the context of preparing documents for actual printing.

You say that you think shadow scaling will have limited appeal. I
would argue the reverse, that spread will only ever be used with very
small values unless there is an extremely healthy amount of blur.
Otherwise, the results just don't look like shadows.

Received on Monday, 17 May 2010 23:21:17 UTC