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

IE10 is currently the only browser to support background as an input in a
filter for inline SVG.

The relevant bugs in Mozilla, Chrome + Webkit are:

https://bugzilla.mozilla.org/show_bug.cgi?id=437554
http://code.google.com/p/chromium/issues/detail?id=137230
https://bugs.webkit.org/show_bug.cgi?id=33320




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
>



-- 
www.sencha.com
"Amazing Apps with Web Technologies"