- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Wed, 24 Feb 2016 17:32:10 -0800
- To: Dean Jackson <dino@apple.com>
- Cc: "Robert O'Callahan" <robert@ocallahan.org>, Sebastian Zartner <sebastianzartner@gmail.com>, "public-fx@w3.org" <public-fx@w3.org>
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