Can anybody tell me how to do this ? Is this grid use case ? And the gradient too ?
Let me know if you need the figma link
26 Replies
anybody ?
Need more info- is the inage if the person a png by itself? Are you using bg inage or <img>
The elements look like a two col grid with a bg image to me. Col 1 is the text and col 2 has the blurred playlist .
What have you tried? What hasn't worked? Can you share your code?
To me, though, it looks like two different sections:
1. The background
1. the playlist
The background is nothing special, just text and an image (maybe the album cover?). The playlist is a skinny
div that's absolutely positioned to be on top of the background. At a small enough viewport I can see the position: absolute going away so it stacks "background" on top and "playlist" below.I am stuck on the gradient
here is the figma
Can Figma not export to CSS?
Also, a quick internet search gave me https://cssgradient.io/ that I used to make the CSS for your gradient:
I literally copied the numbers from your SS
I think thats a premium feature like dev mod
this doesnt look like it chief
You probably need to have it in a container of some kind to keep it the right height
I have something like this if it helps you
isnt this how I should approach this ?
What's the CSS look like? Based on your SS you didn't restrict the height
but wouldnt that also squish my children or will it cause overflow which is ok I guess ?
i will try
lol how do I center this
background-position:center isnt helping
I am using tailwind
since you were asking about css
Here's a sample pen I came up with: https://codepen.io/13eck/pen/LEVapzR
Obviously it needs some tweaking, but it's a start
The important thing, I think, is that the
.colourful element is just there for the background. Don't put any content in it
I'm sure someone better acquanted with gradients will be by sometime to put me to shame :p@i_lost_to_loba_kreygasm please review #Asking Good Questions at some point...
I made it 4 grid instead
one for the text , one for the image , one for offset , one for playlist
this is good or close right ?
I did some tweaking to your gradient
but it would be great if you could tell me what you did ?
here is the finished or updated css
I don't think it's a linear gradient
IMO looks more like a background image gradient made in PS or something - you can see the red gradient in the bottom left
I think what you have now looks good though, just curious what it looks like when you resize the screen lol
doesnt look bad to me 🙂 , I just checked 😛 . I will host it for you to see later when I am done with this haha
CSS HD Gradients
Wide gamut Color 4 compliant CSS gradient builder.