[csswg-drafts] [css-backgrounds-4] Proposal: extend background-clip to support clip-path options

AmeliaBR has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-backgrounds-4] Proposal: extend background-clip to support clip-path options ==
Inspired by [a discussion with Amber Weinberg about a tricky design](https://twitter.com/amberweinberg/status/1044293315359907840), in which she had non-rectangular element shapes that also needed a bit of a "border" around the shape. I thought:

Wouldn't it be convenient if you could do it with layered backgrounds, clipping each one to slightly different clip paths?

With `background-clip` [as defined in Backgrounds & Borders 3](https://drafts.csswg.org/css-backgrounds-3/#background-clip), you can trim different background layers to different CSS boxes. But you can't inset/outset the backgrounds to something e.g., halfway through the padding space. And you can't change the border-radiusing on the clipped background to anything other than what will be generated automatically from the outer `border-radius`. And you definitely can't clip it to any shapes other than radiused rectangles.

But all major browsers now support the `text` value (standardized in [Backgrounds & Borders 4](https://drafts.csswg.org/css-backgrounds-4/#background-clip)), and most of them support it for a single layer in a stack of backgrounds. Level 4 also defines a keyword for clipping a background layer to the defined border-shape.

So if you can implement that, I'm fairly certain it wouldn't be *too* much more complicated to implement arbitrary background clips using CSS shapes or even SVG clipping paths. The calculation of the clipping area would be the exact same as for [the `clip-path` property](https://drafts.fxtf.org/css-masking-1/#the-clip-path), but would only apply to one layer in the stack.

And it just so happens that where the syntax of `background-clip` and `clip-path` overlap (that is, when the value is single box keyword, like `border-box` or `content-box`), that calculation would be the same as currently.

As an example, the arrow shapes in the design Amber was tackling would be coded something like this (using the [`image()` function notation](https://drafts.csswg.org/css-images-4/#image-notation) to represent multiple solid-color layers, but solid-color gradients could be used as a more universal fallback):

```css
.donate-link {
  padding: 20px 60px 20px 85px;
  background: image(blue), image(white), #444;
  background-clip:
    border-box polygon(4px 0, 24px 50%, 4px 100%, 100% 100%, 100% 0), /* inner blue arrow */
    border-box polygon(0 0, 20px 50%, 0 100%, 100% 100%, 100% 0), /* outer white arrow */
    border-box; 
}
```



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3140 using your GitHub account

Received on Monday, 24 September 2018 19:10:10 UTC