W3C home > Mailing lists > Public > www-style@w3.org > October 2013

Re: [filter-effects] filter different components of an element

From: Alan Gresley <alan@css-class.com>
Date: Fri, 11 Oct 2013 23:43:43 +1100
Message-ID: <5257F27F.1040805@css-class.com>
To: "Kang-Hao (Kenny) Lu" <kanghaol@oupeng.com>
CC: Brad Kemper <brad.kemper@gmail.com>, Lea Verou <lea@verou.me>, Dirk Schulze <dschulze@adobe.com>, WWW Style <www-style@w3.org>, 张 金龙 <jinlongz@oupeng.com>
On 11/10/2013 9:48 PM, Kang-Hao (Kenny) Lu wrote:
> (2013/09/08 0:45), Brad Kemper wrote:
>> The use case is the expressive artistic power you put in the hands of
>> designers, to create a much wider variety of adaptable, animatable
>> designs that aren't possible today. I've been wanting this power for
>> drop shadows since I proposed it back in 2009:
>> http://www.bradclicks.com/cssplay/drop-shadow/Drop-Shadow.html
>> Note the inclusion of border-image as the border part, too. We were
>> told at the time that SVG
>> parameters combined with filters would solve this soon, and I've been
>> waiting patiently ever since.
>> It would be equally powerful and welcome to be able to do that sort
>> of dividing up/layering the effect with opacity, too.
> Right. you need to target 'background' or you can't achieve what all can
> be done with the long-requested 'background-opacity'.
> The use case is for cases when you can't get to know all the images. For
> example, to turn the first picture in [1] to the second picture, you
> should be able to do:
>    * {
>      color: blue;
>      background-opacity: 0.3;
>    }
>   :root {
>      background-color: black;
>      background-opacity: 1;
>    }
> or something like this, for all pages, without knowing the page CSS.
> Perhaps UC's heuristics requires knowing the page CSS to apply the
> "night mode" to, so I can't be sure that this is a valid use case.
> Previous proponents of 'background-opacity' might know better?
> Cheers,
> Kenny

Why does that have to be done. The decision made in 2008 by the CSS WG 
to not allow shadows to be seen through transparent background (where 
shadows are always masked) is why the second picture does not work. It 
was Issue 32 [1] and here is the CSS WG log [2]. I rejected the 
resolution and cited Brad's early example [3]. The thread mentioned 
about inner and outer box shadows and painting order. The issue can be 
resolved by allowing a keyword in box-shadow like mask (where shadows 
are always masked) and cast (where shadows are seen through transparent 
backgrounds). These keywords were mentioned by myself in this message 
from 2011 [4].

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

The effect itself can be achieved by using the shadow of the previous 
element [5].


1. http://www.w3.org/Style/CSS/Tracker/issues/32
2. http://lists.w3.org/Archives/Public/www-style/2008May/0149.html
3. http://krijnhoetmer.nl/irc-logs/css/20080512#l-619
4. http://lists.w3.org/Archives/Public/www-style/2011Jan/0671.html
5. http://css-class.com/test/css/shadows/box-shadow-borders.htm

Alan Gresley
Received on Friday, 11 October 2013 12:44:16 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:51:03 UTC