Stats Preview Card | SCSS & Flexbox | Simple animation
Design comparison
Solution retrospective
Added a few simple animations purely as part of practice, I know they may be impractical but adds just that little bit of interactivity to the design.
Had some trouble finding the perfect blend-mode & filter, let me know if you have found the 'perfect' mix for that image. I ended up using:
mix-blend-mode: multiply; filter: opacity(0.8);
And set the background color of the div to the 'Accent' color from the style-guide.md.
Let me know anything I could improve on!
Community feedback
- @brasspetalsPosted over 3 years ago
Hi, Kris! 👋
Good job on this one! 👍 Your method for the image coloring is what I did as well, although I think I just used regular
opacity
rather than filter opacity. Don't think it matters either way.The animations are a nice touch, and I hope you had fun playing around with them. I find these smaller challenges are a great place to experiment with them.
1@krisp-devPosted over 3 years ago@brasspetals Thanks for the feedback! I spent more time than I should on the image coloring but it was worth it in the end to make it look as close to the original design as possible.
This was my 4th 'Newbie' challenge and felt like it was getting a bit 'stale' so decided to play around with some really simple animations trying to make it a bit more cool. Was fun to play around with the animations timing and delay to find the perfect combination of sequential animations.
1
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