- From: Rik Cabanier <cabanier@gmail.com>
- Date: Thu, 28 Nov 2013 20:45:44 -0800
- To: 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>
- Message-ID: <CAGN7qDA2whNNLDRuZ9db8yg6kEucaXX22ZG6SYwU5FwjY_hK=g@mail.gmail.com>
On Thu, Nov 28, 2013 at 7:39 PM, Lea Verou <lea@verou.me> wrote: > 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. > This might work. My main concern is that it would overload mix-blend-mode too much since we're also hoping to repurpose it to blend different areas of an element. I'm unsure how we would reconcile that. Do you have a suggestion? > > 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 <http://dev.w3.org/fxtf/compositing-1/#isolation> > 2: http://www.w3.org/TR/css3-background/#background-clip > > >
Received on Friday, 29 November 2013 04:46:19 UTC