W3C home > Mailing lists > Public > public-fx@w3.org > January to March 2016

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

From: Dean Jackson <dino@apple.com>
Date: Thu, 25 Feb 2016 12:17:33 +1100
Cc: Robert O'Callahan <robert@ocallahan.org>, Sebastian Zartner <sebastianzartner@gmail.com>, "public-fx@w3.org" <public-fx@w3.org>
Message-Id: <BDBF120F-2C1B-4B91-8522-D1BF4167D6E9@apple.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>

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

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

This archive was generated by hypermail 2.3.1 : Thursday, 25 February 2016 01:18:26 UTC