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

Blurring of the backdrop is not quite the same as a CSS image.
You typically only want to blur where you're actually painting. For
instance, if you draw large text or an SVG graphic, you only want to blur
where the pixels of the text or graphic are drawn.

I guess you could pull in the backdrop as a rectangular region of a certain
size, but seems too primitive for CSS.


On Wed, Sep 18, 2013 at 1:05 PM, Dirk Schulze <dschulze@adobe.com> wrote:

> See the whole threat on public-fx [1].
>
> On Apr 16, 2012, at 5:38 AM, Lea Verou <leaverou@gmail.com> wrote:
>
> > One of the most common use cases of blurring I have encountered (both in
> > my own work and of others) is blurring an element’s backdrop. Not only
> > does it make designs more visually appealing, but also helps to make
> > text more legible over complex backdrops. This is exactly the reason why
> > it's widely used on native interfaces that include semi transparent
> > containers, such as the Windows 7 Aero enviromment [1].
> >
> > Currently, authors are relying on inflexible hacks that require multiple
> > images for simulating this effect [2]. Even with the current CSS Filters
> > proposal [3], this is not possible in the general case, since filters
> > operate on an element without taking its backdrop into account. Perhaps
> > it could be added as a blending mode [4], but I think it might be
> > outside the scope of that spec, since blending modes seem to only
> > operate on pixel colors (operations of the sort result pixel color =
> > f(element's pixel color, backdrop pixel color) for every pixel), without
> > taking surrounding pixels into account.
> >
> > I'm not sure I have a concrete proposal, as my knowledge is very limited
> > on what’s possible (efficiently) in this area. However, it's a very
> > common use case that needs to be addressed somehow.
> >
> > [1]:
> >
> http://www.elmajdal.net/Win7/Windows_7_Aero_Peek_Feature/3-before-peek.png
> > [2]: http://css-tricks.com/blurry-background-effect/
> > [3]: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
> > [4]: https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html
> >
> > --
> > Lea Verou (http://lea.verou.me | @LeaVerou)
>
> As noted from Lea, to archive things like that, you need access to the
> backdrop.
>
> Latest iOS7 but also Win7 have these kind of effects where the backdrop is
> used behind the content. The backdrop is filtered and blended with other
> background layers.
>
> To get the backdrop of an element, you currently need to use SVG Filters
> and the BackgroundImage pseudo filter primitive [2] (not implemented in
> some browsers yet). Then you would probably use blending of SVG filters as
> well. SVG Filters come with the known disadvantages of missing CSS
> animations and are more suitable for complex tasks. I think the request
> from Lea is actually archivable with a small addition.
>
> 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.
>
> As a note, this keyword would still need to rely on the definition of
> isolation groups[4]. Every element creating an isolation group because it
> has a stacking context or the 'isolation' property set to 'isolate', will
> have direct effect on this keyword and the requested backdrop. (The same
> way as it influences the 'mix-blend-mode' property[5].)
>
> Greetings,
> Dirk
>
> [1] http://lists.w3.org/Archives/Public/public-fx/2012AprJun/0003.html
> [2] http://dev.w3.org/fxtf/filters/#BackgroundImage
> [3] http://dev.w3.org/fxtf/filters/#FilterCSSImageValue
> [4] http://dev.w3.org/fxtf/compositing-1/#isolation
> [5] http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode
>