Re: shadow through transparent background (was Re: Shadow knockout)

On 28/01/2011 2:09 AM, Eric A. Meyer wrote:
> At 5:06 PM +1100 1/27/11, Alan Gresley wrote:
>
>> On 27/01/2011 3:05 PM, Eric A. Meyer wrote:
>>
>>> I don't doubt it. I do have to wonder why an outset shadow is clipped by
>>> the border box, though. Because it is a bit weird to shadow a box, then
>>> decide to make the background transparent and not see the rest of the
>>> shadow. Is that an ease-of-implementation thing?
>>
>> No, some members of the CSS WG in there wisdom decided that a
>> box-shadow seen through a transparent background was wrong. I argued
>> against it back in 2008 [1]. I suggested it again a few weeks ago [2].
>> It would work like this (the default would be mask).
>>
>> box-shadow: 10px 10px 10px 0 <color> cast;
>
> Very nice! It certainly satisfies both drop-shadow use cases without
> adding much complexity to the syntax. Whether it adds complexity to
> implementations is another issue entirely, of course, though I'd assume
> it's roughly as easy to draw a drop shadow entire as it is to draw just
> the parts that aren't masked.


Agree. I do believe that implementations first draw the shadow and 
secondly mask the shadow within the border-box. What I'm suggesting is 
to drop the second action with cast.


> One question: is 'cast' only honored when a shadow is outset, or is the
> expected behavior that when 'cast' is used in conjunction with 'inset',
> the inset shadow will spread outside the border-box? If so, what would
> it look like?


You would not use box-shadow cast with inset since box-shadow inset is 
painted above the background-image painting layer but below the border 
painting layer. Also box-shadow should be clipped to the padding box. 
This in affect means that only one keyword is allowed.

All that box-shadow cast does is reveals the shadow through a 
transparent background, either being background-color or background-image.

The way I see it is like this.

1. The default (and currently implemented) behavior with or without keyword.

    box-shadow: 10px 10px 10px 0 <color> mask;


2. Cast which allow box-shadow to been seen through a transparent 
background.

    box-shadow: 10px 10px 10px 0 <color> cast;


3. The keyword inset which draw box-shadow within the padding box.

    box-shadow: 10px 10px 10px 0 <color> inset;


Now regarding inwards spread, I now see that it has been always possible 
(miss that ??).


   | The fourth length is a spread distance. Positive values cause
   | the shadow shape to expand in all directions by the specified
   | radius. Negative values cause the shadow shape to contract.
   | See below. Note that for inner shadows, expanding the shadow
   | (creating more shadow area) means contracting the shadow's
   | perimeter shape.


>> Not if it's done carefully. Also a box-shadow does not have to be
>> dark. If you offset the box-shadow enough, you can see how the full
>> box-shadow is rendered.
>
> Oh, certainly. Heck, you can make a page thoroughly unreadable with
> plain old CSS1. I was just speculating about possible motivations for
> specifying that exact behavior.
> On a side note, I have to admit it amuses me that we're wrangling over
> ways to create a visual effect that's *SO* 1998.


Forget 1998, what I suggesting and few people have understood is the 
visual affect of this 'cast' shadow and how it looks with negative 
spread. It's appearance is like adding a shadow to the border itself.

<http://css-class.com/test/css/shadows/box-shadow-borders.htm>


Unlike inset shadow, the blur is seen more away from the padding box 
over the width of the border. Example 19d or 20d has to shadows with 
negative spread. All examples in columns c and d have the affect of 
shadows being seen through transparent backgrounds. Example 21 and 22 is 
much like clipping a background-color to some rect() but again they are 
just shadows.

Since transparency is involved in this demo, I have provided some JS to 
change the background color of the page.


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo

Received on Friday, 28 January 2011 16:12:43 UTC