Re: [css3-background] proposed box-shadow syntax

On May 9, 2008, at 10:25 PM, Eli Morris-Heft wrote:

>
> Brad Kemper wrote:
>> Actually, if I understand the spec language correctly (which it is  
>> very possible that I do not), I think you might be missing some  
>> double bars, and a question mark, so that the color and key words  
>> are optional and their order unimportant. Would the following be  
>> more desirable?
>> box/text-shadow: none | [[<shadow-size> || <color>?] || [inner |  
>> outer]?] [, [<shadow-def> || <color>] [inner | outer]]*
>> where <shadow-size> is: [[<length> <length>]? || <length>?] <length>?
>
> (I assume you missed updating the part that comes after the comma,  
> so you meant:
> box/text-shadow: none | [[<shadow-size> || <color>?] || [inner |  
> outer]?] [, [[<shadow-size> || <color>?] || [inner | outer]?]]* )

Ah yes, you are correct. I was concentrating on the single shadow.


> This so-called "choke" is a logical idea. That is, if we're going to  
> specify for spread, we may as well specify for choke, because it is  
> spread with a negative value.

Yes, and I was thinking about something Alan said about in some  
lighting conditions the shadow could be smaller than the box, and a  
choke (negative spread) would allow that.

> All of the examples you give are legal under your rephrasing, but so  
> is this:
>
> box-shadow: ;
>
> And, confusingly, this:
>
> box-shadow: ,,,,,,,;
>
> For that matter, the empty string is a legal <shadow-size> as well.  
> (Studying regexes has given me an eye for when the empty string  
> matches a pattern.)

Good eye. I think I could probably re-write that with a plus sign and  
some extra brackets to avoid that.

> While I understand the desire to collapse this into a shorthand  
> property (see more on this below), I think it's jarring to have the  
> disconnect between what the first <length> represents when one  
> <length> is given and what it represents when two are. (That is,  
> blur radius changes into horizontal offset.) If the final syntax  
> allows for a one-length variant (which I'm not sure I'm in favor  
> of), I'd like it to be used for both the vertical and the horizontal  
> offset, on analogy to padding, margin, border, etc.

That seems a reasonable alternative. I was thinking about how in  
PhotoShop and in the current spec, how a glow can be created by having  
a shadow with zero offsets and blur radius, so that one (blur radius)  
made the most sense for me for receiving a single value.

> Blur radius also shouldn't make the shadow any bigger than it is.  
> Under the current draft of the spec (not any of our revisions to it)  
> the following two are roughly the same size (but the second one is  
> sharper):
>
> box-shadow: 3px 2px 2px blue;
> box-shadow: 4px 1px;

I actually like the way PhotoShop works, compared to how it worked in  
your screenshot [1] (from your later e-mail to the one I am responding  
to).  I think the spec is more like a PhotoShop shadow blur.

PhotoShop does not require a spread or offset to have a larger and  
larger blur. It is essentially applying a Gaussian blur to a copy of  
the original shape, underneath it.  The more it blurs, the more the  
edge mixes with the color of whatever is behind the shadow. So the  
shadow does get wider, but also lighter, as it gets fuzzier. I will  
post my own screenshots later today.

>> I also propose that this be considered shorthand, and that we also  
>> have the individual properties as follows;
>> box-shadow-x
>> box-shadow-y
>> box-shadow-blur
>> box-shadow-color
>> box-shadow-spread
>> box-shadow-cast (e.g. "inner" or "outer")
>
> My main objection to this is this will become difficult to  
> coordinate when you specify multiple shadows. I can't think of a  
> happy way around that. Suggestions?

My suggestion would be something like this:

box-shadow-color: red, blue, yellow, green;
box-shadow-blur: 2px, 3px, 1em, 2mm;

I think it is the nature of the multiple shadows that you will not be  
able to, for instance, specify the color of just the third shadow. Or  
is it? Could it be something like the following?

box-shadow-color: , , #000;


>
>
> Eli Morris-Heft
> dai@doublefishstudios.com

[1] http://www.doublefishstudios.com/~dai/boxes.png

Received on Saturday, 10 May 2008 17:34:11 UTC