- From: Ana Tudor via GitHub <sysbot+gh@w3.org>
- Date: Thu, 12 Oct 2023 06:30:37 +0000
- To: public-css-archive@w3.org
> One use case would be the classic border-only pie chart where we can rely on conic-gradient() but we need to mask the inside part: https://codepen.io/t_afif/pen/XWaPXZO > (for the rounded part, two extra radial-gradient will do the job and no need to clip them) Love this use case! Now with animation of custom properties via `@property` finally coming to Firefox (soonish, I hope!), we could animate both the `conic-gradient()` and the second `radial-gradient()` by animating `--p`. --- > I don't think this is necessarily the ideal solution because once you clip the content inside the element is invisible, only the border remains. So you would need a second element for the actual content. I see this more as a border-image extension. I also wonder if mask-border covers this. This property is `background-clip`, it doesn't clip the content, *only* the `background`. The content is unaffected. Are there use cases where extending `border-image` is more appropriate? Yes, but I think there are also use cases for a `border-area` value for `background-clip`. --- The first use case that came to my mind was that of gradient ghost buttons. I wrote an article detailing it a couple of years back https://css-tricks.com/css-ing-candy-ghost-buttons/  The article dissects multiple methods of achieving this they are either more complicated than what this proposal would allow for or they're less than ideal due to using either non-standard, non-cross-browser methods or due to not achieving the exact result we're after. Or both. This proposal would allow us to create a gradient sized relative to the `border-box` (`background-origin: border-box`), layer it twice and clip one layer to the `border-area` and one layer to `text`. Since it's the same gradient for both layers and the two areas we clip it to don't intersect, then the [Firefox bug 1481498](https://bugzilla.mozilla.org/show_bug.cgi?id=1481498#c3) can't visually break our result. ``` border: solid var(--b) transparent; --g: linear-gradient(90deg, #ffda5f, #f9376b) border-box; background: var(--g) text, var(--g) border-area; color: transparent ``` The 1st method dissected in the article is layering and XORing three fully opaque `mask` layers. The first layer is restricted to the `border-box`, the second one to the `padding-box` and XOR-ing them basically gives us the `border-area` gradient. Then we XOR this intermediate result with the third fully opaque layer, which is restricted to `text`. And here is where we come across the first problem, `text` is a non-standard value for `mask-clip` and isn't supported cross-browser, so this solution only works in Chrome. The 2nd method uses an extra pseudo with the first two `mask` layers from before to create the gradient `border` and also the same gradient clipped to `text` on the actual element. This works cross-browser, but has the disadvantage of using up an extra pseudo. The 3rd method uses `border-image`. This is pretty simple, however, we cannot use this method to achieve the pill shape of the button as `radial-gradient` and `border-image` [don't play nice together](https://codepen.io/thebabydino/full/jxZyed) - play with checking/ unchecking the two properties, they both work separately, but not together. This is something else I'd like to see changing, but more on that a bit further down. We can get a tiny corner rounding `--r` via `clip-path: inset(0 round var(--r))`, but this corner rounding needs to be at most as big as the `border-width`, otherwise things will look weird. The 4th method uses blending. This is very limited when it comes to the backgrounds we can use behind the ghost buttons. Even worse, we can only make it work in Firefox by using up an extra pseudo for it, as it fails there due to bug 1481498 (mentioned above). So overall, this is one use case where having a `border-area` value for `background-clip` makes a lot of sense. --- There are also gradient border situations where this wouldn't work however and that's dashed/ dotted gradient borders. There are various ways we could achieve them, but some are terribly hacky and awful, others are limited (using a `repeating-conic-gradient` in the `mask` to get a *dashed* gradient border for around a *circular* disc). For such situations, I'd rather see `border-image` and `border-radius` working together. -- GitHub Notification of comment by thebabydino Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9456#issuecomment-1758992499 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 12 October 2023 06:30:39 UTC