@tomthestrom
Posted
Hi Drallas,
here is how you could do it with linear-gradient
(and background layering):
- remove the element with
class="card-top"
- apply this to the element with
class="card"
:background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 39%, white 39% 100%), url(./images/bg-pattern-card.svg)
;
So basically you are:
- setting a gradient from top to bottom
- setting a background image on the element
- applying an opaque color from 0-39%
- the background image is visible in the 0 - 39% horizontal range through the opaque color
- the background image is covered with white in the 39 - 100% range.
Let me know if it's not clear.
Have a good day,
Tom
@Drallas
Posted
@tomthestrom
Thanks a lot Tom!
Couldn't reply quick, i needed first to find a moment to research it good, play with the values and document it properly .
Eventually i set this to the .card class. :
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0 37.5%, white 37.5% 100%), url(./images/bg-pattern-card.svg);
removed the card-top class, the empty div and the redundant css.
I also updated the my solutions and documented it more detailed in the readme.md on GH -> https://github.com/Drallas/Profile-Card-Component
@tomthestrom
Posted
@Drallas Glad it was helpful. :) Your repo looks really nice, I like how you go into details to explain what you're doing.
Take care,
Tom