CSS Card with hover animation and mobile fallback

Подписаться 915 тыс.

Просмотров 465 тыс.

50% 1

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 RU-vid 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!

Опубликовано:

7 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 343

@welikerosafloyd 3 года назад

26:59 Other RU-vidrs: Move face-cam on recording software so we can see what they're doing Kevin: padding-right it is

@meetprajapati6329 2 года назад

CSS only!

@ThiagoVieira91 3 года назад

Ah yes my daily dose of front-end improvement! It shall grant me better jobs ahead. 📈

@atlantic_love 7 месяцев назад

Creating your own things will result in a better career, not copying others.

@p20ph37 3 года назад

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!

@welikerosafloyd 3 года назад

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!

@BehruzbekOtayev 3 года назад

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.

@AlleyDev 3 года назад

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!

@GregSkriloff 3 года назад

The hover media query, focus-within pseudo-class, and reduced motion media query are awesome!

@Brandon-sr4qp 3 года назад

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!

@heisthazey7311 3 года назад

please make more of these! these are perfect for strengthening my css skills. tyvm!

@iclazion 3 года назад

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!

@lpnando 3 года назад

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!

@wqerqwerqwer1 2 года назад

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

@parthkharwar69 3 года назад

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!

@hannesqvarnstrom8361 3 года назад

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

@SoNyXDNB 2 года назад

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!

@okijohn7153 2 года назад

Your tutorials is always outstanding. Thanks so much Kevin for making youtube fun.

@MicrolabMusic 3 года назад

Great tutorial! I like the fact that you actually run into problems. It becomes very much a realistic scenario one probably will have.

@diegomarzo4001 3 года назад

Amazing video Kevin, it is super interesting and so well explained. Thank you so much for make me love CSS being a backend developer :).

@ShomudroGupto 2 года назад

Loved this one Kevin! Most tuts online solve the overlay with absolute positioning, however your transform solution was a loooot cleaner. Thanks a bunch!

@quocbao6046 3 года назад

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.

@jradplowman 3 года назад

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.

@buckyelkentucky 3 года назад

This was amazing, very interesting and fun to watch!

@PirateGrape 3 года назад

I am literally doing this in my project right now and oh boy was I looking for a video like this. Thanks a lot!

@bulatvitalie8170 2 года назад

That was really nice. Thanks man. You are doing very good job !

@AmitKumar-bz6we 3 года назад

This was a very informative and helpful video. Looking forward to seeing more such videos!

@felipecabreira4321 3 года назад

Nothing better than start the day with some daily dose of animation and css

@aincatoni 3 года назад

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

@zachjensz 3 года назад

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 RU-vid cards throughout haha

@KevinPowell 3 года назад

Haha, yeah it was a longer one to put together, but I had fun with it :)

@RideTheTeacups Год назад

@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!

@hasanfares5774 3 года назад

I just needed to show my appreciation for this channel I am learning a lot, really thanks.

@developerpranav 2 года назад

Such amazing implementation, You got your well-deserved sub! Btw these videos helped me a lot :D

@jasonma1904 2 года назад

The best meaningful CSS tutorial that cares about a11y and other situations. Thank you for your awesome work.

@craigmillerer 3 года назад

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.

@istiakjisun9233 8 месяцев назад

YOU'RE THE BEST KEVIN! THANKS FOR THIS AMAZING AND 100% USEFUL CHANNEL. THIS CHANNEL IS AN ABSOLUTE GEM

@JuanCastro-C 2 года назад

This is AWESOME Kevin, thank you very much for this content

@RockcomLegendas 3 года назад

12:11 "Click the card there if you wanna die". Thanks for the lesson professor, very appreciated, but I'm not clicking that card!

@kuldeep130 2 года назад

he meant dive 😂😂😂

@alyssandro4343 2 года назад

Legal encontrar você aqui, curto muito teu canal.

@MVIVN 2 года назад

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!

@t20sgrunt36 3 года назад

Great stuff. SO much better than multiple media queries

@bishalshrestha9795 3 года назад

Seriously, I never thought this deep. Thanks for this awesome lesson.

@GoWokeGoBroke1 3 года назад

PLEASE PLEASE PLEASE keep doing this videos! This is awesome

@westonpeabody8010 3 года назад

Hey Kevin, love the videos. Especially this one.

@ZackPyle 3 года назад

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!

@luiscolome75 3 года назад

Gosh, I love your videos. Very nice tutorial. I realy like how you play with the delays.

@AngaarUriakhil 2 года назад

Incredible tutorial Kevin. Thanks!

@BristlyBright 3 года назад

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.

@BristlyBright 2 года назад

@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.

@genehenson8851 3 года назад

So many good tips in here. Really good stuff.

@Matrium0 Год назад

Awesome video, learnt so much! Thank you!

