Submitted 8 months ago

Stats Card usando flex e grid

João Paulo• 70

@JoaoPaul-S

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

O projeto foi bem fácil, inicialmente usei apenas flex, mas com o grid alguns pequenos problemas foram resolvidos, o único que restou foi quanto a coloração da imagem pra isso usei um overlay com a cor fornecida pelo arquivo do desafio, mas ficou diferente acho que tem a ver mais com a saturação da cor mas não conseguir fazer funcionar, a forma que fiz está correta? Há uma forma melhor de fazer? e quanto a saturação de cor nas imagens tem como mexer com isso?

Community feedback

Sean Buckle• 410

@seanbuckle

Posted 8 months ago

In this particular example, colour saturation is not needed.

I would recommend the following:

Remove the .overlay
Add background-color: var(-accent-color); to .workspace
Remove background-color and opacity from img
Add mix-blend-mode: multiply; to img

Here is a link for mix blend mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

Marked as helpful

João Paulo• 70

@JoaoPaul-S

Posted 8 months ago

@seanbuckle Thank you very much, until now I had never seen this property, the whole problem was solved, really thank you, it will help me a lot in the future

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