I need some help creating this effect in my custom header

Hello! I am wondering if anyone could give me some tips on creating this effect with my section headers. I have tried using absolute positioning but that turns into a mess with different screen sizes. Thank you!
No description
10 Replies
majkl
majkl•9mo ago
Eh, what exactly is the effect? Slider? The stripes? / If it falls apart on different sceen sizes, can`t you addres it with media queries?
Oddball97
Oddball97•9mo ago
sorry about that, just the stripes is what Im after
majkl
majkl•9mo ago
What about a gradient bgr image then?
Oddball97
Oddball97•9mo ago
I was thinking maybe there was some way to do an inverted border box?
majkl
majkl•9mo ago
That would be a novelty for me.
Oddball97
Oddball97•9mo ago
yeah no idea either lol, how would the gradient work?
majkl
majkl•9mo ago
Have a look at some gradient generators. You may want a stripe of blue (or transparency), then a narrow stripe of orange - a couple of times around to get the pattern and then repeat. Not sure about the gradiented blue nehind the lines, tho, you may need tom cut some corners. ...perhaps have one absolute div with the fading blue gradient AND another one on top of it with the orange tripes (and transparency). That would work good.
Oddball97
Oddball97•9mo ago
hmm sound interesting , Ill try that , thank you!
majkl
majkl•9mo ago
Or even better, use pseudoelements. Or have the fading blue gradient as bgr of the base div (the relative one) and the orange stripes in an absolute div on top. Yea, this is no biggie - just don`t seek acrobatic solutions.
MarkBoots
MarkBoots•9mo ago
repeating linear is difficult because the spacing is not the same, so you need a bit longer gradient 😉 i used custom properties, so it is not to difficult to adjust the color, linewidth and positions https://codepen.io/MarkBoots/pen/VwNYRMy?editors=0110
Want results from more Discord servers?
Add your server