- From: Dean Jackson <dino@apple.com>
- Date: Thu, 25 Feb 2016 12:17:33 +1100
- To: "Tab Atkins Jr." <jackalmage@gmail.com>
- Cc: Robert O'Callahan <robert@ocallahan.org>, Sebastian Zartner <sebastianzartner@gmail.com>, "public-fx@w3.org" <public-fx@w3.org>
> 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