How can I replicate this banner border with css
Hi,
I want to replicate the border shown on the image, only with css while being responsive. you can do it slightly with clip-path but you won't have the rounded edges.
The border on the image is a png with a white background, scaling with the width of the screen. Though I can't copy that cause the website I'm working on has to be both dark&white mode.
Do you have any ideas how to exactly replicate this while thinking of the different colored backgrounds?
Thank you
( Due to the fact that the website will dox me, I covered the texts & icons )
15 Replies
Can I do it with an svg? Changing the fill based on the color mode?
Svg would work fine, or you could also use two png (one light, one dark) and load the appropriate image using media queries or JavaScript.
Yeah svg did the trick with changing the fill with black or white depending on the mode ! 👍
you could also do a 3d rotation over the x-axis with the transform-origin at the top
I still find 3d rotation to be a little awkward, but then again I haven't used it much at all, but I'll expirment with it
thank you
here an example
https://codepen.io/MarkBoots/pen/JjxoaRq
Not sure if it's just me but this does create some artifacts instead of straight lines? 🤔
Pretty cool trick, though
if you want a border, it will get thinner the further it tilts back yes. (perspective).
I did put it on the pseudo element though, so the content itself stays the way it is.
It's probably much more noticeable because of the bright color anyway. I really need to look into CSS perspective
the
transform-style: preserve-3d; seems to be removing the anti-aliasing in FirefoxIm more concerned for what it looks like on safari, the majority of my users either view website per phone or mac
Even though I use firefox primarly when coding, I only check on other browsers when Im down to finish fix the browser specific issues
FYI, there's a bug open for Firefox already: https://bugzilla.mozilla.org/show_bug.cgi?id=1737904
Ah, I never really used it for that reason, but didnt know it was a bug!
firefox is just getting worse and worse.
Here I'm only using gradients and a border-radius. No transformations of some sort at all
Left Chromium, Right FireFox
it looks like the removal of the
preserve-3d doesn't cause any issues in other browsers. So it's probably not needed here?
to be fair those issues with pixel bleed on border-radius pop up on pretty much every browser to some degree