Amazing tutorial! I always find myself trying to remember where I saw how to do something tricky CSS related and more often that not, your channel is where I end up landing. Love the in depth explanations every step of the way
For transitions I prefer to just use transition: var(--speed); and transition-property: color, background-color, etc.; when they all need the same transition speed.
Master please! Can you make a video about this color effect behind the UA-cam videos. with css and javascript, it would be great! Thanks for the content, I'm a viewer from Brazil!
Huh? You can’t do transforms on inline elements? I was just going to counter with that I’ve def scaled images but my reset makes them a display block first. Very very interesting EDIT: so correct that the span within the button couldn’t get transforms until given a display block but a span outside the button took transforms no problem. Maybe KPow meant inline elements within inline elements
I'm curious. Couldn't you have had a custom property for the "calculated" motion for x and y so that you don't have to use calc 4 times? Changing the `--_x-motion` and `--_y-motion` and have a `--_x-motion-factor : calc(var(--_x-motion) * var(--_motion-factor) * -1)` and such? To me it'd have been more efficient, but maybe there's a reason unknown to me why the way you did it is better. (Sorry for the formatting.)
Great video, very inspiring, thank you. Just an idea: you could have your --_motion-factor go from -1 to 0 and control both the distance and direction with one property, instead of having the direction tugged away as a magic number in the calculations.
Why not use backdrop-filter: opacity instead of the before element with the grain texture? In this situation obviously there are other background elements but I never see anyone using bdrop filter opacity. I’m sure there is a reason but what is it? Esp if we already have a new stacking context anyway so it won’t trigger that
Sorry if I’ve missed this somewhere Kevin, but do you have a video on how you structure your project folders? And how you reuse components, like headers/footers/nav across all HTML pages? Thanks.
22:20 I'm curious to know, couldn't we use the ::before pseudo-element to create a linear background effect and then apply an SVG filter using the filter property ?
Nice effect. Isn't also necessary to remove the event listener when finished with to prevent memory leaks. If used as a component when mounted in an spa, they'd compound and cause issues?
why not use transition: all for these types of elements? It's rare that you would ever have different speeds for different parts of the transition, and you could just split those out as-needed.
Bro I have to admit this glassy button is really cool. But I wanna say that it did work on the CODEPEN web but it literally didnt work on my website and it became a normal button. I tried to copy all the code into the VSCode but it still didnt work, can anyone tell me what did I do wrong, thx! Appreciate the effort and tutorial of Kevin, thx so much!
I was wondering, is it also possible to make the background on hover not only transition on enter and exit, but also on the hovering, so it smoothly follows the mouse, instead of instant mouse following?
I wish UA-cam had a love button to react to videos; thumbs up doesn't do justice here!
That's what the 'Thanks' button is for 😉
Oh man, you're totally right; not sure why it didn't come to my mind (given that I've used it before!)
Amazing tutorial! I always find myself trying to remember where I saw how to do something tricky CSS related and more often that not, your channel is where I end up landing. Love the in depth explanations every step of the way
multiple skills in one video, thanks for your tutorial
For transitions I prefer to just use transition: var(--speed); and transition-property: color, background-color, etc.; when they all need the same transition speed.
Please continue making cool design tutorials like this 🙏🙏🙏
thanks kevin, very cool
💡display: inline-block is very useful for keeping your elements inline but also want to do transformations.
Span-sformers: more than meets the eye. 😉
Really fun tutorial! Thank you Kevin !!
kevin, you are the best!
Thank you for the work that you are doing and sharing with everyone :)
Master please! Can you make a video about this color effect behind the UA-cam videos. with css and javascript, it would be great! Thanks for the content, I'm a viewer from Brazil!
thanks for the video
so amazing!
Huh? You can’t do transforms on inline elements? I was just going to counter with that I’ve def scaled images but my reset makes them a display block first. Very very interesting
EDIT: so correct that the span within the button couldn’t get transforms until given a display block but a span outside the button took transforms no problem. Maybe KPow meant inline elements within inline elements
I'm curious. Couldn't you have had a custom property for the "calculated" motion for x and y so that you don't have to use calc 4 times? Changing the `--_x-motion` and `--_y-motion` and have a `--_x-motion-factor : calc(var(--_x-motion) * var(--_motion-factor) * -1)` and such? To me it'd have been more efficient, but maybe there's a reason unknown to me why the way you did it is better. (Sorry for the formatting.)
isolation: isolate; will fix the z-index issue
Great video, very inspiring, thank you. Just an idea: you could have your --_motion-factor go from -1 to 0 and control both the distance and direction with one property, instead of having the direction tugged away as a magic number in the calculations.
Why not use backdrop-filter: opacity instead of the before element with the grain texture? In this situation obviously there are other background elements but I never see anyone using bdrop filter opacity. I’m sure there is a reason but what is it? Esp if we already have a new stacking context anyway so it won’t trigger that
Sorry if I’ve missed this somewhere Kevin, but do you have a video on how you structure your project folders? And how you reuse components, like headers/footers/nav across all HTML pages? Thanks.
22:20 I'm curious to know, couldn't we use the ::before pseudo-element to create a linear background effect and then apply an SVG filter using the filter property ?
Superb ❤
Nice effect. Isn't also necessary to remove the event listener when finished with to prevent memory leaks. If used as a component when mounted in an spa, they'd compound and cause issues?
why not use transition: all for these types of elements? It's rare that you would ever have different speeds for different parts of the transition, and you could just split those out as-needed.
unless I'm looking over it I don't think the link to the article about --_variable naming is in the description
Bro I have to admit this glassy button is really cool.
But I wanna say that it did work on the CODEPEN web but it literally didnt work on my website and it became a normal button.
I tried to copy all the code into the VSCode but it still didnt work, can anyone tell me what did I do wrong, thx!
Appreciate the effort and tutorial of Kevin, thx so much!
Transparent buttons are cute, but I firmly believe things jumping on hover are bad user experience.
💯
Where can I get free designs to practice ?
Nesting has slightly better browser support if you use the `&` symbol, even though the requirement isn't strict
🔥🔥🔥🔥🔥
inline-block
First to comment.
Bro is not. Teaching css bro is css
I was wondering, is it also possible to make the background on hover not only transition on enter and exit, but also on the hovering, so it smoothly follows the mouse, instead of instant mouse following?
yes, but you need to keep some state in js.