Submitted over 3 years ago

3-Column Preview Card - SCSS, Grid, CSS Animations (Desktop)

Anna Leigh• 5,135

@brasspetals

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

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

More animation practice! 😄 Hopefully the screenshot will be ok this time, as the animation is a bit faster than the stats card solution. The animations are only for the "desktop" layout. I think a similar but vertical, "slide down" animation for mobile would be lost on most users due to the smaller screen height and would also be too much movement for a small screen. Let me know what you think!

prefers-reduced-motion was used to prevent the animations from occuring for those who prefer motion reduced. I also added aria labels to the card links to make them a bit more descriptive, but I'm unsure if this is actually helpful for screenreaders or comes off as redundant. Still learning! 😅

Community feedback

Rayane• 1,935

@RayaneBengaoui

Posted over 3 years ago

Hello Anna,

Once again you came with a nice idea on animations 🙂

I really like the use of cubic bezier as a timing function to get this "coming back" effect at the end of the animation 😍

Just on your SASS part, instead of using @import with SASS, it's recommended to use @use because the first one is now deprecated.

You can find more information on the SASS official documentation (https://sass-lang.com/documentation/at-rules/import) where it's well explained. Also here is a great video of Kevin Powell that shows how to use it (https://www.youtube.com/watch?v=CR-a8upNjJ0).

Happy coding ! 😃

Anna Leigh• 5,135

@brasspetals

Posted over 3 years ago

@RayaneBengaoui Thank you! 😊

I'm currently using a VSCode extension to compile my Sass, so have to use @import. I'll admit I've been avoid making the switch. 😅 The video was excellent though, and very informative - thanks for sharing! I'll try to not be so lazy about it, and make the change for my next project. 😄

Rayane• 1,935

@RayaneBengaoui

Posted over 3 years ago

@brasspetals I was also using a live SASS compiler before but now I switched to Parcel for bundling and it's pretty convenient. 🙂

Here is another video of Kevin Powell on how to use Sass with Parcel (https://www.youtube.com/watch?v=wYWf2m_yzBQ) to get the auto refresh while coding.

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

Hello, Anna! 👋

It's nice to see you submit another challenge already! 😊 I was actually thinking about that same sort of animation for this challenge (but I guess I'll have to go brainstorming for something else when I come around to this one, LOL)! 😅 Of course—nice job! 👏 Everything's looking good and the animation's great! 😀

And keep coding (and happy coding, too)! 😁

Anna Leigh• 5,135

@brasspetals

Posted over 3 years ago

@ApplePieGiraffe I was thinking of doing the Bookmark challenge after I finish the one I've been "productively procrastinating" on with these last two challenges. I was looking at your Bookmark solution last night thinking basically the same thing, like "Dang! For this section I'll have to do something else" 😅. In fact the little "bounce back" effect on this one was added so it wouldn't look too similar to your pricing component animation.

Anyway, I'm sure you'll come up with something fantastic as usual. 😄 👍 Another version I had considered was having the top card come up first but on the far right, and then slide left, revealing the other two. Kind of like fanning out a deck of cards?

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

@brasspetals

Ooh, that's a good idea! 😀 I just might steal it! 😎

tediko• 6,680

@tediko

Posted over 3 years ago

Hello, Anna! 👋

Well done! Perfect animation, subtle but it brings some life to a project. I am big fan of animations and like to work with them, sometimes i know that I am exaggerating with them but at the end of the day its all just for fun ;) The only thing that i noticed in your project is outline for your button focus. Now outline-width is set to default 1px and it doesn't look good. I would consider to remove it since you change border/background while button is focused or change it to 2px instead.

Good luck with that, have fun coding! 💪

Anna Leigh• 5,135

@brasspetals

Posted over 3 years ago

@tediko Thank you! 😊 I'm trying to get more comfortable with animation. These smaller projects seem a good place to practice, and I feel they give me a little more freedom to "exaggerate", like you said, than I would on a larger project.

You're right, the outline could use a bit of work in the aesthetic department! 😅 I defintely want to keep it for accessibility though, despite the current hover/focus state being pretty obvious.

Yuri da Paz Simonin• 15

@yuridapaz

Posted over 3 years ago

Great. I love it

Anna Leigh• 5,135

@brasspetals

Posted over 3 years ago

@yuridapaz Thank you! 😊

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