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

On Mon, Dec 9, 2013 at 11:02 PM, Alan Gresley <alan@css-class.com> wrote:

> The Windows 7 Aero environment effect for a backdrop is not blurring but
> diffusing. This is used by special camera lenses that are called diffusion
> filters [3] which causes light scattering [4]. The blur effects that are
> used in graphic arts programs emulate this diffusion effect and call it
> blurring [5].
>
>   | The visual effect of this blurring technique is a
>   | smooth blur resembling that of viewing the image
>   | through a translucent screen.
>
> The effect can be achieved now but controversially (due to security
> issues) by way of using element(). Please view in Firefox.
>
> http://css-class.com/test/css/3/image/blurred-diffused-backdrop.htm
>
> This could have been done easier if Firefox supported 'filter: blur()'
> which could have been applied to a hidden referenced element and used as
> the first layer or final layer in background-image (depending on the
> construction).


The issue is that you as author would have to know what exactly is behind
the elements.
What if there was more than 1 element behind you, or if that element was
scrolling?


> On 6/12/2013 3:42 PM, Rik Cabanier wrote:
>
>  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].
>>
>
> The property 'backdrop-blur' can *not* be allowed to create a stacking
> context since this would effect the painting order. For each box
> (inline-level and block-level), you would want to paint the 'backdrop-blur'
> as the final painting layer of an element.
>
> Like so (from bottom to top in painting order):
>
>   1. backdrop-blur of element.
>
>   2. box-shadow of element.
>
>   3. background color of element.
>
>   4. background image of element.
>
>   5. border of element.
>

That would be if you see backdrop-blur as an additional draw step (which
was my first proposal).
The main problem is that the blurred backdrop would cover more than is
wanted.
Anothers possible drawback is that you usually want to blend with this
backdrop which will require additional css keywords. I'm also worried that
opacity or a transition with opacity will look weird.


>
> It's only in §7.2.3 of the editors draft of 'CSS Backgrounds and Borders
> Module Level 3' that this painting is finally in the spec [6] .
>
>   | Shadows do not influence layout and may overlap
>   | other boxes or their shadows.
>
>
> A demo of the painting order is found here [7].
>
>
>  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.
>>
>
> How? Doesn't mix-blend-mode caused blending and doesn't blending create a
> stacking context or am I confusing creating a stacking context with
> isolation.


yes. No, you are not confused; I'm not being clear. :-)
mix-blend-mode today consists of a blend step that calculate a new color,
followed by source-over that composites that color.
My proposal was to blur the backdrop that is available during blending, but
composite with the regular backdrop.

I created a test version of firefox that always blurs during blending:
http://ftp.mozilla.org/pub/mozilla.org/firefox/try-builds/cabanier@adobe.com-b41a4f3aa1b3/try-win32/firefox-28.0a1.en-US.win32.tests.zip
You can try it out with this page: http://cdpn.io/nmfic
The algorithm isn't ready yet but it should give you an idea on the general
feel.


 An alternate would be to extend mix-blend-mode so you can write the
>> following:
>>
>> mix-blend-mode: screen blur(10px);
>>
>
> I thinking it would be confusing since mix-blend-mode acts of the element
> itself and not it's backdrop.
>

With the current proposal, backdrop blurring would ONLY happen if there's
blending. It might be surprising to authors that a property does nothing by
itself (but I could be wrong)


>
> I still do not know the difference between 'mix-blend-mode',
> 'background-blend-mode' or 'isolation' but I'm still learning the wonders
> of SVG.


mix-blend-mode = blend the entire element with its parent stacking context
(similar to css opacity)
background-blend-mode = specify how background images blend with each other
isolation = turn this element into a stacking context.


>
>
>  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?
>>
>
> Can 'backdrop-blur' be simply 'backdrop' since there are other effects
> that are not a simple blur.
>
> backdrop: none | blur(<length>) | ?
>

Yes, if there are more filters, that would be the way to go.


>
> These are similar to what I find in my simple graphic arts program that
> has charcoal, chrome, colored edges (without any blurring) which are
> granular in appearance. Another effect could be feedback.
>

Do you have examples where these are used as backdrop filters?


> Can blur itself be magnified and can the x and y offsets be of different
> values?


You mean blur in x and y? Sure that is possible.


>
>  1: http://www.w3.org/TR/filter-effects/#funcdef-blur
>> 2: http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode
>>
> 3. http://en.wikipedia.org/wiki/Diffusion_filter
> 4. http://en.wikipedia.org/wiki/Light_scattering
> 5. http://en.wikipedia.org/wiki/Gaussian_blur
> 6. http://dev.w3.org/csswg/css-backgrounds/#shadow-layers
> 7. http://css-class.com/test/temp/shadow-painting-order.htm
>
>
>
> Alan
>
>
> --
> Alan Gresley
> http://css-3d.org/
> http://css-class.com/
>