@jimmyj.6792 3 года назад

Awesome explaination 😍😍😍 so so interesting 👌 thanks a lot Kevin for this 😀😀

@twb0109 3 года назад

You're great at explaining CSS!

@cherryfuchs 2 года назад

I learned so much. Thank you. This is amazing stuff.

@markrobbins6985 2 года назад

Great job Kevin. As usual, I learned alot.

@JoolsParker 3 года назад

Blimey Kevin - you truly are a CSS God! I'm finding the more you learn, the more there is to learn 😩

@pax_life 2 года назад

Damn it. I discovered you few days ago. You’re awesome! Thanks for the explanation !

@devanshgarg31 3 года назад

His videos are always awsm. It shows his expertise in web Dev.

@dipenparmar2273 3 года назад

Beyond just basics. Great Kevin 👍👌

@JamieMaguire_ 2 года назад

incredible tutorial, thanks Kevin!

@emanuelmamani3444 2 года назад

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

@shaileshdeshpande8539 3 года назад

Mind blowing video. Many many new things learned.

@Nappse 3 года назад

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. 🙂

@riebeck1986 3 года назад

Amazing video !! Learnt a lot. Thank you !!

@chma0 2 года назад

Omg I've never seen anyone explain css like you you really make the css easier

@nataliabujnowicz1454 3 года назад

Awesome!

@josvelema2362 3 года назад

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

@rrd_webmania 3 года назад

Thanks for the last 10 minutes espacially :)

@jlopekkos2164 2 года назад

I learned a lot of things with this video , thanks Kevin

@tiko3316 3 года назад

Thanks for this guide, very informative. Subscribed!

@dalicodes 3 года назад

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.

@carlosffm 2 года назад

Definitely the best channel for beginner web developers

@dashti812009 3 года назад

Thanks Kevin, very nice animation. Tomorrow I’ll suggest this animation to my designer 😁. By the way cool DJI drone on picture.

@shahriajamankhan1760 3 года назад

love what you do Kevin

@jiyoungkim9258 2 года назад

it's so helpful and your voice is amazing

@martinmartin4958 2 года назад

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

@kaike6438 Год назад

omg, im programer student in brazil, and this guy is helping me a lot with my css learning, thanksssss

@JohnMcKown15 3 года назад

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.

@Morrile1 3 года назад

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.

@vdphotosnfun 2 года назад

Really nice video very informative, some css property I know but not used yet... Now I use it...Thank you for sharing...

@danielcir8675 3 года назад

Amazing video KEVIN, and I realized how time-consuming and nerve-wrecking this job is...

@sajedsoliman4780 2 года назад

Thank u mr Kevin really useful content

@TheDopeJackalope 3 года назад

I love this content, thank you man

@AH-cf9cv 3 года назад

thanks Kevin god bless u for uploading this amazing css tutorial....from India...

@nro337 3 года назад

Awesome tips, thank you!

@merkyboy 3 года назад

You are literally the King Of CSS.

@CZghost Год назад

This is going to be very useful for my personal blog :)

@BrentDanley 2 года назад

Awesome video. Thank you.

@MrLewy192 3 года назад

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.

@saxmimmo 3 года назад

I mean, that's awesome! Of course, SASS is a saviour in those (ie. all) scenarios

@maurolimaok 2 года назад

I'm still at the logarithm and logic phase, but these videos will help a lot in the future. Thanks a lot.

@MrBaykalcelik 3 года назад

Great great great tutorial. Thank you for your efforts.

@OrincyWhyteDesigns 2 года назад

That overflow: hidden; just helped me on a basic project i’m doing

@aleemjaved4420 2 года назад

great its help a lot in responsive layout

@BenmaxTranslate 3 года назад

As a full-stack dev interesting seeing someone enjoying working with css this much, keep up the good work! Also "keep the code in order" oh sir, yu don't want to see my spaghetti code, instant heart attack, even I can lost in it who wrote that. (PHP mostly)

@MrKoNtI1 3 года назад

Realy usefull Kevin. Loking forward to use more complicated animations on production. So far i have used to disable hovers on media (min-width)

@go6ko1 3 года назад

Thumbs up for the guide! 22:60 If anyone is trying to minimize the blur while hover-scaling adding an extra class to the card (ex: ) and then adding the bit bellow will drastically improve it. I tried playing around with these (and many more properties), however the only approach that worked so well, is when I added them, by themselves to a separate class. .card-blur { transform: translate3d(0, 0, 0); backface-visibility: hidden; will-change: transform; }

@lokesh3526 2 года назад

Learned alot from this video...idk these many thing about media query...

@ccr4igg 2 года назад

Thanks, Kevin! :)

@amankaushik5833 2 года назад

Thank you that was very helpful.

@yousifal-raheem5061 3 года назад

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"