- From: Brad Kemper <brad.kemper@gmail.com>
- Date: Wed, 11 Apr 2012 16:23:52 -0700
- To: "Tab Atkins Jr." <jackalmage@gmail.com>
- Cc: www-style list <www-style@w3.org>
Fixing the quoting level:
> On Wed, Apr 11, 2012 at 9:59 AM, Brad Kemper <brad.kemper@gmail.com> wrote:
>> On Apr 11, 2012, at 8:04 AM, Dirk Schulze wrote:
>>
>> I would like this approach. Sadly CSS masking is already very focused on images and tries to use the syntax of background as much as possible. That makes it hard to generalize it more. See safari blog post http://www.webkit.org/blog/181/css-masks/
>>
>>
> Rather than repeating all the features of backgrounds as separate
> properties, I'd rather see a single property that turned a background layer into a mask. So, for instance, the second "kate.png" example in the Surfin' Safari blog would look like this:
>
> <img src="kate.png" style="background-image: linear-gradient(90deg,
> rgba(0,0,0,1), rgba(0,0,0,0)); background-mask: all;">
>
> Or if it was a background-image, then there would be a keyword to mask
> layers above the mask layer:
>
> img.kate {
> background-image:
> url(kate.png),
> linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0));
> background-mask:
> none, /* kate.png doesn't mask anything */
> layers-above; /* gradient masks kate */
> }
>
> Then there could be another keyword to clear the mask from a current layer
> and those above it:
>
> img.kate {
> background-image:
> url(easter_egg.png),
> url(kate.png),
> linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0));
> background-mask: clear, /* easter_egg.png is not masked */
> none,
> layers-above;
> }
Received on Wednesday, 11 April 2012 23:24:27 UTC