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!
10 Replies
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?
sorry about that, just the stripes is what Im after
What about a gradient bgr image then?
I was thinking maybe there was some way to do an inverted border box?
That would be a novelty for me.
yeah no idea either lol, how would the gradient work?
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.
hmm sound interesting , Ill try that , thank you!
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.
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