Re: [css3] support for filters

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)"/>
<rect/>

plus other elements to apply the filter effect.

<defs>
<filter id="filter">
 <feGaussianBlur/>
 <feOffset/>
</filter>
</defs>


In CSS we only need one element,

<div/>

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