Hello Kevin i am one of your Students. And I just want to Thank you from the Deepest part of my heart for all this Juicy CSS and Html Knowledge. YOU ARE MY FAVOURITE MENTOR for frontend. And You Successfully made me FALL IN LOVE WITH CSS. I Just LOVE all Your Videos, the way you teach makes everything Really easy to Understand.i Just wanna say I Love you(as a person). And you helped me a lot in my life, i am still learning a lot from you, and I hope you keep doing this.I REALLY REALLY APPRECIATE All The knowledge you are sharing with us. Thank you very much.
I swear to God kevin you made me fallen in love with CSS a long ago and still am the big listener to you man 😍 thank you for giving us the best time spending with CSS 👏 I love you to the God man ♥️😍 Keep going
I mean, you can do *everything* "without Javascript". If I'm doing "no-js" web stuff personally, I like to build with WASM, for example. However, the fun part of watching these videos is seeing a CSS wizard do it with *just CSS* which is a MUCH bigger deal than just doing it "without javascript". Nice job as always, Kevin.
Neat little trick and really liked your logic behind making it work using pure CSS. I need to put all of this stuff into practice. While I absolutely love your tutorials, I’m finding it difficult to learn just by watching. I think I need to start building things with some of these more advanced CSS properties/selectors. Thank you Kevin
Implementing things is so important. Watching is sort of like learning that things are possible, building stuff is how we learn how to actually do it though :)
Great tutorial, I'm looking into posting HTML/CSS tutorials on my channel too but its still quite far in my schedule. In the meantime, little tutorials like this one are great to remind me of all the possibilities you have with just CSS. Can't wait for the next tutorial!
Hello Kevin, i'm an Embedded dev and web things like HTML, CSS and JS have always been a pain for me. I bumped into you few days ago when i was searching for some videos about CSS and honestly, you are actually changing the perspective on how i look at CSS. It's not aversion anymore, i'd say it's more of a curiosity now. I haven't started with practicing HTML and CSS yet but i still enjoy watching your videos. So i'd like to thank you for that !
Another great video Kevin. I found it tricky to follow along at home. Here's my minor nitpicks while debugging my code - You renamed a variable to --rotateX in the video, but in the codepen it's labelled --rotationX. Sometimes you reference Y before X, where consistently X before Y would help readability. You include a rotationZ but don't use/need it. I couldn't get the sections of the grid to change colour on hover until i'd found i'd used a different class name for tilting-card-body.
Maybe I'm wrong, but couldn't you set up the grid hovers the same as you did the rows and columns? Meaning rows 1-3 always tilt upwards, column 3n always tilts to the right, through combination, nth-child(3) tilts to the top and to the right. Then apply the transform on hover.
Great video! Of course in practice you would probably do this with JS, but it's nice to know this and similar effects can be managed with CSS only. I managed to trim the CSS a bit using a combination of the grid technique and the :has selector - so. you don't need to position the trackers explicitly (the grid does that for you), and you only need 4 rules to control the transforms (2 for the top and bottom rows, 2 for the left and right columns). I've done a codepen at alexbaxter-the-selector (seems like CZcams does not let you do links in comments?)
Was going to skip this video, because you show-cased this solution when you looked at others amazing CSS tricks ... but as usual I learned something new. Never thought about being able to select ranges with nth-child like that. Too bad _nth-master_ is gone.
With the z-index being the way it is on the mouse tracker, would it be possible to put a link or button in the card? it seems like that would overlap the hovered div, I guess it would need to be confined to the center most grid area to not break the tilt effect?
There might be a workaround, but if I had to implement this in an actual project that went beyond something very simple, I'd probably use a JS library tbh.
That is such a simple solution that I would have never been able to come up with it. Nice.
Hello Kevin i am one of your Students.
And I just want to Thank you from the Deepest part of my heart for all this Juicy CSS and Html Knowledge.
YOU ARE MY FAVOURITE MENTOR for frontend.
And You Successfully made me FALL IN LOVE WITH CSS. I Just LOVE all Your Videos, the way you teach makes everything Really easy to Understand.i Just wanna say I Love you(as a person).
And you helped me a lot in my life, i am still learning a lot from you, and I hope you keep doing this.I REALLY REALLY APPRECIATE All The knowledge you are sharing with us.
Thank you very much.
Thanks so much for the kind words! I'm so happy that my content has been able to help out in your journey :D
I swear to God kevin you made me fallen in love with CSS a long ago and still am the big listener to you man 😍 thank you for giving us the best time spending with CSS 👏
I love you to the God man ♥️😍
Keep going
I mean, you can do *everything* "without Javascript". If I'm doing "no-js" web stuff personally, I like to build with WASM, for example.
However, the fun part of watching these videos is seeing a CSS wizard do it with *just CSS* which is a MUCH bigger deal than just doing it "without javascript". Nice job as always, Kevin.
but how do you do DOM manipulations with wasm
Very cool!! I always learn new css tricks when watching your videos!!
Neat little trick and really liked your logic behind making it work using pure CSS.
I need to put all of this stuff into practice. While I absolutely love your tutorials, I’m finding it difficult to learn just by watching. I think I need to start building things with some of these more advanced CSS properties/selectors.
Thank you Kevin
Implementing things is so important. Watching is sort of like learning that things are possible, building stuff is how we learn how to actually do it though :)
And here i struggle with making an regular card look good😅 this was awsome
Last night fell asleep watching ur vidoe and had a css dream I was trying to make a animated navigation bar in my dream 😄
Here you go: czcams.com/video/FeJEEE3zc4U/video.html
Haha, today I learned from this .something to turn into div in VSCode after so long using it, thanks 😀
Thank you so much, Kevin
Great tutorial, I'm looking into posting HTML/CSS tutorials on my channel too but its still quite far in my schedule. In the meantime, little tutorials like this one are great to remind me of all the possibilities you have with just CSS. Can't wait for the next tutorial!
Hello Kevin, i'm an Embedded dev and web things like HTML, CSS and JS have always been a pain for me.
I bumped into you few days ago when i was searching for some videos about CSS and honestly, you are actually changing the perspective on how i look at CSS. It's not aversion anymore, i'd say it's more of a curiosity now. I haven't started with practicing HTML and CSS yet but i still enjoy watching your videos. So i'd like to thank you for that !
same.
This looks splendid!
Cool video. Thanks
Thanks Kevin
Another great video Kevin. I found it tricky to follow along at home. Here's my minor nitpicks while debugging my code - You renamed a variable to --rotateX in the video, but in the codepen it's labelled --rotationX. Sometimes you reference Y before X, where consistently X before Y would help readability. You include a rotationZ but don't use/need it. I couldn't get the sections of the grid to change colour on hover until i'd found i'd used a different class name for tilting-card-body.
This is a brilliant use of Grid, my man ✌🏽😁
Kevin back with interesting stuff as always 😍
My thoughts from this video, grid simplified the html and complicated the css, while flex boxes were the other way around.
Maybe I'm wrong, but couldn't you set up the grid hovers the same as you did the rows and columns? Meaning rows 1-3 always tilt upwards, column 3n always tilts to the right, through combination, nth-child(3) tilts to the top and to the right.
Then apply the transform on hover.
I was thinking the same thing
Oh, I love clever stuff! It's indeed a simple solution but you have to crack your brain to come up with it) Thanks!!
kevin is css god
u r awesome !!
Great video! Of course in practice you would probably do this with JS, but it's nice to know this and similar effects can be managed with CSS only. I managed to trim the CSS a bit using a combination of the grid technique and the :has selector - so. you don't need to position the trackers explicitly (the grid does that for you), and you only need 4 rules to control the transforms (2 for the top and bottom rows, 2 for the left and right columns). I've done a codepen at alexbaxter-the-selector (seems like CZcams does not let you do links in comments?)
very cool :)
Was going to skip this video, because you show-cased this solution when you looked at others amazing CSS tricks ... but as usual I learned something new. Never thought about being able to select ranges with nth-child like that.
Too bad _nth-master_ is gone.
It's *just* gone down too. It was up around 2 weeks ago :\
Mac is option+shift
With the z-index being the way it is on the mouse tracker, would it be possible to put a link or button in the card? it seems like that would overlap the hovered div, I guess it would need to be confined to the center most grid area to not break the tilt effect?
There might be a workaround, but if I had to implement this in an actual project that went beyond something very simple, I'd probably use a JS library tbh.
Sod that it's easier using JS. Interesting concept though.
At 23:00 I would just declare --negative-angle: calc(var(--angle) * -1); and use var(--negative-angle) thereafter
Does anyone know if this works in Wix Editor X?
Anyone know where the Code Pen link please?
I've just added them to the description, sorry about that!
@@KevinPowell Thanks. Keep up the good work, really enjoying your tutorials
This is actually a mapping. Wow...
first😍
Npm install Tilt :)
aspect ratio is new?
Been around for a little while now 🙂
@@KevinPowell So is it supported by most browsers? Because I'm using it all across my website, and that caught me off guard
@@dabbopabblo it has pretty good support caniuse.com/?search=aspect-ratio
Why are my comments being deleted?
What's the point with using so large font and having browser bar visible? Try full-screen mode (F11)!
I can't full-screen, my screen is bigger than the area I'm recording :\
You never heard of flex?
Very cool