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

On May 9, 2008, at 3:02 PM, Eli Morris-Heft wrote:

> And it makes a much easier way to turn a shadow into a glow (text- 
> shadow: 0px 0px 0px 4px blue), and add a bit of perspective. I like  
> it. I hope the implementors do too.... I propose that it goes after  
> the blur radius:
>
> box/text-shadow: none | [[<shadow-def> || <color>] [inner | outer]]  
> [, [<shadow-def> || <color>] [inner | outer]]*
>
> where <shadow-def> is: <length> <length> [<length> <length>?]?
>
> The lengths in <shadow-def> are, in order, the horizontal offset, the
> vertical offset, the blur radius, and the spread thickness. Any  
> length omitted
> in the box-shadow value is assumed to be 0. The blur radius may not  
> be negative. In the absence of an 'inner' or 'outer' keyword, UAs  
> should assume an 'outer' keyword. UAs may treat a body/text-shadow  
> value where all lengths given are 0 as equal to a value of 'none'.

That works for me. Let's take a vote.  ;)

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


Thus, the following would work:

1. box-shadow: 6px red;       /* a red glow with 6px radius */
2. box-shadow: 2px 2px 6px red;       /* now an outer shadow, offset  
down and to the right 2px */
3. box-shadow: 2px 2px 6px red inner;       /* now an inner shadow */

4. box-shadow: 6px 6px green;       /* a green, non-blurred shadow,  
offset down and to the right 6px */
5. box-shadow: 6px 6px 2px green;       /* now also blurred 2px */

6. box-shadow: 2px 2px 6px 1px red;       /* same as #1 above, but  
with a 1px spread */
7. box-shadow: 6px 6px 2px 1px green;       /* same as #5 above, but  
with a 1px spread */

8. box-shadow: 0 0 6px 3px green;       /* a green glow, with 6px blur  
and  3px spread */
9. box-shadow: 0 0 6px -3px green;       /* a green glow, with 6px  
blur and  3px "choke" */
10. box-shadow: 0 0 6px 3px green inner;       /* a green inner glow,  
with 6px blur and 3px spread */

(a "choke" is a printer term that is the opposite of "spread', which  
was also originally a printer term).

In other words;
only 1 distance = blur radius (makes shadow into glow),
2 distances = horizontal and vertical offsets,
3 distances = offsets and blur radius,
4 distances = offsets, blur radius, and spread.

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")

And of course, the same thing for text-shadow.

Received on Saturday, 10 May 2008 04:51:53 UTC