How To Create Animated CSS Cards

FREE CSS Selector Cheat Sheet: https://webdevsimplified.com/specificity-cheat-sheet.html

CSS cards are one of the most popular design patterns on the web. There are hundreds of different styles of cards, but they all share a few things in common. In this video I will show you how to create 4 different card styles and most importantly explain how you can expand upon these card styles to create your very own card designs.

📚 Materials/References:

FREE CSS Selector Cheat Sheet: https://webdevsimplified.com/specificity-cheat-sheet.html Open Sans Font: https://fonts.google.com/specimen/Open+Sans GitHub Code: https://github.com/WebDevSimplified/css-cards Emmet Video: https://youtu.be/V8vizNQKtx0 CSS Units Video: https://youtu.be/-GR52czEd-0 HSL Video: https://youtu.be/EJtmfkKulNA CSS Variables Video: https://youtu.be/oZPR_78wCnY CSS Variables Article: https://blog.webdevsimplified.com/2020-02/css-custom-properties CSS Grid Video: https://youtu.be/9zBsdzdE4sM

🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com My Courses: https://courses.webdevsimplified.com Patreon: https://www.patreon.com/WebDevSimplified Twitter: https://twitter.com/DevSimplified Discord: https://discord.gg/7StTjnR GitHub: https://github.com/WebDevSimplified CodePen: https://codepen.io/WebDevSimplified

⏱️ Timestamps:

00:00 - Introduction 00:30 - Card Basics 03:30 - Header/Footer Card 09:45 - Shadow Card 11:40 - Card Grid 13:50 - Image Card 19:04 - Animated Image Card

#CSS #WDS #CSSCards ... https://www.youtube.com/watch?v=h2x4YTI6WeE