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

Hi Lea,

On Mon, Apr 16, 2012 at 12:10 AM, Lea Verou <leaverou@gmail.com> wrote:

>  1. Absolutely not. Most authors don't even want to learn SVG, do you
> seriously expect them to learn a new C-based shader language?!
>

It is very powerful. If this feature were available, there would be places
where people could get pre-canned effects so they wouldn't have to learn it.
There could even be tools to create this code...


>
> 2. This depends on the background-blend-mode proposal, which is still
> under discussion and consensus is not even close. I like the idea of adding
> this to blend-mode, but I'm afraid your proposed syntax is quite
> unintuitive. I, for one, have no idea how it's supposed to work and I have
> actually read the current proposal.
>

You are asking for an advanced feature so the syntax will be fairly complex
unless you want JUST blurring of your background (in which case a new
blending keyword would suffice) but this would not result in the appearance
of your examples.
My proposal was to extend blend-mode to:

blendmode(filter chain on background, filter chain on source)


Maybe compositing would work here too:

alpha-compositing(filter chain on background, filter chain on source)


The second parameter could be optional so only a filter on the background
is applied, the syntax then becomes.

blend-mode: color-burn(blur(5px))

or

alpha-compositing: src-over(blur(5px))



> I think we shouldn't be concerned with layers at the moment (such as
> background). Even if the effect operates on the entire element's backdrop,
> it would still be a big improvement over current methods. After all, that's
> what's needed in most cases.
>

This need to be done with the background. For example if you want to
implement something like the Win7 window, a window would be 1 element that
contains other elements that implement menu bars, folder view, file view,
etc. The window has a blurred background but the other views don't so only
the background of the element has this effect applied to it.

Maybe your point was that the background should be seen as a single element?



> On 15/4/12 21:53, Rik Cabanier wrote:
>
> 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
>> [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)
>>
>>
>