w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.49k stars 662 forks source link

[css-borders] manipulating `border-image-source` before slice #7777

Open jsnkuhn opened 2 years ago

jsnkuhn commented 2 years ago

https://drafts.csswg.org/css-backgrounds/#border-images

The border-image spec is missing the ability to manipulate border-image-source in the same ways we can manipulate background-image and mask-image. Note that this is about manipulating the border-image-source itself before it is sliced.

suggesting adding:

use cases:

Screenshot 2022-09-20 at 20-31-54 ExLXJoj

border-image-source: conic-gradient(#0000 0 270deg, #000 270deg); border-image-source-size: 66.6% 66.6%; border-image-source-repeat: repeat;

border-image-source-size: 33.3% 33.3%; border-image-source-repeat: repeat;

jsnkuhn commented 1 year ago

This one could be 4 radial gradients or copies of the same stroked circle image. It would also require border-image and border-radius to work together #7550 :

IMG_1270_1

SebastianZ commented 1 year ago
  • Creating this sort of image to use for a corners only border should be doable with conic-gradient but currently isn't.

It is. https://jsfiddle.net/SebastianZ/9ehjyvob/

Note that this use case was already mentioned by you in https://github.com/w3c/csswg-drafts/issues/6807#issuecomment-1145981728.

And I'd rather prefer a general image manipulation solution than adding that functionality to yet another specific type of image. But yes, use cases like patterns created via image functions should be doable with such an image manipulation functionality.

Sebastian

jsnkuhn commented 1 year ago

huh... so if you don't include a border-image-slice the full border-image-source gets put in each corner but not on the edges. That's a new one for me.

Have to admit in retrospect that I've seen the images at the corners thing but just assumed it was a bug. To be fair this property has always been a bit of a mine field of bugs before the Interop clean up this year.

SebastianZ commented 1 year ago

Have to admit in retrospect that I've seen the images at the corners thing but just assumed it was a bug. To be fair this property has always been a bit of a mine field of bugs before the Interop clean up this year.

I agree that border image slicing is relatively hard to understand. Therefore, I created #9183 suggesting an alternative to slicing.

Sebastian

SebastianZ commented 1 year ago

And I'd rather prefer a general image manipulation solution than adding that functionality to yet another specific type of image.

Thinking more about this, there are cases in which image manipulation may actually not be the right solution. This depends on whether the actual rendering size can be considered within @image for features like repetition, sizing and positioning.

If @image is not context aware, we could solve those use cases differently. Maybe in combination with #9183 we could introduce new border-image-* properties (without source-), so you could manipulate the images of the different regions.

When then combining this with multi-layer support (#8802), borders like in https://github.com/w3c/csswg-drafts/issues/9183#issuecomment-1680606278 could then be created like this:

border-image-source:
  url('corner.svg') url('frame-decor.svg') none,
  linear-gradient(90deg, #bf9875, #604b38, #bf9875) image(#bf9875);
border-image-repeat: no-repeat;

Sebastian