FCC design question

FCC design question
0

#1

Hi there,
I’m curious about the separation line between the presentation and the challenge on every FCC challenge:

bar

How is it done ? (Especially the changing thickness)
Thanks!


#2

It could be done in multiple ways:

  • An <hr> tag (probably this way)
  • A <div> element with a width, height and background color
  • A border-bottom

#3

Thanks @b3u, I should have mentioned that this is the changing thickness which makes me curious.


#4

I think you can put an absolute div above a hr (or probably a css :after selector) with a gradient that goes from full opaque in the left to full transparent in the center and back to full opaque in the right. Just guessing though, you can take a look at your browser inspect element to see how it is done.


#5

You’re absolutely right @ghukahr, I’ve found this in the source

background-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.7),hsla(0,0%,100%,0))

Thanks!