- From: Alan Gresley <alan@css-class.com>
- Date: Tue, 10 Dec 2013 18:02:54 +1100
- To: Rik Cabanier <cabanier@gmail.com>, Lea Verou <lea@verou.me>
- CC: Michael Mullany <michael@sencha.com>, Dean Jackson <dino@apple.com>, "public-fx@w3.org" <public-fx@w3.org>, www-style list <www-style@w3.org>, Stefan Craciun <scraciun@adobe.com>
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:29 UTC