Re: Drop-Shadow proposal

On Sep 12, 2009, at 9:47 PM, Andrew Fedoniouk wrote:

> Brad Kemper wrote:
>> On Sep 12, 2009, at 1:47 PM, Andrew Fedoniouk wrote:
>>> Brad Kemper wrote:
>>>> On Sep 9, 2009, at 12:57 PM, fantasai wrote:
>>>>> ACTION: Brad to come up with full shadow proposal (not  
>>>>> finalized, but to
>>>>>        see where we're going)
>>>> OK, and here it is:
>>>> http://www.bradclicks.com/cssplay/drop-shadow/Drop-Shadow.html
>>>
>>> Beautiful proposal :)
>> Thank you.
>>> But while reading it I've got a question about this image:
>>>
>>> http://www.bradclicks.com/cssplay/drop-shadow/inner-shadow_example2.png
>>>
>>> I see a [lighter] halo around "W3C" logo image. Question is: what  
>>> kind of shadow is that?
>> It's not really a halo, because it is only to the bottom right of  
>> the logo...
>> It gets a little tricky to try to explain the inner shadow through  
>> semi-opaque openings, but I'll try: Notice how the 100% opaque dots
>
>> around the edge are actually completely cut-out holes that let all  
>> the light in through them at an angle that is down and to the  
>> right? The same thing is happening with the 100% opaque logo. It is  
>> a completely cut-out hole, whereas the rest of the orange  
>> background is more like looking through translucent paper which  
>> casts a shadow too. The logo is cut completely out of that paper,  
>> so it lets light through at the same angle as the shadow.
>> I think the light from the dots looks even lighter because of the  
>> contrast, but it is actually the same color of orange as what you  
>> see near the logo.
>
>
> I am not sure I understand physics here. See:
> 1) For shadow purposes that logo is treated as if it is transparent  
> (punched) so it does not cast the shadow.
> 2) But at the same time it is rendered as if it is non-transparent.

With inner shadows, wherever there is solid color, it renders as  
though that color is on a surface below a transparent cut-out. Because  
the logo is solid and opaque, you see the unobscured color of it on  
that lower surface. Wherever there is transparency in the original  
image, you get the effect of a surface floating above the lower  
surface, casting a shadow on whatever colors were not transparent.

> Seems like contradictory for me.
>
> And yet for practical purposes different UA will probably choose  
> different non-Gaussian filters for producing such effects. I mean  
> that you as an artist cannot rely on quality of the shadow. So in  
> most cases you will end up drawing such complex effects in you  
> favorite image editor. I am yet silent about computational  
> complexity of producing such layers and rendering many of them with  
> alpha... And animation on top of this.

For the examples, I only created normal images with different areas of  
opacity, as one could display in a browser with PNG. Then, because no  
browser currently displays 'drop-shadow', I used the PhotoShop "inner  
shadow" layer effect to create what you see as the final result(s).

I don't believe it is any more computationally intensive to do the  
inner shadows that the outer (in PhotoShop it renders instantly as you  
drag around the layer. I realize that a browser is not allocating as  
much memory, etc. to image rendering as PhotoShop, but I don't think  
this should be too complex from a computational standpoint.

> Is such effect so appealing/popular?

The sample images I provided were good for comparing the different  
effects on the same images, but probably not how inner shadow would be  
used. For inner or outer drop shadows, it is necessary to deal with  
transparency in a rational consistent way. For inner shadows, it would  
more often be needed for images that have blurry-edged images, I  
believe (which is to say, edges that are transparent on the outer  
edge, and more opaque as you move inward).

> And yet yet about inner shadows versus just shadows ...
>
> Inner (inset) shadow is different from just shadow only on
> in borders area. Having things like border-image it is very easy
> to produce image that can be used as such inset shadow.

Inner or outer can be built into the image, but not animated, or  
dynamically changed without changing the image. The same goes for  
background images, solid background colors, foreground images, etc.

> Usefulness of inner shadows on text are a bit doubtful.
> So I just do not understand why inset shadows are so needed.

I see no reason to exclude text from the shadows, especially in order  
to get the fuller capabilities (inner shadows, spread, transparency of  
content over the shadows), or to combine with other parts of the  
element and/or child elements into a single shadow.

As with any special effect, some authorial restraint would be required  
in order to apply it tastefully. But we are not here to police  
tastefulness.

Received on Monday, 14 September 2009 15:49:53 UTC