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!
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!
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; }
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!
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.
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.
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 UA-cam cards throughout haha
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!
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 UA-cam lesson. Definitely an asset to my skill-set now.
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!
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 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.
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 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!
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!
@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!
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!
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
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!
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"
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.
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
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
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 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.
One of the better web developers I've come across in a long time. One thing I would be curious about is how to deal with mobile phones that have a stylus as I believe that would fall under the hover. I tried your code and on my Samsung Galaxy w/ a stylus, the content is hidden until I click on it.
You can fix the glitch when tab focusing by removing the transition delay too. Now, when you tab focus, the button is on the very bottom of the card, not the 1.5em above bottom, so it first snaps to position where button is visible, and then after 500ms "animates" to where you want it to be.
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)
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.
hahahahah. ive been crying inside because it all was working after finishing the video, then i went to have lunch and when i came back my card content was always showing on firefox, but working fine on chrome. I made a lot of google searches, edited the code and looked in the comments, and finally, after 30 minutes or so, I decided to close firefox and reopen it and it works. damn it!
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
Always nice to watch your content. my 50cent: - 24:38 could set an other helper variable like "- -seconds" and "--ease" - "image-rendering: pixelated;" in class card could fix the aliasing effect of the background (all) image(s) inside the card container.
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
26:59
Other UA-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!
The hover media query, focus-within pseudo-class, and reduced motion media query are awesome!
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!
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%);
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!
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;
}
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!
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.
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.
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.
please make more of these! these are perfect for strengthening my css skills. tyvm!
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 UA-cam cards throughout haha
Haha, yeah it was a longer one to put together, but I had fun with it :)
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!
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 UA-cam lesson. Definitely an asset to my skill-set now.
yo
That overflow: hidden; just helped me on a basic project i’m doing
omg, im programer student in brazil, and this guy is helping me a lot with my css learning, thanksssss
The best meaningful CSS tutorial that cares about a11y and other situations. Thank you for your awesome work.
Definitely the best channel for beginner web developers
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!
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.
YOU'RE THE BEST KEVIN! THANKS FOR THIS AMAZING AND 100% USEFUL CHANNEL. THIS CHANNEL IS AN ABSOLUTE GEM
I'm still at the logarithm and logic phase, but these videos will help a lot in the future. Thanks a lot.
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
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. 🙂
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!
PLEASE PLEASE PLEASE keep doing this videos! This is awesome
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.
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 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!
His videos are always awsm. It shows his expertise in web Dev.
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!
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.
@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!
Mind blowing video. Many many new things learned.
Omg I've never seen anyone explain css like you you really make the css easier
This is AWESOME Kevin, thank you very much for this content
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!
I mean, that's awesome! Of course, SASS is a saviour in those (ie. all) scenarios
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
That was really nice. Thanks man. You are doing very good job !
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!
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!
Seriously, I never thought this deep. Thanks for this awesome lesson.
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"
Beyond just basics. Great Kevin 👍👌
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.
I just needed to show my appreciation for this channel I am learning a lot, really thanks.
Your tutorials is always outstanding. Thanks so much Kevin for making youtube fun.
You are literally the King Of CSS.
Great stuff. SO much better than multiple media queries
Damn it. I discovered you few days ago. You’re awesome! Thanks for the explanation !
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.
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
Blimey Kevin - you truly are a CSS God!
I'm finding the more you learn, the more there is to learn 😩
I learned so much. Thank you. This is amazing stuff.
Realy usefull Kevin. Loking forward to use more complicated animations on production. So far i have used to disable hovers on media (min-width)
Incredible tutorial Kevin. Thanks!
thanks Kevin god bless u for uploading this amazing css tutorial....from India...
Learned alot from this video...idk these many thing about media query...
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: ua-cam.com/video/YmyqlM13JUU/v-deo.html
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
Awesome video, learnt so much! Thank you!
Really nice video very informative, some css property I know but not used yet... Now I use it...Thank you for sharing...
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
Amazing video Kevin, it is super interesting and so well explained. Thank you so much for make me love CSS being a backend developer :).
Amazing video KEVIN, and I realized how time-consuming and nerve-wrecking this job is...
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.
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.
So many good tips in here. Really good stuff.
One of the better web developers I've come across in a long time. One thing I would be curious about is how to deal with mobile phones that have a stylus as I believe that would fall under the hover. I tried your code and on my Samsung Galaxy w/ a stylus, the content is hidden until I click on it.
Awesome explaination 😍😍😍 so so interesting 👌 thanks a lot Kevin for this 😀😀
This was a very informative and helpful video. Looking forward to seeing more such videos!
I learned a lot of things with this video , thanks Kevin
Great job Kevin. As usual, I learned alot.
I’m impressed with the level of detail you put into this thing.
This is going to be very useful for my personal blog :)
Hey Kevin, love the videos. Especially this one.
You can fix the glitch when tab focusing by removing the transition delay too. Now, when you tab focus, the button is on the very bottom of the card, not the 1.5em above bottom, so it first snaps to position where button is visible, and then after 500ms "animates" to where you want it to be.
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)
very cool, @media (hover) is the most awesome thing I learned from this video
Thank u mr Kevin
really useful content
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.
Nothing better than start the day with some daily dose of animation and css
great its help a lot in responsive layout
You're great at explaining CSS!
This was amazing, very interesting and fun to watch!
Gosh, I love your videos. Very nice tutorial. I realy like how you play with the delays.
hahahahah. ive been crying inside because it all was working after finishing the video, then i went to have lunch and when i came back my card content was always showing on firefox, but working fine on chrome. I made a lot of google searches, edited the code and looked in the comments, and finally, after 30 minutes or so, I decided to close firefox and reopen it and it works. damn it!
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
sweet tutorial, your efforts are much appreciated. @media (hover) { gave me chills }
From one Kevin to another, Can we get more Intermediate-Advanced videos? Thanks!
Always nice to watch your content.
my 50cent:
- 24:38 could set an other helper variable like "- -seconds" and "--ease"
- "image-rendering: pixelated;" in class card could fix the aliasing effect of the background (all) image(s) inside the card container.
You’re awesome CSS master!
Thank you. I'm watching you well. :D
Why did I not know about this channel before? i would have made life much easier when I was working on a website assignment for my university class
the best video ever, watched the full video!