Stats preview card component

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Himanshu! 👋

  Regarding the image overlay, I recommend using mix-blend-mode and then reducing the opacity of the img. For your reference (and the final result) you can see @DarrickFauvel's solution.

  Some feedback from me.

  • Use CSS to uppercase the text. The uppercased word in the HTML might be spelled by the screen reader (spelled letter by letter).
  • I recommend adding a max-width to the main element to prevent the card from becoming too large on wide screen sizes.
  • For the image, I suggest using picture element so you can show the mobile version and desktop version based on the media query.

  That's it! Hope you find this useful!

  3

  ---

  

  Himanshu Sahani•30

  @F-a-u-x-LPosted over 2 years ago

  @vanzasetia Thanks Vanza for your valuable feedback.

  Yes, I just got to know that we can use background: url() and mix-blend mode to implement the image in the desired manner. I was not aware of that we can use CSS to attach the images rather that using image tag in HTML.

  I will also keep in mind the other points that you have mentioned and implement it in the code and make mobile first layouts.

  Thank you, your feedback was really helpful.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @F-a-u-x-L You're welcome!

  If you are going to use background-image, then I suggest using background-blend-mode instead. 🙂

  0

  

  P

  Darrick Fauvel•490

  @DarrickFauvelPosted over 2 years ago

  @vanzasetia Thanks for the mention, Vanza!😊

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @DarrickFauvel No problem! I'm happy to promote your solution since mine it's not as good as yours. 😅

  1
• 

  Paul THEUREAU•120

  @Paul21777Posted over 2 years ago

  Hi !

  I have completed this challenge a few days ago and I had problems too implementing this purple color before the img. I think your solution is pretty clear ! I search on the web too and I could not figure out a best practice for this unfortunately.

  Personnaly, I used the filter property in order to play with opacity and then I tried to find the right amount of saturation to get a good look since getting 100% the same color than the design was impossible for me.

  Hope that helps and maybe someone here could give us the best pratice (if there is one...)

  Keep the good work !

  0

  ---

  

  Himanshu Sahani•30

  @F-a-u-x-LPosted over 2 years ago

  @Paul21777 I just found an alternate way You can leave the div empty and not use the <img> element rather you can use the background: url() property in CSS to implement the image and color I haven't changed the code yet but I am planning to do it that way now Will let you know once I change it

  1