Re: Shadow knockout

Am 26.01.2011 23:22, schrieb Eric A. Meyer:
> My guess is he's asking "if I define a semi-transparent or transparent
> background for an element with a drop shadow, why can't I see the part
> of the shadow that's 'behind' the element through the background, and is
> there a way to make it appear there?".
> 'box-shadow' as written explicitly forbids any part of an outset shadow
> from appearing inside the border-box (the part of the shadow that would
> be "behind the element"), though it doesn't explain why.

This is exactly what I meant. Okay, here's the thing i was working on: I 
wanted a 0 0 5px rgba(0, 0, 0, .2) to appear behind the 
bullet_toggle_plus.png icon of the 'Silk' icon set on :hover.

See http://www.famfamfam.com/lab/icons/silk/previews/index_abc.png

This PNG is a 16 x 16 Pixel image with a small opaque opaque icon in the 
center and a bunch of transparent pixels around it. So if I apply a css 
box-shadow, it's going to look really stupid because the shadow appears 
only outside the 16 x 16 box.

Of course, in this case, I could just crop the image to the size of the 
actual icon. But then I've got the anti aliased rounded corners of the 
icon and the semi transparency and everything going on and it looks 
weird again.

An easy way to see the effect is to draw some shape im Photoshop, set 
its Fill opacity to 50%, give it a drop shadow and uncheck the 'Layer 
Knocks Out Drop Shadow' checkbox at the bottom of the Drop Shadow 
options dialog. I want to see this checkbox in CSS.

(In my experience, you don't want that bahavior in most cases. But 
sometimes, you really need the option to turn it on.)

Received on Thursday, 27 January 2011 08:41:38 UTC