thanks for the advice, both of you! ^^
pom wrote: Mon Oct 02, 2023 5:29 pm
I think with the border image itself, there's really not much you can do. An image is static and has varying degrees of transparency. But with the div with the text and background. I know css supports opacity. there might be away to "map" all the edge to like fade into a lighter opacity to make it blend more.
Here is kinda of a similar example.
it seems like if you try to use a transparent gradient, you'd have to layer a bunch of smaller rectangles to achieve this effect, since the only options are radial and linear gradients? i'm kinda not good enough with positioning things in css to do that, i think, rip. i was also trying to make a completely separate div (without the border or text in it) to have the stripey pattern in, but i had issues trying to line that up, as well...
hors wrote: Tue Oct 03, 2023 2:32 am
This is such a cute idea! In your first try, you can use
border-image-outset to reposition the border. Border-image-outset:50px seems to look about right for the first codepen with the background color applied to the parent div. Image borders can be kind of finicky though, so I think the solution you ended up with is actually the best one already.
Of course there is always the option of not using an image as the
border but I'm assuming you did it this way for some degree of responsiveness?
the 'border-image-outset' was actually what i was looking for, i think! ...but yeah, it doesn't really look the best in this specific scenario, either, unfortunately.
and yeah, i was doing it this way so it'd be responsive. otherwise, the easier option would be to just edit the whole border & background together in photoshop and use it as a background image, right?
i think i will just leave it as is, but i will keep what you brought up in mind for future layouts! thanks, again!