W3C home > Mailing lists > Public > public-fx@w3.org > October to December 2013

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

From: Michael Mullany <michael@sencha.com>
Date: Wed, 27 Nov 2013 10:50:07 -0800
Message-ID: <CABTYPJmkhcLy=_4VbSMYq1VaHrQpK6abxFoqNZVJDKQ=9_UrdA@mail.gmail.com>
To: Rik Cabanier <cabanier@gmail.com>
Cc: 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>
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

>  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.

Received on Wednesday, 27 November 2013 18:51:05 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 19:49:47 UTC