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

The Windows 7 Aero environment effect for a backdrop is not blurring but 
diffusing. This is used by special camera lenses that are called 
diffusion filters [3] which causes light scattering [4]. The blur 
effects that are used in graphic arts programs emulate this diffusion 
effect and call it blurring [5].

   | The visual effect of this blurring technique is a
   | smooth blur resembling that of viewing the image
   | through a translucent screen.

The effect can be achieved now but controversially (due to security 
issues) by way of using element(). Please view in Firefox.

http://css-class.com/test/css/3/image/blurred-diffused-backdrop.htm

This could have been done easier if Firefox supported 'filter: blur()' 
which could have been applied to a hidden referenced element and used as 
the first layer or final layer in background-image (depending on the 
construction).

On 6/12/2013 3:42 PM, Rik Cabanier wrote:

> In going with Lea's comment that authors equate backdrop with blending, I
> propose the following new property:
>
> backdrop-blur: none | <length>
>
> Length would be the parameter passed into the blur() filter [1].

The property 'backdrop-blur' can *not* be allowed to create a stacking 
context since this would effect the painting order. For each box 
(inline-level and block-level), you would want to paint the 
'backdrop-blur' as the final painting layer of an element.

Like so (from bottom to top in painting order):

   1. backdrop-blur of element.

   2. box-shadow of element.

   3. background color of element.

   4. background image of element.

   5. border of element.

It's only in §7.2.3 of the editors draft of 'CSS Backgrounds and Borders 
Module Level 3' that this painting is finally in the spec [6] .

   | Shadows do not influence layout and may overlap
   | other boxes or their shadows.


A demo of the painting order is found here [7].

> Specifying this parameter in combination with mix-blend-mode[2], would blur
> the backdrop that is available during the blending step. Compositing would
> happen as usual.

How? Doesn't mix-blend-mode caused blending and doesn't blending create 
a stacking context or am I confusing creating a stacking context with 
isolation.

> An alternate would be to extend mix-blend-mode so you can write the
> following:
>
> mix-blend-mode: screen blur(10px);

I thinking it would be confusing since mix-blend-mode acts of the 
element itself and not it's backdrop.

I still do not know the difference between 'mix-blend-mode', 
'background-blend-mode' or 'isolation' but I'm still learning the 
wonders of SVG.

> This can still be made compatible with future additions that target parts
> of an element.
>
> I'm in the process of creating an experimental windows-only build of
> firefox that implements.
>
> Thoughts?

Can 'backdrop-blur' be simply 'backdrop' since there are other effects 
that are not a simple blur.

backdrop: none | blur(<length>) | ?

These are similar to what I find in my simple graphic arts program that 
has charcoal, chrome, colored edges (without any blurring) which are 
granular in appearance. Another effect could be feedback.

Can blur itself be magnified and can the x and y offsets be of different 
values?


> 1: http://www.w3.org/TR/filter-effects/#funcdef-blur
> 2: http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode
3. http://en.wikipedia.org/wiki/Diffusion_filter
4. http://en.wikipedia.org/wiki/Light_scattering
5. http://en.wikipedia.org/wiki/Gaussian_blur
6. http://dev.w3.org/csswg/css-backgrounds/#shadow-layers
7. http://css-class.com/test/temp/shadow-painting-order.htm


Alan


-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Tuesday, 10 December 2013 07:03:27 UTC