how can i put curves little above ?
i tried everything and margin -1em worked but i don't know if it's a right way to do it ?
96 Replies
we can't possibly tell you without checking the code
oops i forgot to add codepen
curves.svg wasn't showing so i had to put svg code in curves div
otherwise my html looks like this
i also tried it with flex.
moving it up a bit is definitely the way to do it, how depends on the use case and contents. I'd probably just use a negative margin too
really ?
is it normal to do ?
it used to be, and I've been doing this a looooong time 😄 There's heaps other ways probably, but if it doesn't break anything there's no reason to overcomplicate
this is flex code
right
can you take a look at the website how arc did it
they just have top 0 and left 0 and it is defenetly aligning
Thanks for downloading Arc!
Experience a calmer, more personal internet in this browser designed for you. Let go of the clicks, the clutter, the distractions.
i inspected the site
i mean what should even say here
i did same but it is not working
Their SVG probably just matches the two colors
like, the top is the blue and the bottom is the whiteish
how they even put ::after in div ?
a background image
yes
divs support ::after
and it has a
contentby having
.c-jmqsMK::after in their CSS somewhere? that's how after is shown in the DOMthen has the background image
but why it wasn't supporting mine
oh so they didn't manually typed ::after in dom
position absolute inside position absolute
sounds like a recepie for disaster
is there any way to it without minus margin
also, is the svg in the same folder as the html file?
yes
everthing is naked
position absolute, grid, vertical-align
i'm not used to grid
can you tell me in flex ?
flex doesn't do grid that well, so, nope
also you can do a linear gradient to fake the background changing color early
or late
whichever
or multiple backgrounds
basically you make the element containing the squiggle look like the top bit is still the div above by giving it that background color, then have the background color change where it's covered by the squiggle
no no i don't want to change color
ya do though?
that's one green, then squiggle, then another, different green?
i made bottom green so i can see if it covered it or not
by curves
then I don't think I understand what problem you're having
after that i'm giving secondary color to bottom part
same as curves
so you're transitioning from green to the yellow?
so, the background color of the bottom is the same as the curves?
i didn't make figma of this cause it was supposed to be 10 minute work
so
that still works just fine with the linear-gradient trick, you just adjust the colors
final i'm expecting of course the bottom green will have some social media icons
the top of what is now darkgreen would then be light green so it looks like the light green keeps going, and then in the part covered by the squiggle, you change the background to the squiggle color so the rest of the same div looks like it's the same color as the squiggle
how do they do it ?
an svg
with position absolute
the SVG has the color set to the values they need to be to blend in
or just transparent or something
sorry jochem this is how it will look
not dark green
but how did the div got little bottom or should i say how did the svg got little up ?
i didn't fully understand this tho
top: 0
there's nothing special about it
in fact, the whole position thing is absolutely useless
it's just on top of the div
excuse the artists rendering, but you make the div where the squiggle lives look like this:
the red lines are the squiggle, and the gradient transition is hidden by the squiggle
that way, the top looks like it matches the element above, and the bottom below the squiggle looks like it matches the squiggle
but it's just one of many ways you can do this, and not even necessarily the best
that's a sensible way to do it, if everything is the same background
i would do the same that the arc team did
I agree that's probably the best, yeah. I just hate making SVGs 🤣
no it's inside of the div
at the top
it's just 2 divs
one next to the other
c-j is the bottom div and the svg div is inside
understood
like you said
minus margin won't hurt so ima do that and put it as a construction site.
you don't need to do that
so what should i do ?
nothing
you can do absolutely nothing, and it still works
how ?
by not doing anything
then it looks like this !!
no position, no margin, no alignment, no padding ...
just do nothing
then, instead of
::before, use ::after
but on the parent
and set the svg fill to the same color as the next section's background colorcurves should be inside of bottom container
?
try it
it is gone
and the code?
you don't have
content and you made an useless div: just move the class to the other element and move the styles outside the nestingwhat do you mean by content ?
can you show me ?
this is the code for that sorry i was testing somethin' earlier
look at the selector
the first one
selector ?
which
^
you mean bottom ::after ?
what's wrong with that ?
after doesn't take elements
then should i give it to curves ?
if i do that then curves hides somewhere
it's not a "should" but a "must"
you have display grid on that one
site is done
thanks for the help guys
i appreciate it.
so, that means you got it to work?
Haha i just used margin-1em
I tried bro but it didn’t work 😭
it's a way to do it, for sure
what you mean ?
there's another way also ?
this entire post is many other ways to do it
please enlighten me
one of the ways was to do nothing at all
we went over several options last week when you posted this, I'm not really sure what else you expect?
let me create a codepen and show me what you meant !!
what i mean is to just throw an svg at the top
that's all
open it in this view
i didn't know how to put that svg in there as i directly used it in scss instead of putting it in html
i don't know how to do that please show me