@darryncodes
Posted
Hi Stephen,
Your design looks really good and well done on getting the hover effect to work - it's tricky.
Box-shadow is hard to make it look good. This mdn resource explains really well what all the values mean.
Most people probably use box-shadow generators, this is a simple one and this one outputs the values in css variables which make the shadows look even better but is a bit more complex.
Hsppy coding!
Marked as helpful
0
@darryncodes you know, I saw that (the box-shadow generator) in a YouTube video, and I was going to try to use one but I didn't quite know how to get the desired effect for the project... so I ended up hand-coding it for my own, funny right? You'd think it would be the other way around.
@stevednick if you can figure out the generator thing... it would probably be easier. But, if you want to learn to do it by hand, I used the resource @darryncodes mentioned above and w3school to figure it out. Its just multiple box-shadows stacked on top of each other and shifted along the X and Y axis while lowering the opacity value at each layer.
It helps to use rgba or hsl for it since they take that 4th opacity value.
0