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

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

Received on Wednesday, 18 September 2013 20:06:20 UTC