Animated card with HTML & CSS | Tutorial
One of the best ways to learn is to find fun designs on existing websites and to try and recreate them, so with that in mind, we're taking the animated card design from the Top Games section over at https://popdog.com and seeing if we can recreate it with only HTML and CSS!
/// LINKS
Clip-path maker: https://bennettfeely.com/clippy/
UI Faces: https://uifaces.co/
/// Timestamps
00:00 - Introduction
01:17 - Overview
02:18 - HTML
13:57 - CSS basic setup
15:35 - styling the front
28:24 - front and background hover
38:15 - animating the game name
42:43 - the rank
46:33 - styling the back
1:00:14 - fixing the spacing
1:05:31 - fade-up and in for the back
#css #transitions #animations
--
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!
On this page of the site you can watch the video online Animated card with HTML & CSS | Tutorial with a duration of hours minute second in good quality, which was uploaded by the user Kevin Powell 19 August 2020, share the link with friends and acquaintances, this video has already been watched 174,672 times on youtube and it was liked by 6 thousand viewers. Enjoy your viewing!
