componente do cartão devisualização de estatísticas principal
Design comparison
Solution retrospective
Project completed! All projects I am doing in my own way, after completing this project, I looked at the other solved ones and noticed that I can make the HTML code smaller. But I decided to leave it my way and apply this code reduction in the next projects.
My biggest difficulty was to put the color on the image, I couldn't find a solution, so if anyone has a tip just comment.
I'm open to suggestions and improvements in my code.
Persistence is the path to success 🚀💻
Community feedback
- @AdrianoEscarabotePosted about 2 years ago
Oi Pedro Salviano, tudo bem?
Gostei bastante do resultado do seu projeto, mas tenho algumas dicas que acho que você vai gostar:
Uma dica que meu amigo @correlucas me falou, para resolver o seu problema é:
- Para se aproximar do efeito de sobreposição na foto, é melhor você usar o modo mix-blend-mode. Tudo que você precisa é o div sob a imagem com esta cor de fundo: hsl(277, 64%, 61%); e aplique
mix-blend-mode: multiply;
eopacity: 80%;
na img ou seletor de imagem para ativar a sobreposição mesclando a imagem com a cor da div. Veja o código abaixo:
img { mix-blend-mode: multiply; opacity: 80%; }
o resto esta otimo!
espero que ajude... 👍
0 - Para se aproximar do efeito de sobreposição na foto, é melhor você usar o modo mix-blend-mode. Tudo que você precisa é o div sob a imagem com esta cor de fundo: hsl(277, 64%, 61%); e aplique
- @QBERT18Posted about 2 years ago
Hey nice work! I have a suggestion about your color problem. Here is a one way to solve it. Just add :after to you box, set top and left to 0 and give width and height 100% so it fits the original element. Then give the box a color and opacity. Don't forget to set content: "". Without the content property the before and after elements don't work. Your code should look like this .img-box:after { content: ""; position: absolute; left: 0; top: 0; width 100%; height: 100% background-color: purple; opacity: 0.5; } this is the basic way. There are other ways to set opacity to the color. But again google is your friend ;) Let me know if that helped you. Best Regards Q-bert.
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