Re: [css-images][css-compositing] Blurring an element’s backdrop

In going with Lea's comment that authors equate backdrop with blending, I
propose the following new property:

backdrop-blur: none | <length>

Length would be the parameter passed into the blur() filter [1].

Specifying this parameter in combination with mix-blend-mode[2], would blur
the backdrop that is available during the blending step. Compositing would
happen as usual.
An alternate would be to extend mix-blend-mode so you can write the
following:

mix-blend-mode: screen blur(10px);

This can still be made compatible with future additions that target parts
of an element.

I'm in the process of creating an experimental windows-only build of
firefox that implements.

Thoughts?


1: http://www.w3.org/TR/filter-effects/#funcdef-blur
2: http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode


On Fri, Nov 29, 2013 at 7:51 PM, Rik Cabanier <cabanier@gmail.com> wrote:

>
>
>
> On Thu, Nov 28, 2013 at 10:35 PM, Lea Verou <lea@verou.me> wrote:
>
>> On Nov 29, 2013, at 12:45, Rik Cabanier <cabanier@gmail.com> wrote:
>> > This might work.
>> > My main concern is that it would overload mix-blend-mode too much since
>> we're also hoping to repurpose it to blend different areas of an element.
>> I'm unsure how we would reconcile that.
>> > Do you have a suggestion?
>>
>> If the syntax for that is what was discussed in the FXTF a while ago, I
>> don’t see what the conflict would be. Care to elaborate? :)
>
>
> Looking 18 months (!) back on this thread, I proposed the following:
>
> mix-blend-mode: color-burn(blur(5px))
>
>
> Doing it this way will be confusing if we want to blend different
> elements, ie
>
> mix-blend-mode: background screen, border multiply, content overlay,
> element hue
>
> Now, each of those *could* theoretically blur the backdrop but that is not
> a strong use case.
> This syntax also gives the impression that your content/border/element has
> the effect applied as opposed to the backdrop.
>
> Also, as Michael mentioned, simply blurring will not give you the desired
> effect. You often want to soften the backdrop with a white color that's
> blended with soft light or screen.
> He also mentions:
>
>  we need finer control of the blur opacity/falloff
>
> I'd prefer if we could create a new property that has nice defaults and if
> we can avoid writing filter chains in CSS.
>
>
>