- From: Brad Kemper <brad.kemper@gmail.com>
- Date: Mon, 14 Sep 2009 22:55:50 -0700
- To: Andrew Fedoniouk <news@terrainformatica.com>
- Cc: www-style list <www-style@w3.org>
Received on Tuesday, 15 September 2009 05:56:44 UTC
On Sep 14, 2009, at 7:59 PM, Andrew Fedoniouk wrote: >> This might help show what is going on a little more clearly: >> http://www.bradclicks.com/cssplay/concentric.html > > Brad, am I correct that element with background-color:transparent; > placed on another one with background-color: rgba(214,0,0,0.5); will > produce the following: http://terrainformatica.com/w3/inner-shadow.png > ? No, the shadow goes under the transparent areas, it does not use the transparency of one layer to cut out another. It does not alter the transparency of the original images or fills. It does cast into the opaque areas instead of the transparent areas when you use the 'inset' keyword. So, if you had a solid white rounded-corner rectangle background-image with a background-color: rgba(214,0,0,0.5) on the same element, and you flattened them into using a single transparency map for the shadow to cast through/into, then you could have something like that with 'drop-shadow: inset apply-to(background-color+background-image) <x- offset><y-offset><blur-radius><shadow-color>'. The inner shadow created with 'inset' casts the shadow into the areas of opacity (more opacity = more shadow, so the white box in the middle would need to start out as rgba(255,255,255,1).
Received on Tuesday, 15 September 2009 05:56:44 UTC