Re: [compositing?] Blurring an element’s backdrop

This looks like a case of blending since it takes 2 inputs and changes
colors. Filters always have 1 input and compositing works by applying alpha
in different ways.
I can see 2 ways of implementing this:
1. provide support for custom blending through shaders like we do in
filters[1]
This would be very powerful but hard to use since the user would have to
learn a new language.

2. extend the blend-mode syntax [2] so you can specify a filter operation
on the source or the background.
This is not quite as powerful but more intuitve.
For instance, the Windows 7 example could be done as:

background: linear-gradient(...)

background-blendmode: color-burn(blur(5px), opacity(...))

The shadow in the taskbar could be done as an axial gradient in an
additional background layer.

[1]:
https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html#feCustomElement
[2]:
https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blend-mode +
https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#background-blend-mode
[3]:
http://www.elmajdal.net/Win7/Windows_7_Aero_Peek_Feature/3-before-peek.png

On Sun, Apr 15, 2012 at 8:38 PM, 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<http://www.elmajdal.net/Win7/Windows_7_Aero_Peek_Feature/3-before-peek.png>
> [2]: http://css-tricks.com/blurry-**background-effect/<http://css-tricks.com/blurry-background-effect/>
> [3]: https://dvcs.w3.org/hg/FXTF/**raw-file/tip/filters/index.**html<https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html>
> [4]: https://dvcs.w3.org/hg/FXTF/**rawfile/tip/compositing/index.**html<https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html>
>
> --
> Lea Verou (http://lea.verou.me | @LeaVerou)
>
>