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

On Thu, Nov 28, 2013 at 7:39 PM, Lea Verou <lea@verou.me> wrote:

> First off, I'm very glad to see discussion on this. It’s something the
> author community has been needing for a long time.
>
> From an author perspective, I was wondering, can't this be a sort of
> special blending mode? Perhaps something like:
>
> mix-blend-mode: filter(...);
>
> Introducing a separate property futher complicates the mental model
> required. I know it's not exactly a blending mode, but as far as authors
> are concerned, this is an implementation detail. For most authors, blending
> mode = manipulating the backdrop, and this fits that description.
>

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?


>
> On Nov 28, 2013, at 05:55, Rik Cabanier <cabanier@gmail.com> wrote:
>
>
>
>
> On Wed, Nov 27, 2013 at 10:50 AM, Michael Mullany <michael@sencha.com>wrote:
>
>>
>>
>>
>> On Fri, Nov 22, 2013 at 3:05 PM, Rik Cabanier <cabanier@gmail.com> wrote:
>>
>>>
>>>
>>>
>>> On Thu, Sep 19, 2013 at 10:08 AM, Dean Jackson <dino@apple.com> wrote:
>>>
>>>>
>>>> On 18 Sep 2013, at 1:05 pm, Dirk Schulze <dschulze@adobe.com> wrote:
>>>>
>>>>
>>>> > I suggest adding a new keyword 'backdrop' as CSS Image. This can be
>>>> filtered with the CSS Image filter()[3] function and blended with
>>>> background colors or background images and the 'background-blend-mode'
>>>> property. This would produce results where the backdrop directly behind the
>>>> element would always be blurry, but around the element it isn't. This looks
>>>> even nicer on scrolling and other interactions.
>>>>
>>>> I think I suggested a separate property: background-filter (I can’t
>>>> remember if I emailed this, or spoke up at a meeting, or just thought of it
>>>> in the shower).
>>>>
>>>> The reason is that I think in most cases you want to draw normally and
>>>> just apply the effect to the background. There is no need to consider the
>>>> content of the element to be filtered for this effect. However, the name is
>>>> a bit misleading because, as you know, it is not filtering the element’s
>>>> background (in CSS terms), but its backdrop.
>>>>
>>>
>> I think it's sort of weird that you've removed enable-background from the
>> SVG portion Filters because it was hard to implement (although IE does a
>> perfectly serviceable job of implementing BackgroundImage per SVG 1.1
>> spec.), but now you're proposing to add it again but in a way that means it
>> can't participate in an SVG filter chain, but perhaps I misunderstand the
>> proposal.
>>
>
> The intent was always to reintroduce it, but using the 'isolation'
> property [1] instead of the more confusing 'enable-background' property.
> I'm unsure why you think that it can't participate in the filter chain.
> Can you explain?
>
>
>>  I've been seeing this effect use more lately. Designers have to create
>>> it manually or emulate it with CSS filters and careful overlapping of
>>> elements. Maybe it's time to make it a simple CSS property like you propose.
>>>
>>> All cases I've seen so far, apply the background blur over a rectangular
>>> region. Earlier in the thread, I suggested that the effect should only
>>> apply to the shape/coverage area but maybe that makes it too hard to
>>> implement.
>>>
>>
>> Speaking for Sencha and the types of apps that our community creates, we
>> want to be able to duplicate the blend/blur styles introduced by iOS7.
>> Which means that a simple blur is not enough - we need finer control of the
>> blur opacity/falloff. I did an example of this using SVG filters and
>> feImage (no BackgroundImage's were harmed in the making of this demo) It
>> uses a feFuncA to tweak the standard Blur behavior.
>>
>> http://codepen.io/mullany/pen/diolI
>>
>
> I agree that just blurring is not enough. Ideally, we would define a
> syntax that does something reasonable by default but that you can tweak.
> For instance, some examples use screen or soft light blending of the
> backdrop and a color (typically white).
>
> We should also say that the blur area is determined by the background-clip
> for now [2] and is drawn before background color and images.
>
> 1: http://dev.w3.org/fxtf/compositing-1/#isolation <http://dev.w3.org/fxtf/compositing-1/#isolation>
> 2: http://www.w3.org/TR/css3-background/#background-clip
>
>
>