Submitted over 1 year ago

Stats preview card component main using grid

Shashikant•430

@shashikantdev3

Preview site View code

This is a solution for...Stats preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What I learned

In this project, I learned about blending colour with images. Below are the HTML and CSS codes.

          <div class="stats__image">

          </div>

.stats__image{

  background-image: url(./images/image-header-mobile.jpg);
  background-size: cover;
  background-color: var(--clr-soft-violet);
  background-blend-mode: darken;
}

Any recommendations, feedback and advice to improve my project or skills are welcome. :D

Community feedback

aaish•310
@aaishverPosted over 1 year ago
bro check for background color and select your color shade and then lower down the side color bar until it converts rgb to rgba(0, 22%, 0, 0.5) kind of this format or what you can do is if in case any rgb or hsl color given the input you just add the ", 0.5" in the end its same thing I told just by some written means
Marked as helpful
0
Shashikant•430
@shashikantdev3Posted over 1 year ago
@aaishver Thanks buddy, I will surely follow your suggestion.
0
visualdennis•8,375
@visualdennissPosted over 1 year ago
Your solutions looks great, both on mobile and desktop! Congrats on completing the challenge successfully.

Regarding background-blend-mode, i think darkening does not work here very well as it results in highlights with greyscale and purplish shadows. My suggestion would be instead background-blend-mode: multiply; which looks closer to the design in my opinion, but of course you can find more alternative as there are many more ways to do it :)

Hope you find this feedback helpful!
Marked as helpful
0
aaish•310
@aaishverPosted over 1 year ago
@visualdenniss like overlay css and div or if you have any suggestion for the image overlay I want to know please.
0
visualdennis•8,375
@visualdennissPosted over 1 year ago
@aaishver

No, no need to add overlay. You are used a background-blend-mode already, just change it from darken to soft-light or multiply for example e.g.

@media (min-width: 600px) .stats__image { grid-row: 1/2; background-image: url(./images/image-header-desktop.jpg); background-size: cover; background-color: hsl(277deg 100% 65% / 75%); background-blend-mode: multiply; border-bottom-right-radius: 0.5rem; border-top-right-radius: 0.5rem; border-top-left-radius: 0; }

if you can adjust this by changing the opacity of background-color.
0

Please log in to post a comment

Join 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