Stats Preview Card Using Component using SASS initialized with Nodejs
Design comparison
Solution retrospective
Do you know of any other functions that you personally use to make life easier? I really had fun creating a simplified SASS file here for convenience functions. The absence of partials is as intended because of the simplicity of this challenge so I would like to receive any feedback aside from that.
Community feedback
- @NegligencePosted over 2 years ago
Do you guys have other alternatives for accurately getting the image to have the exact same color filter as the design? Although I'm already plenty content with the output from my solution, but it's not quite the same as the design and it won't hurt to try learning from other methods.
For context, I used a
::before
pseudo-element and blended the image with themix-blend-mode
property. This yielded better results in my opinion, but it came at the cost of trial-and-error -- trying out every mix-blend-mode value available to find the best results. 😅&::before { grid-area: img; justify-self: normal; content: ''; background-color: var(--accent-color); mix-blend-mode: multiply; } > img { grid-area: img; height: rem(240px); object-fit: cover; }
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord