Re: [css-masking] multiple mask layers and mask-composite

On Mar 5, 2014, at 9:36 AM, fantasai <fantasai.lists@inkedblade.net> wrote:

> On 03/04/2014 12:54 AM, Dirk Schulze wrote:
>> Hi all,
>> 
>> We removed multiple mask layers from the CSS Masking spec[1]. We could not
>> reach consensus on how to composite the different mask layers. [...]
>> 
>> I would like to propose adding layered masks back to level 1 [by] adding
>> a new mask longhand property: mask-composite.
>> 
>> Name: mask-composite
>> Value: <composite-operator>#
>> 
>> <composite-operator> = clear | copy | source-over | source-in | source-out | source-atop | destination-over | destination-in | destination-out | destination-atop | xor
> 
> I think this is an interesting idea worth exploring, and wouldn't mind
> exploring it for L1.
> 
> Are there ways to make these values (or at least, the commonly-used ones)
> more obvious? Not being a graphics person, I can't tell at all what they
> mean.

The terms are well known from HTML canvas and the keywords are the same.

I agree that people who are new to this topic will need some guidance. I suggest to add two examples of the most common composite operators to give authors a hint which operator they may want to use. If they are interested, they can get deeper into the topic.

> 
> I vaguely remember the problem being something about choosing between
>  - each layer acts individually as a mask over all the layers+content
>    before it
> vs.
>  - composite all the mask images, then use that as a mask
> and then the possibility of grouping certain combinations of images
> rather than all or none. Does your proposal address that in a reasonable
> way?

I believe so. Not only that, it provides much more control over the content, many people familiar with globalCompositeOperators from HTML canvas will appreciate having the same capabilities.

The two modes you mention can be archived with source-over (draw layers on top of each other and mask together) and destination-in (mask each layer with the the next layer and then mask content with the result).

I agree that we should make it more visible for authors that source-over and destination-in are probably more in their interest. The demo that I referenced also used XOR, which is not uncommon in graphic tools as well.

Greetings,
Dirk

> 
> ~fantasai
>

Received on Wednesday, 5 March 2014 11:16:24 UTC