W3C home > Mailing lists > Public > www-style@w3.org > January 2011

Re: [css3] support for filters

From: Alan Gresley <alan@css-class.com>
Date: Thu, 06 Jan 2011 18:44:03 +1100
Message-ID: <4D2572C3.3090700@css-class.com>
To: Rik Cabanier <cabanier@adobe.com>
CC: Simon Fraser <smfr@me.com>, Cameron McCormack <cam@mcc.id.au>, Charles Pritchard <chuck@jumis.com>, "ed@opera.com" <ed@opera.com>, "www-style@w3.org" <www-style@w3.org>
On 6/01/2011 5:32 PM, Rik Cabanier wrote:
>> No, if the source order is altered (negative margins, etc), then
>> shadows appear over sibling elements. This list message [4] cover
>> this somewhat. The interplay of the shadow in this svg document,
>> http://css-class.com/test/svg/shadow-transparent-background.svg is
>> totally govern by the source order. If the rect with the salmon
>> background appears later in the source than the other rect
>> elements, then it would be painted higher and partially cover both
>> the transparent yellow box and the shadow.
> I think you misunderstood me. I said that the elements WITHIN the
> element that has a drop shadow applied should not interact with each
> other, much like text-shadow where glyphs shouldn't draw shadows over
> each other.

Are we talking about box-shadow [1] or is your drop shadow different? 
Currently box-shadows can be cast over sibling elements if the later 
element (b) is position by CSS to appear visually before the element 
(c). This is demonstrated in this demo [2] and happens since each 
element is the same z-axis or stacking order so the tree order 
determines the painting order [3].

Concerning text-shadow, glyphs do draw shadows over each other if the 
tree order is altered. These are two demos [4] [5] that shows this 
clearly. In the later demo, note the elaborate painting order (scroll 
the overflow box to see).

> Also, I think you're looking for an extension to the box-shadow
> property, while I'm looking for a generic way to express filters.
> Maybe if filters can accomplish your requirement, there is no need to
> extend box-shadow...
> Thanks for the links! I'll try to catch up on the history of this
> feature.
> Rik

What makes you so sure that we are talking about two different things? 
Take for the example the svg filter feGaussianBlur. This can be done 
already with box-shadow but with a blur that is more intense when 
further out in the shadow. Demo [6].

Are you aware that CSS box-shadow already has built in the capacity to 
behave like filters. For svg, to create a filter, you need another element.

<rect filter="url(#filter)"/>

plus other elements to apply the filter effect.

<filter id="filter">

In CSS we only need one element,


and this CSS.

div {
   background: <color>;
   box-shadow: 10px 10px 10px 0 <color>;

Then in a comma separated string, multiple shadows can be applied.

div {
   background: <color>;
   box-shadow: 10px 10px 10px 0 <color>, 10px 10px 10px 0 <color> inset;

Each shadow is like adding another filter.

1. <http://dev.w3.org/csswg/css3-background/#the-box-shadow>
2. <http://css-class.com/test/css/shadows/source-ordered-box-shadow.htm>
3. <http://www.w3.org/TR/CSS21/zindex.html#painting-order>
4. <http://css-class.com/test/css/shadows/text-shadow2.htm>
5. <http://css-class.com/test/css/shadows/text-shadow-over-elements1.htm>
6. <http://css-class.com/test/css/shadows/box-shadow-blur-offset-light.htm>

Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
Received on Thursday, 6 January 2011 07:45:37 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:54 UTC