Re: [filter-effects] apply filter to border and background

This is a followup to the previous conversation.


CSS Blending and Compositing has added four properties:

* 'mix-composite' and 'mix-blend-mode'
These properties allow specifying which area (element | box-shadow | text-shadow | background | content) gets blended or composited with the backdrop. Note that these properties are exclusively. It is not possible to combine areas for blending with the backdrop (e.g. background + border).

* 'background-composite' and 'background-blend-mode'
Allows compositing and blending different background layers together (independent of the properties above)


Filter Effects has the Image function 'filter()'

This function takes an image and returns a filtered Image. Possible usage:

	background-image: filter(my-boring-image.png);
	border-image:  filter(my-boring-image.png);

This does not allow filtering different areas (paint phases) of an image. A possible solution is adding an <area> keyword as in CSS Blending and Compositing:

	filter: blur(3px) border;

Which allows blurring of just the border, or

	filter: blur(3px) background;

which filter the whole background layer. The syntax would be

	[none | <filter-function>+] <area>?

The keyword is exclusive as well. The filter property can just get applied to one specific area, unless we allow a comma separated list like

	[[none | <filter-function>+] <area>?]#

Which would even allow filtering the filtered result (maybe to complex). A combination of different paint phases  (e.g. background + border) would still not be possible.


My personal preference is to stick around with the Image filer() function for now and think about a possible extension of the filter property in the next level. Would that be ok for now?

Greetings,
Dirk

On Aug 17, 2012, at 2:33 PM, Brad Kemper <brad.kemper@gmail.com> wrote:

> 
> 
> 
> Brad Kemper
> 
> On Aug 17, 2012, at 10:02 AM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:
> 
>> On Thu, Aug 16, 2012 at 6:09 PM, Dirk Schulze <dschulze@adobe.com> wrote:
>>> Hi CSS folks,
>>> 
>>> I created an initial Wiki page for discussing a request of the CSS WG to support filter effects on just backgrounds or just borders as well. [1]
>>> I want to collect proposals as well as pros and cons to find the best decision to address this request.
>>> 
>>> a) The first proposal is adding new properties for background and border:
>>> * 'background-filter'
>>> * 'border-filter'
>>> These properties have the same syntax and semantic as the 'filter' property.
>>> 
>>> The benefit that I see is that you can apply different filters to different component of an element (border, mask or content). But it means adding two new properties.
>>> 
>>> b) The second proposal is adding a new keyword to Filter Effects named 'filter-target' with the keywords
>>> * border
>>> * background
>>> * group
>>> * (content)
>>> 'content' might not be necessary, since you can group child elements and filter the whole group.
>>> 
>>> The benefit is that we just need one new property that is defined within Filter Effects and without modification of CSS Backgrounds and Borders.
>>> It seems to be harder to define different filters to different components (filter1 on the border, filter2 on the background).
>>> 
>>> SVG may also apply filters on different components of a shape. This could be done with the SVG Vector Effects proposal [2]. The 'filter' property would just be applied to each single vector effect.
>>> 
>>> Greetings,
>>> Dirk
>>> 
>>> [1] http://www.w3.org/Graphics/fx/wiki/Filter_Effects:_background_and_border_filter
>>> [2] http://www.w3.org/TR/2004/WD-SVG12-20041027/vectoreffects.html
>> 
>> Brad Kemper's old proposal from the 2009 TPAC was to accompany each
>> filter with a list of keywords representing filterable sub-parts of
>> the element, and the filter would be applied to the union of those
>> subparts.
>> 
>> I think his pieces were [ [ border || background || text ] | all ],
>> with filters assuming "all" if not otherwise specified.  Brad can
>> correct me with pointers to his old proposal, though.
> 
> I'll try to dig that up when I get home tonight. I think I had plus signs when they should be filtered as a group, and spaces to filter them individually. And I think I had 'content' instead of 'text'.

Received on Monday, 25 February 2013 17:46:25 UTC