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 RUclips cards throughout haha
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!
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.
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!
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!
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!
@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!
I honestly don't even care about the card animation anymore. When you made an element with a class using shorthand div.class it blew my mind and I switched over to Studio Code to try it. Why haven't I seen this before? Game changer.
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
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 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!
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
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.
tabindex="-1" as an attribute in the HTML .button element prevents the button from being reached with the tab button. Not to worry, I'm really glad I know about the focus-within pseudo element as well. Thank you, for real, for this RUclips lesson. Definitely an asset to my skill-set now.
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!
Loved this one Kevin! Most tuts online solve the overlay with absolute positioning, however your transform solution was a loooot cleaner. Thanks a bunch!
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!
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)
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 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. 🙂
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!
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; }
didn't see a youtube card on the final credits, don't know if it's only me, thanks a lot for the amazing content! media(hover) is going on everything from now on
I honestly think that one of the best parts of these tutorials is when you run into problems and have to fix them. Fixing problems in your build seems to be entirely a different skill in itself; and I guess it's something you have to face once you get out of tutorial prison and start experimenting with your own ideas.
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.
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.
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.
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
![Felix "Unfair" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/Oswujxm2Ag0/mqdefault.jpg)
26:59
Other RUclipsrs: Move face-cam on recording software so we can see what they're doing
Kevin: padding-right it is
CSS only!
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.
@@atlantic_love fair enough
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.
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 RUclips cards throughout haha
Haha, yeah it was a longer one to put together, but I had fun with it :)
The hover media query, focus-within pseudo-class, and reduced motion media query are awesome!
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!
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.
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!
YOU'RE THE BEST KEVIN! THANKS FOR THIS AMAZING AND 100% USEFUL CHANNEL. THIS CHANNEL IS AN ABSOLUTE GEM
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!
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!
please make more of these! these are perfect for strengthening my css skills. tyvm!
Definitely the best channel for beginner web developers
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!
@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!
The best meaningful CSS tutorial that cares about a11y and other situations. Thank you for your awesome work.
omg, im programer student in brazil, and this guy is helping me a lot with my css learning, thanksssss
I honestly don't even care about the card animation anymore. When you made an element with a class using shorthand div.class it blew my mind and I switched over to Studio Code to try it. Why haven't I seen this before? Game changer.
PLEASE PLEASE PLEASE keep doing this videos! This is awesome
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
His videos are always awsm. It shows his expertise in web Dev.
Mind blowing video. Many many new things learned.
That was really nice. Thanks man. You are doing very good job !
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.
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 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, love the videos. Especially this one.
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
Damn it. I discovered you few days ago. You’re awesome! Thanks for the explanation !
I am literally doing this in my project right now and oh boy was I looking for a video like this. Thanks a lot!
This is AWESOME Kevin, thank you very much for this content
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.
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
Great tutorial! I like the fact that you actually run into problems. It becomes very much a realistic scenario one probably will have.
I learned so much. Thank you. This is amazing stuff.
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 video, learnt so much! Thank you!
Great job Kevin. As usual, I learned alot.
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!
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.
Great stuff. SO much better than multiple media queries
tabindex="-1" as an attribute in the HTML .button element prevents the button from being reached with the tab button. Not to worry, I'm really glad I know about the focus-within pseudo element as well. Thank you, for real, for this RUclips lesson. Definitely an asset to my skill-set now.
yo
Omg I've never seen anyone explain css like you you really make the css easier
Beyond just basics. Great Kevin 👍👌
Incredible tutorial Kevin. Thanks!
You are literally the King Of CSS.
I’m impressed with the level of detail you put into this thing.
So many good tips in here. Really good stuff.
Your tutorials is always outstanding. Thanks so much Kevin for making youtube fun.
That overflow: hidden; just helped me on a basic project i’m doing
I'm still at the logarithm and logic phase, but these videos will help a lot in the future. Thanks a lot.
Seriously, I never thought this deep. Thanks for this awesome lesson.
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!
Loved this one Kevin! Most tuts online solve the overlay with absolute positioning, however your transform solution was a loooot cleaner. Thanks a bunch!
You’re awesome CSS master!
it's so helpful and your voice is amazing
I just needed to show my appreciation for this channel I am learning a lot, really thanks.
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!
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)
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
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
Amazing video KEVIN, and I realized how time-consuming and nerve-wrecking this job is...
I mean, that's awesome! Of course, SASS is a saviour in those (ie. all) scenarios
Awesome explaination 😍😍😍 so so interesting 👌 thanks a lot Kevin for this 😀😀
I learned a lot of things with this video , thanks Kevin
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.
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. 🙂
Blimey Kevin - you truly are a CSS God!
I'm finding the more you learn, the more there is to learn 😩
Amazing video Kevin, it is super interesting and so well explained. Thank you so much for make me love CSS being a backend developer :).
You're great at explaining CSS!
This was a very informative and helpful video. Looking forward to seeing more such videos!
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!
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;
}
Really nice video very informative, some css property I know but not used yet... Now I use it...Thank you for sharing...
You are awesome KP!!!! I love your content !!!!!!!!!!!!!!!!!!!!!!
Thanks, Kevin! :)
This is going to be very useful for my personal blog :)
didn't see a youtube card on the final credits, don't know if it's only me, thanks a lot for the amazing content! media(hover) is going on everything from now on
I did get a card, but in case anybody else sight, here's the link: ruclips.net/video/YmyqlM13JUU/видео.html
Such amazing implementation, You got your well-deserved sub! Btw these videos helped me a lot :D
I honestly think that one of the best parts of these tutorials is when you run into problems and have to fix them.
Fixing problems in your build seems to be entirely a different skill in itself; and I guess it's something you have to face once you get out of tutorial prison and start experimenting with your own ideas.
Thank u mr Kevin
really useful content
love what you do Kevin
This was amazing, very interesting and fun to watch!
Awesome video. Thank you.
Amazing video !! Learnt a lot. Thank you !!
Thanks for this guide, very informative. Subscribed!
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.
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.
Gosh, I love your videos. Very nice tutorial. I realy like how you play with the delays.
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.
Nothing better than start the day with some daily dose of animation and css
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
What a monster you are 👏🏽👏🏽
Kevin you are the best! Greetings from Argentina!
Thanks for the last 10 minutes espacially :)
Realy usefull Kevin. Loking forward to use more complicated animations on production. So far i have used to disable hovers on media (min-width)
the best video ever, watched the full video!
thanks Kevin god bless u for uploading this amazing css tutorial....from India...
Looooved this video! 🙏🏻
Just amazing