CSS Card with hover animation and mobile fallback
ฝัง
- เผยแพร่เมื่อ 28 ก.ค. 2024
- Another fun animated card that I created: • Animated card with HTM...
Transition / Animation performance: / how-to-achieve-60-fps-...
⌚ 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
✉ www.kevinpowell.co/newsletter
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - 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 TH-cam channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: 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!
Ah yes my daily dose of front-end improvement! It shall grant me better jobs ahead. 📈
Creating your own things will result in a better career, not copying others.
26:59
Other TH-camrs: Move face-cam on recording software so we can see what they're doing
Kevin: padding-right it is
CSS only!
I just discovered your channel and it's extremely exciting to dive into all of your videos because of how detail oriented you are in explaining what and why you do something. Even when you don't fully explain something, you throw us a lead for us to Google. Thanks a heap, Kevin!
12:11 "Click the card there if you wanna die".
Thanks for the lesson professor, very appreciated, but I'm not clicking that card!
he meant dive 😂😂😂
Legal encontrar você aqui, curto muito teu canal.
That was a hell of a lesson. 99% of the tutorials indeed end on UI elements coming together, and that will be all.
Great Job, Kevin. Love your work. Thank you very much.
This video was super helpful and I’ve learned a lot! I’m trying to get back into web dev after stepping back for the last 7 years for family, and a lot has changed!!! watching this and others of yours has really given me the confidence that I can get my career back on track and know what I’m doing again. Thank you.
I never even thought about tabbing on a card or if someone had animations turned off!
This is the first time I'm this early to one of your videos, as I discovered your channel just last week. And you're already helping take my css to another level. Thank you so much for your content!
The hover media query, focus-within pseudo-class, and reduced motion media query are awesome!
Fantastic walkthrough, I love how you went about it a little more realistically. I'm always a huge fan of your explanations behind why things work in the way they do, it really helps when it comes time to actually apply whatever it is into my own projects. Thanks, Kevin!
please make more of these! these are perfect for strengthening my css skills. tyvm!
I really enjoyed the tutorial, took me longer than usual to eventually get it right, and I want to try the Animated Card next. Thank you Kevin for the really educational, informative and fun video. I look forward to seeing more videos and hopefully expand my knowledge on CSS. You are awesome!
Hey Kevin, I'm more off a backend development but always watch your videos to improve a little bit of my css skills. You have amazing teaching skills, also super clear and to the point. Thanks for all the content!
Thanks for an excellent video, Kevin! :) You've really helped me this past year, inspiring me to become more creative in my front end solutions, and your attitude towards learning is so wholesome and easy-going that I find it very easy to understand your topics. I am starting my first full-stack job right now, and I will be taking your css/js-tips with me! Thanks
I totally like the way you explain things and the line of thought to get thru all the required steps, great work and thank you so much
It has been so long since I have touched anything related to programming, it's so cool that you can now do such things just with CSS.
Awesome content!
Every time you drop a new video, I watch it and then go spend hours modifying every site I've made to reflect things I've learned
Superb videos! Absolutely LOVE them
Thank you so much!
When you said you had a lot of editing, I didn't expect an amazing 50 minute video on animated cards! It even has 5 animated TH-cam cards throughout haha
Haha, yeah it was a longer one to put together, but I had fun with it :)
Great tutorial! I like the fact that you actually run into problems. It becomes very much a realistic scenario one probably will have.
I am literally doing this in my project right now and oh boy was I looking for a video like this. Thanks a lot!
Loved this one Kevin! Most tuts online solve the overlay with absolute positioning, however your transform solution was a loooot cleaner. Thanks a bunch!
I just discovered your channel like yesterday but I've watching your vids non-stop. Your tutorial is spot on and super easy to unserstand, super thoughtful. I felt like you should have 1M subs compare to other channels that I've watched. What's an underrated channel. Thanks very much sir.
Next level tutorials!!
I noticed the first bit of the video had a lot of echo, but once you dove into the code, your audio was perfect.
Amazing video Kevin, it is super interesting and so well explained. Thank you so much for make me love CSS being a backend developer :).
Your tutorials is always outstanding. Thanks so much Kevin for making youtube fun.
Nothing better than start the day with some daily dose of animation and css
This was amazing, very interesting and fun to watch!
This was a very informative and helpful video. Looking forward to seeing more such videos!
we can use *transparent* in linear gradient.
I use something similar to this 👇
background : linear-gradient(transparent 20%, rba(0,0,0,0.75) 90%);
Man I'm watching this to relax after a long day of front ahah, and this is truly amazing, thanks for your work, inspires me a lot
I just needed to show my appreciation for this channel I am learning a lot, really thanks.
I really learnt a lot of this video! Thank you Kevin!
I'm starting my first job as a developer in June and am preparing for it by watching your helpful videos.
@Kansai Japan Walker Great, thank you. Of course it is a struggle with the imposter syndrome from time to time but it is also a constant increase in skill and knowledge.
The best meaningful CSS tutorial that cares about a11y and other situations. Thank you for your awesome work.
Fantastic content as always Kevin! I learn something new every time even when I think there's nothing left to learn with CSS. This time the @media (hover). A great little tool to remember for the future.
That was really nice. Thanks man. You are doing very good job !
This is AWESOME Kevin, thank you very much for this content
Awesome video, learnt so much! Thank you!
@media(hover) - where have you been all my life?!? What an awesome tutorial!
I love watching other channels creating these wild animations, but I don’t implement them because of various a11y & mobile concerns. I think you’ve just resolved every single one of them in this video.
Instant sub. Thanks for the great content!
Gosh, I love your videos. Very nice tutorial. I realy like how you play with the delays.
Seriously, I never thought this deep. Thanks for this awesome lesson.
Such amazing implementation, You got your well-deserved sub! Btw these videos helped me a lot :D
Great stuff. SO much better than multiple media queries
I'm a beginner web designer (just learning as a hobby for now, but hope to get good enough for a career transition in the future) and I just wanted to say even though there's a lot being covered here which I don't know or understand I'm just super impressed and fired up seeing what's possible, and what I might be able to accomplish some years from now if I keep learning! Really great stuff! Actually ended up applying 'card:hover > transform: scale' to a very simple webside I am working on just to spruce it up a bit and make it feel more interactive after seeing you do it here! I'm a long way away from tackling some of the more challenging concepts, but even simple things like that have made a big difference for me!
YOU'RE THE BEST KEVIN! THANKS FOR THIS AMAZING AND 100% USEFUL CHANNEL. THIS CHANNEL IS AN ABSOLUTE GEM
love what you do Kevin
Hey Kevin, love the videos. Especially this one.
Incredible tutorial Kevin. Thanks!
PLEASE PLEASE PLEASE keep doing this videos! This is awesome
One thing I've been a fan of lately is doing a --transition variable which is just the second half of the transition syntax (leaving off what is being transitioned) - so I do --transition: .2s ease-in-out; which then lets me do things like transition: color var(--transition) and then later in my CSS do transition: background var(--transition) which equates to even transitions throughout the site!
I learned so much. Thank you. This is amazing stuff.
Blimey Kevin - you truly are a CSS God!
I'm finding the more you learn, the more there is to learn 😩
I love this content, thank you man
So many good tips in here. Really good stuff.
Mind blowing video. Many many new things learned.
Awesome explaination 😍😍😍 so so interesting 👌 thanks a lot Kevin for this 😀😀
His videos are always awsm. It shows his expertise in web Dev.
I really liked the way you code it in steps where "you figured out" that it doesn't work on mobile and fix it afterwords!
That is the situation for me most of the time, and it's frustrating where I often redisgn the whole thing. But knowing these "tricks" will hopefully reduce the redesigning. 🙂
incredible tutorial, thanks Kevin!
You're great at explaining CSS!
Great job Kevin. As usual, I learned alot.
Amazing video !! Learnt a lot. Thank you !!
Awesome video. Thank you.
Nice one Kev! A lot of good CSS features wrapped up in one ! I mean no more comma's :O hover media query's!! and that elegant use of selectors!! I always assumed that you couldn't use hover and ::after together ! Thank man great fun
Outstanding lesson, and a very important one as the web is now accessed more and more on mobile devices, perhaps more than PC's nowadays.
I learned a lot of things with this video , thanks Kevin
Omg I've never seen anyone explain css like you you really make the css easier
Damn it. I discovered you few days ago. You’re awesome! Thanks for the explanation !
omg, im programer student in brazil, and this guy is helping me a lot with my css learning, thanksssss
I'm an embedded systems developer, but you sparked my passion for front end develpment. It's my new hobby now.
So glad to hear that!
great video friend, I really liked the animations and I learned a lot about them too, thanks for encouraging them to make everything easier :D greetings from Argentina
Beyond just basics. Great Kevin 👍👌
I have just subbed. I want to switch from data science to dev. I will be watching your vids a day just to groove my front end.
Awesome tips, thank you!
great its help a lot in responsive layout
Thank u mr Kevin
really useful content
Just amazing
Thanks, Kevin! :)
Awesome!
Thanks for the last 10 minutes espacially :)
THIS is a great video solving real-world challenges making sites more attractive. I design city and county websites and we are often looking for new ways to create "Services Panels" or "Cards" in this case. Very timely and useful. Thank You.
Really nice video very informative, some css property I know but not used yet... Now I use it...Thank you for sharing...
Thanks for this guide, very informative. Subscribed!
This is amazing!
Thank you that was very helpful.
Definitely the best channel for beginner web developers
Looooved this video! 🙏🏻
I mean, that's awesome! Of course, SASS is a saviour in those (ie. all) scenarios
it's so helpful and your voice is amazing
Thanks Kevin, very nice animation. Tomorrow I’ll suggest this animation to my designer 😁. By the way cool DJI drone on picture.
this is amazing, thank you very much for sharing this, you may not like being called the king of css, but you have been dubbed by us, your fans, the king of css
I'm still at the logarithm and logic phase, but these videos will help a lot in the future. Thanks a lot.
THANK YOU SO MUCH !
Thanks! I really learn a lot!
Great great great tutorial. Thank you for your efforts.
Amazing video KEVIN, and I realized how time-consuming and nerve-wrecking this job is...
Learned alot from this video...idk these many thing about media query...
You’re awesome CSS master!
Kevin, if it wasn't for you. I wouldn't know CSS, keep up the great work. Just know you're changing peoples lives/careers. Thank you.
You are great man !
this is amazing
Cool video. If you want to wrap your content with an element, you can highlight the block of code, bring the command palette and type "wrap with abbreviation". And then you write emmet. Something like ".card-content > .something-else"