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

First off, I'm very glad to see discussion on this. It’s something the author community has been needing for a long time.

From an author perspective, I was wondering, can't this be a sort of special blending mode? Perhaps something like:

mix-blend-mode: filter(...); 

Introducing a separate property futher complicates the mental model required. I know it's not exactly a blending mode, but as far as authors are concerned, this is an implementation detail. For most authors, blending mode = manipulating the backdrop, and this fits that description.

~Lea

On Nov 28, 2013, at 05:55, Rik Cabanier <cabanier@gmail.com> wrote:

> 
> 
> 
> On Wed, Nov 27, 2013 at 10:50 AM, Michael Mullany <michael@sencha.com> wrote:
> 
> 
> 
> On Fri, Nov 22, 2013 at 3:05 PM, Rik Cabanier <cabanier@gmail.com> wrote:
> 
> 
> 
> On Thu, Sep 19, 2013 at 10:08 AM, Dean Jackson <dino@apple.com> wrote:
> 
> On 18 Sep 2013, at 1:05 pm, Dirk Schulze <dschulze@adobe.com> wrote:
> 
> 
> > 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.
> 
> I think I suggested a separate property: background-filter (I can’t remember if I emailed this, or spoke up at a meeting, or just thought of it in the shower).
> 
> The reason is that I think in most cases you want to draw normally and just apply the effect to the background. There is no need to consider the content of the element to be filtered for this effect. However, the name is a bit misleading because, as you know, it is not filtering the element’s background (in CSS terms), but its backdrop.
> 
> I think it's sort of weird that you've removed enable-background from the SVG portion Filters because it was hard to implement (although IE does a perfectly serviceable job of implementing BackgroundImage per SVG 1.1 spec.), but now you're proposing to add it again but in a way that means it can't participate in an SVG filter chain, but perhaps I misunderstand the proposal.
> 
> The intent was always to reintroduce it, but using the 'isolation' property [1] instead of the more confusing 'enable-background' property.
> I'm unsure why you think that it can't participate in the filter chain. Can you explain?
>  
> I've been seeing this effect use more lately. Designers have to create it manually or emulate it with CSS filters and careful overlapping of elements. Maybe it's time to make it a simple CSS property like you propose.
> 
> All cases I've seen so far, apply the background blur over a rectangular region. Earlier in the thread, I suggested that the effect should only apply to the shape/coverage area but maybe that makes it too hard to implement.
> 
> Speaking for Sencha and the types of apps that our community creates, we want to be able to duplicate the blend/blur styles introduced by iOS7. Which means that a simple blur is not enough - we need finer control of the blur opacity/falloff. I did an example of this using SVG filters and feImage (no BackgroundImage's were harmed in the making of this demo) It uses a feFuncA to tweak the standard Blur behavior.
> 
> http://codepen.io/mullany/pen/diolI
> 
> I agree that just blurring is not enough. Ideally, we would define a syntax that does something reasonable by default but that you can tweak. For instance, some examples use screen or soft light blending of the backdrop and a color (typically white).
> 
> We should also say that the blur area is determined by the background-clip for now [2] and is drawn before background color and images.
> 
> 1: http://dev.w3.org/fxtf/compositing-1/#isolation 
> 2: http://www.w3.org/TR/css3-background/#background-clip
>