Re: [filter-effects-2] Split functionality of 'filter' and 'backdrop-filter' into several properties

> On 25 Feb 2016, at 11:30 AM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> 
> On Wed, Feb 24, 2016 at 3:58 PM, Dean Jackson <dino@apple.com> wrote:
>>> On 25 Feb 2016, at 10:56 AM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
>>> On Wed, Feb 24, 2016 at 1:41 PM, Dean Jackson <dino@apple.com> wrote:
>>>> On 25 Feb 2016, at 8:29 AM, Robert O'Callahan <robert@ocallahan.org> wrote:
>>>>> On Thu, Feb 25, 2016 at 9:58 AM, Dean Jackson <dino@apple.com> wrote:
>>>>>> Although it's not just that it is a standalone property. It would be nice
>>>>>> if you didn't have to escape out to SVG to do any fancy filter operation.
>>>>>> Putting SVG in CSS is annoying.
>>>>> 
>>>>> How about coming up with CSS syntax for the full feature set of SVG filters
>>>>> in 'filter' instead of minting new properties?
>>>> 
>>>> I think there was a proposal for a longhand form of @filter in CSS a while
>>>> back. Once that exists again, we can define the shorthand form in the more
>>>> detailed syntax, like what we do for the existing filter functions.
>>> 
>>> I don't think that proposal ever advanced further than the "wouldn't
>>> it be nice" stage.  I'm happy to write it up if people are interested.
>> 
>> I am interested. It would make animating parts of filters more possible
>> with CSS. And we might even be able to get some basic parameterization
>> in there using variables.
> 
> I'm curious what you're thinking about concerning animating parts of
> an at-rule (how?) and using CSS variables (resolve at time of
> application against the element's custom properties, I guess?).

You're the CSS Expert!! :)

Here's what I obviously had not thought through:

@filter bubble {
  @gaussianblur {
    in: source-alpha;
    standard-deviation: 4px;
  }
  @specular-lighting {
    surface-scale: 5;
    specular-constant: .75;
    specular-exponent: 20;
    lighting-color: var(--my-lighting-color);
    lights: point(-5000 -10000 20000);
  }
  @composite {
    in2: source-alpha;
    operator: in;
    out: specular-and-source-alpha;
  }
  @composite {
    in: source;
    in2: source-alpha
    operator: arithmetic(0 1 1 0);
    out: paint;
  }
  @merge {
    in: specular-and-source-alpha, paint;
  }
}

body {
  --my-lighting-color: red;
}

#foo {
  filter: bubble;
  transition: --my-lighting-color 1s;
}

#foo:hover {
  --my-lighting-color: blue;
}

I'll leave that up to you to work out if it is possible :)

(Implementing it will be equally fun)

Dean

Received on Thursday, 25 February 2016 01:18:25 UTC