- From: Lea Verou via GitHub <sysbot+gh@w3.org>
- Date: Wed, 11 Oct 2023 17:58:51 +0000
- To: public-css-archive@w3.org
LeaVerou has just created a new issue for https://github.com/w3c/csswg-drafts: == [css-backgrounds] background-clip: border-area == Lots of use cases around specifying a continuous image across the [border area](https://drafts.csswg.org/css-box-4/#border-area), including gradient borders, patterned borders etc. <img width="161" alt="image" src="https://github.com/w3c/csswg-drafts/assets/175836/70318ee3-8606-45f6-b83e-34846123b239"> <img width="596" alt="image" src="https://github.com/w3c/csswg-drafts/assets/175836/d076c520-cc5b-40a6-b17b-0f24c80e2360"> <img width="389" alt="image" src="https://github.com/w3c/csswg-drafts/assets/175836/ea090bb2-ba1c-41a6-b8ca-38b050eef21a"> From a very quick search: - https://css-tricks.com/gradient-borders-in-css/ - https://www.digitalocean.com/community/tutorials/css-gradient-borders-pure-css?utm_medium=content_acq&utm_source=css-tricks&utm_campaign=&utm_content=awareness_bestsellers - https://codepen.io/delijan/pen/YzPwKMy - https://www.geeksforgeeks.org/gradient-borders/# - https://nikitahl.com/gradient-border-css - https://tylerduprey-52451.medium.com/how-to-design-a-gradient-border-with-css-67c5d80bd823 Many of these use cases cannot be done with the 9-slice scaling of `border-image`, and for others `border-image` introduces unnecessary restrictions and additional complexity, when essentially all that is needed is to be able to cut the padding-box part of the background out. Today some of these can be achieved by specifying a `border-box` background and overlaying a `padding-box` background with the same color as the backdrop, but that doesn't work in every case. Authors use pseudo-elements to achieve some of these effects. ### Why not a syntax to *subtract* from the background? Reading the description above, it's conceivable to ask: If what is needed is the ability to subtract padding-box from border-box, why not just add a syntax to subtract background areas? It could be `background-clip` syntax (e.g. `background clip: border-box - padding-box`) or a separate `background-subtract: <box>#` property. The reason is this introduces 4 * 3 = 12 combinations that need to be implemented and tested, only one of which is actually useful. 6 of which would never even produce an area (e.g. `content-box - border-box`) and 4 of which (`text - *`) would almost never produce an area, yet introduce unfathomable implementation complexities. A single `border-area` addresses the vast majority of use cases, and keeps implementation complexity in check. Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9456 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 11 October 2023 17:58:53 UTC