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

On Wed, Feb 24, 2016 at 5:17 PM, Dean Jackson <dino@apple.com> wrote:
>> 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;
>   }
> }

(This basically exactly matches what I'm writing.)

> 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 :)

Okay, yup, that's fine. It relies on Houdini's Custom Properties to
make the custom property itself animatable (because we don't know what
type it is), but otherwise is fine.

~TJ

Received on Thursday, 25 February 2016 01:32:58 UTC