CSS Card with hover animation and mobile fallback
>> YOUR LINK HERE: ___ http://youtube.com/watch?v=5DEq5cWNYt8
Another fun animated card that I created: • Animated card with HTML CSS | Tutorial • Transition / Animation performance: / how-to-achieve-60-fps-animations-with-css3 • ⌚ Timestamps • 00:00 - Introduction to the project • 00:52 - The HTML • 03:40 - Starting the CSS • 08:47 - New HSL Syntax and gradients • 11:35 - Adding the pseudo-element • 17:32 - Styling the button • 19:19 - Little details • 21:50 - The animations • 31:23 - Timing the animations • 34:18 - Fixing keyboard navigation • 40:45 - Making it work on mobile • 46:01 - prefers-reduced-motion • #css • • -- • • Come hang out with other dev's in my Discord Community • 💬 / discord • • --- • • Keep up to date with everything I'm up to • ✉ https://www.kevinpowell.co/newsletter • • --- • • Help support my channel • 👨🎓 Get a course: https://www.kevinpowell.co/courses • 👕 Buy a shirt: https://teespring.com/stores/making-t... • 💖 Support me on Patreon: / kevinpowell • • --- • • My editor: VS Code - https://code.visualstudio.com/ • • --- • • I'm on some other places on the internet too! • • If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. • • Instagram: / kevinpowell.co • Twitter: / kevinjpowell • Codepen: https://codepen.io/kevinpowell/ • Github: https://github.com/kevin-powell • • --- • • And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
#############################
