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

webdevsimplifiedcss cardscss card responsive