This is exactly how I thought it would be. I tried to do it on the day you made the community post and I couldn't make it work with pseudo elements for some reason so I added two divs like you did and it worked. I also added a bunch of divs in a grid and made it feel better but I didn't really like that approach.
It doesn't look that magical now that we found out how sausage is made compared to when we saw a sausage preview, but we're here to be sausage makers anyway, so we are now happy with this new acquired skill. Thanks.
U clearly fully understand what you're talking about compared to other RUclipsrs. Not even knocking others but u have amazing overall knowledge and a great way of explaining things. Nice one!
I loved your explanation of why the animation was faster when it was in the middle as opposed to at the sides, took you like 5 sentences to go absolutely nowhere 😂 Love your video's, keep it up Kevin ❤
I'm having multiple strokes trying to comprehend this comment. "I loved your explanation" "Took you 5 sentences to explain nothing" Can you spot the contradiction? If you cannot, then it means you intended to insult him. "I love how stupid you are" is the meaning you conveyed.
@@arjix8738 Its a complicated explanation and I loved (as in I found it funny) how he half heartedly tried to explain it. I didn't mean anything bad by it, honestly.
Gotta say I do prefer transforms + translate due to the performance of animating things. But yeah I do agree with others with the whole this should just really be JS. It's a cool trick but not something I would ever want to deal with in a shared codebase, at least until something new comes along to allow CSS to somehow figure out the mouse position or similar.
I just started HTML and CSS recently and your tutorials are changing me in not itme you the best. God made people like you to help people like me, you are loved.
I know that this is a "CSS only" type of gimmick, but it really is something you should just do with JavaScript. Grabbing the mouse position and storing it in a CSS variable is a couple lines of JS and much cleaner to work with in CSS itself and will give better results. Hopefully CSS spec will add a mouseX calculated value some day.
Great tutorial and channel, really got me back into HTML and newer CSS. I tried this and then experimented with this effect as navigation - replaced the buttons with an unordered list in and it works as expected, very cool effect.
Why not use JS to set --pointer-x and --pointer-y onMouseOver? Then, CSS can still determine the styling, while also knowing EXACTLY where the pointer is.
@@JawsoneJason I don't think so. If you can achieve something stylistically without JavaScript, then you absolutely should. That's why CSS exists in the first place.
@@williamhorn363 I don't think it's black and white. There are tradeoffs either way. In addition to being arguably more "tidy" by handling visual effects in styles, my guess is the pure CSS way is slightly better with memory than the JS implementation I'm imagining, but JS clearly has the edge with respect to browser support and responsiveness to the cursor position.
Firefox Developer Edition 112 finally passed all the platform tests for :has(), so it won't be long it also should be enabled by default in mainstream. I hope 114 will have it. They finally implemented the sibling selectors like :has(.bla + .foo) and :has(.bla ~ .foo) and some of the "esoteric" complex stuff. This and @container queries allow for so much smarter and less bloated CSS.
This is a really cool effect, and a great way to show multiple pseudo-classes working in tandem. That said, I do kind of disagree with your motivation here. In an ideal world, yes, this would be pure CSS. But right now what you've done is shifted the burden from Javascript (functionality) to HTML (structure), which I would argue is the least semantically correct between the two. It also adds a layer of complexity, at the cost of accuracy. Using JS, you could simply reposition the growing circle whenever the user clicks the button and be done with it. And if you're writing it as a component anyway as you suggested, you can just take care of it once in there. Plus it takes care of the developer having to remember to put in the invisible spans in as well. Just my $0.02 :)
You can solve the issue with the before element scaling back towards the wrong spot at the end by using :hover instead of :active, it looks especially better if you use even more regions
The effect is cool, but it's only visible it seems when you click and HOLD the mouse button. Otherwise, it just looks like the button glitched. Is that intentional?
I think it's nice, but the effect should finish, even after the mouseup event (in case you click quickly, as you normally would, and don't press the button long enough just to see the effect).
The moment it turned subtle at the end, it made it feel so slick! It reminds me of drawing, where you draw everything as polygons and only round it in the end. I haven't drawn in a while now though. Also, do people write plain HTML? I understand that was the original intent of HTML but I'd do anything to avoid that, I'd even make my own language or something and autogenerate HTML.
I kinda do write HTML I started using astro js to split my apps into components, it supports running arbitrary js at compile time that finally outputs static HTML which is exactly what I want
@@TechBuddy_ Astro does look nice, though I haven't tried it. But you still do use components, right? Because I got the implication that people don't split into components when they write HTML. I used a bit of PHP for a school project and I did make components basically, more like, I wish I made way more components than I did.
@@theodorealenas3171 People write HTML but anyone doing anything other than a simple landing page use a framework like astro or something like next for more complicated ones. If you are not a fan of JavaScript we have php or any other templating language like pug, nunjucks etc
@@TechBuddy_ fun fact I tried making one on my own, which did simple file substitutions where there were HTML comments, and it was recursive. That was fun but extremely stupid. I don't really have something against JavaScript (yet)
Although Transitioning is good approach but it requires opacity transitioning to hide the center positioning, So I used animation instead that scales to 20, and make it fill forwards, with a duration of 1000ms with an ease-out timing func, and changed the duration on both spans, also changing the margin on them both
I’m pretty new to the channel but I’m finding the videos really helpful with websites I’m creating for others!! Is there a list of websites that can help with developing one? I mainly use w3schools for basic tutorials on html and css
Thanks for this video! How to keep the css style generated by the click AFTER the clic, to avoid going back to the initial css style that we had before the click?
I hope they bring a something so we don't need to use spans. I did a growing border-bottom and color from the center and using spans is just painful with Tailwind also in React.
Very cool! Would button:has(*:active)::before work for the shorter delay instead of listing the spans in the selector? Also, I believe unlike the transition for the transform property, the timings for the opacity should be the same regardless of the place the animation starts from. Thanks for the amazing front end inspiration Kevin!
Hey Kevin ! I am not a youtuber and I do NOT wish to be! I am learning web development and you've been a HUUGE help throughout the journey, thank you. But just out of curiosity! what do you do with your videos that no matter which quality I choose, it always looks 1080 HD !!! seriously, it's amazing !! 😵😵😵
Can't you increase the size of those spans, just target the active state of the spans, and increase the relative z-index of those based on where you clicked?
Love this. could the the animation seem faster in the middle because of the ease? when you don't specify an ease, the default ease is: "ease", and because the circle quickly covers all the visible space, the slower part of the animation (the end) is out bounds where they're invisible.
It's not the ease, you would have the same effect with a linear timing function. It's because when it starts in the middle, you're looking at both sides of the circle expand but you're only seeing the first half of the animation (the rest being obscured by the overflow). When the circle starts at the side, you can only see half the circle expand but you can see that half for (nearly) the entire duration of the animation. It's hard to come up with a fitting analogy, but it has to do with the fact that in one situation you're looking at the distance between the two outer edges of the circle and in the other you're only looking at the distance between the center and the edge of the circle. Combine this with the fact that you always only see part of the animation because of the overflow, and the animation that has the circle start in the middle looks a lot faster. If you'd remove the overflow: hidden, you'd clearly see that no matter where the circle starts it takes the same amount of time to grow to the same size.
Hey, Kevin.. I am editing PDF on pdfcandy... Their support is not good. Everytime after editing it's size should be decreased but.. It increases. PDF loading takes a hour. Cursor rests for few seconds after a sentence editing. Page jumps sometimes automatically, a u to scroll, smooth scroll unchecked. Now a days shows a script may be busy on this site -unresponsive script error. In safe mode.. Same result. I did this on Firefox. Chrome shows memory error and edge is Same. May I have your mail? Then you can check yourself with my PDF. Reply soon Please.
I notice you and other web developers avoid using heights and widths as much as possible, like at the beginning I saw you used padding to give some width and height to your button, is there a specific reason for doing this?
Defined widths and heights make you fight... Fight with clipping, overflow, positioning, responsiveness, etc etc Letting things be sized naturally takes getting used to, but once you do you find the rest of your layout gets so much easier.
No one is going to click and hold to have the effect finish. If you click it it's just a circle showing up for 200ms in the middle. The effect should finish, but you can't do that I think.
That is good for educational purposes, but as you mentioned it, if you're working on a medium/big project you'll probably use a component based library, meaning that you have direct access to JavaScript, so I don't consider not using it a big win. And having seen the solution for this, I bet doing this with JavaScript will be more straightforward. And even for small sites it's not that big of a deal to use JavaScript it's not like bad for performance or sth. So ... 🤷
Bro, your videos are amazing, the only thing is it feels too long watching your videos (although we could skip but may miss some important points). So can you come straight to the point instead of lengthy intros and stuff (like having the base ready and talk only about the topic we're gonna dive into)
Could you go into detail on how? `:has()` doesn't select the child element, but the parent itself, so `parent:has(.example)` . This selects .parent when `.example` is nested inside of it. This is very different from something like `.example { .parent & `, which selects the child that is nested in the parent. But maybe I'm missing another technique.
The longer video I linked to in the description on :has() explains how it works in a lot more detail, but basically, it's selecting the button if it the first child is actively being clicked on
I get the urge to put the spans in a "component", but I don't think this would be the right approach, regardless of framework. In Chris Coyier's podcast Shop Talk Show, he specifically uses the button example, like here, as a place where beginners tend to create "components" unnecessarily. If you just have a button with a few spans in there, why do you have a separate component again? Why not use ? Instead, I think something like a "custom attribute", a "directive" in the angular and vue worlds, or a "modifier" in the ember world would make more sense, that appends the two spans, and then you can customize any button with a custom attribute like . If everyone starts creating custom components for basic elements like this, then we will lose the semantic web.
Kevin in 2035; creating CSS-only web browser
I made a CSS-only Minecraft
in 2050: creating a CSS-only functional human
impossible cause css is a stylesheet language.
@@danagobrr normie spotted
@@BenjaminAsterThat was mind-blowing!
This is exactly how I thought it would be. I tried to do it on the day you made the community post and I couldn't make it work with pseudo elements for some reason so I added two divs like you did and it worked. I also added a bunch of divs in a grid and made it feel better but I didn't really like that approach.
I think this is the most common comment below all Kevin's videos. I write such comments in almost all cases :)
@@VasilyPavlik 😆
Oh man, the way your centered that pseudo element 🤯
Doesn't @#~! about does he lol, great channel
I think you can make it without :has. But it will need 1 more hitbox for center and 2 more ::before elements.
It doesn't look that magical now that we found out how sausage is made compared to when we saw a sausage preview, but we're here to be sausage makers anyway, so we are now happy with this new acquired skill. Thanks.
U clearly fully understand what you're talking about compared to other RUclipsrs. Not even knocking others but u have amazing overall knowledge and a great way of explaining things. Nice one!
I loved your explanation of why the animation was faster when it was in the middle as opposed to at the sides, took you like 5 sentences to go absolutely nowhere 😂 Love your video's, keep it up Kevin ❤
I'm having multiple strokes trying to comprehend this comment.
"I loved your explanation"
"Took you 5 sentences to explain nothing"
Can you spot the contradiction?
If you cannot, then it means you intended to insult him.
"I love how stupid you are" is the meaning you conveyed.
@@arjix8738 Its a complicated explanation and I loved (as in I found it funny) how he half heartedly tried to explain it. I didn't mean anything bad by it, honestly.
Gotta say I do prefer transforms + translate due to the performance of animating things. But yeah I do agree with others with the whole this should just really be JS. It's a cool trick but not something I would ever want to deal with in a shared codebase, at least until something new comes along to allow CSS to somehow figure out the mouse position or similar.
I just started HTML and CSS recently and your tutorials are changing me in not itme you the best. God made people like you to help people like me, you are loved.
Lovely video as expected. Please create a video which will contain different types of advanced animations which we can add to our sites.
I'm not much of an animation guy, I just like mucking around with the small things :D
@KevinPowell No problem sir, we just enjoy your content with fun and love. Keep uploading.
I know that this is a "CSS only" type of gimmick, but it really is something you should just do with JavaScript. Grabbing the mouse position and storing it in a CSS variable is a couple lines of JS and much cleaner to work with in CSS itself and will give better results. Hopefully CSS spec will add a mouseX calculated value some day.
I agree, it's just a simulation
Nice idea, 404 on codepen :)
Just fixed it :D
Great tutorial and channel, really got me back into HTML and newer CSS.
I tried this and then experimented with this effect as navigation - replaced the buttons with an unordered list in and it works as expected, very cool effect.
Just to let you know, the codepen ("Finished code:") link in the details panel is incorrect. You are missing a trailing 'j' from the URL.
thanks!
Thanks for being the last honest person who cares about CSS
Why not use JS to set --pointer-x and --pointer-y onMouseOver? Then, CSS can still determine the styling, while also knowing EXACTLY where the pointer is.
plus, better browser support
well, you technically can do it, but that's not the topic of the video. You're correct we can use JS for a better and cleaner code
Yes, and I think that's my argument: CSS-only is a wrong way of achieving this.
@@JawsoneJason I don't think so. If you can achieve something stylistically without JavaScript, then you absolutely should. That's why CSS exists in the first place.
@@williamhorn363 I don't think it's black and white. There are tradeoffs either way. In addition to being arguably more "tidy" by handling visual effects in styles, my guess is the pure CSS way is slightly better with memory than the JS implementation I'm imagining, but JS clearly has the edge with respect to browser support and responsiveness to the cursor position.
yay the video is finally out
THAT'S I'VE BEEN WAITING FOR ! Thank you Kevinnn
Hey Kevin :) The link to the pen is not working. You need to add a j to the end of the URL.
Thank you so much! Just fixed it 🙂
looks awesome like your every video
Very nice! 😎 I was looking for something like this! You never disappoint Kevin! 😉
Literally been waiting for so long... And it's worth it ❤️
wow really makes you want to code some css
Following madly ❤
Kevin do you know a reason why button element doesn't have a cursor set to pointer by default???
It's how UI buttons work at the OS level, so it's matching that behavior.
Firefox Developer Edition 112 finally passed all the platform tests for :has(), so it won't be long it also should be enabled by default in mainstream. I hope 114 will have it.
They finally implemented the sibling selectors like :has(.bla + .foo) and :has(.bla ~ .foo) and some of the "esoteric" complex stuff.
This and @container queries allow for so much smarter and less bloated CSS.
This is a really cool effect, and a great way to show multiple pseudo-classes working in tandem. That said, I do kind of disagree with your motivation here. In an ideal world, yes, this would be pure CSS. But right now what you've done is shifted the burden from Javascript (functionality) to HTML (structure), which I would argue is the least semantically correct between the two.
It also adds a layer of complexity, at the cost of accuracy. Using JS, you could simply reposition the growing circle whenever the user clicks the button and be done with it. And if you're writing it as a component anyway as you suggested, you can just take care of it once in there. Plus it takes care of the developer having to remember to put in the invisible spans in as well. Just my $0.02 :)
You can solve the issue with the before element scaling back towards the wrong spot at the end by using :hover instead of :active, it looks especially better if you use even more regions
i just watch ur vedio and keep learning more and more u r rly good keep it up brother
Hey Kevin, thanks for the video, you are a CSS wizard.
WOW!!!! In pure CSS.
The effect is cool, but it's only visible it seems when you click and HOLD the mouse button. Otherwise, it just looks like the button glitched. Is that intentional?
I think it's nice, but the effect should finish, even after the mouseup event (in case you click quickly, as you normally would, and don't press the button long enough just to see the effect).
Great no need for js to add classes and timeout perfectly 👌
Great video Kevin🔥🔥
The moment it turned subtle at the end, it made it feel so slick! It reminds me of drawing, where you draw everything as polygons and only round it in the end. I haven't drawn in a while now though.
Also, do people write plain HTML? I understand that was the original intent of HTML but I'd do anything to avoid that, I'd even make my own language or something and autogenerate HTML.
I kinda do write HTML I started using astro js to split my apps into components, it supports running arbitrary js at compile time that finally outputs static HTML which is exactly what I want
@@TechBuddy_ Astro does look nice, though I haven't tried it. But you still do use components, right? Because I got the implication that people don't split into components when they write HTML. I used a bit of PHP for a school project and I did make components basically, more like, I wish I made way more components than I did.
@@theodorealenas3171 People write HTML but anyone doing anything other than a simple landing page use a framework like astro or something like next for more complicated ones. If you are not a fan of JavaScript we have php or any other templating language like pug, nunjucks etc
@@TechBuddy_ fun fact I tried making one on my own, which did simple file substitutions where there were HTML comments, and it was recursive. That was fun but extremely stupid. I don't really have something against JavaScript (yet)
Although Transitioning is good approach but it requires opacity transitioning to hide the center positioning, So I used animation instead that scales to 20, and make it fill forwards, with a duration of 1000ms with an ease-out timing func, and changed the duration on both spans, also changing the margin on them both
You can use a one character element like or to not clutter the code.
And you can create a web-component out of it, and hide the inner stuff as well. It is introducing JS tho, but noone usess just css on a page :D
100% making it a component is the way to go when you need extra nested stuff like this :)
Thanks for the trick, I love it!
Kevin is the nickname for css, for sure
It's really useful and so cool, thanks !
I’m pretty new to the channel but I’m finding the videos really helpful with websites I’m creating for others!! Is there a list of websites that can help with developing one? I mainly use w3schools for basic tutorials on html and css
If there is something I need clarification on, I usually google it with "MDN", tends ti be more in depth and up to date than w3c
This is good stuff!
Mind blown ❤
Thanks for this video! How to keep the css style generated by the click AFTER the clic, to avoid going back to the initial css style that we had before the click?
I can see your camera has a background image of linear-gradient(to right, blue, red)
I hope they bring a something so we don't need to use spans. I did a growing border-bottom and color from the center and using spans is just painful with Tailwind also in React.
Very cool! Would button:has(*:active)::before work for the shorter delay instead of listing the spans in the selector? Also, I believe unlike the transition for the transform property, the timings for the opacity should be the same regardless of the place the animation starts from.
Thanks for the amazing front end inspiration Kevin!
Now, how to make that effect for where you cant add span elements?
Hey big fan of your vids!!
It is very difficult to create, but it is very nice to see the result
How would you implement the same effect when you hover over the button instead of holding down click?
css god
...best Android RUclips AdBlocker?
Thankyou 💗
im working on a solution for the problem described at the top of the video. hang tight!!
Hey Kevin ! I am not a youtuber and I do NOT wish to be! I am learning web development and you've been a HUUGE help throughout the journey, thank you. But just out of curiosity! what do you do with your videos that no matter which quality I choose, it always looks 1080 HD !!! seriously, it's amazing !! 😵😵😵
No idea, lol. Export with default 1080 premiere settings 😂
how do you debug something like that? by slowing down, putting vivid colors and borders?
Does the new "has" keyword look for an existing selector, even if it's not for an element bur rather an attribute, ie ":last-child:active"?
Thanks
button:has(:first-child:active) how is this working? does span also have active state like button?
nice video! as a challenge, can you create a toggle switch WITH TEXTS INSIDE (like on/off etc.) using only css and an input.checkbox?
13:50 Kevin, why did you double this? :)
Amazing🔥Firefox doesn't support the has pseudo at all and sadly, it seems like, as if it's not going to be implemented any time soon....
Is button:active::before the same selector as button::before:active ?
Can't you increase the size of those spans, just target the active state of the spans, and increase the relative z-index of those based on where you clicked?
Love this. could the the animation seem faster in the middle because of the ease? when you don't specify an ease, the default ease is: "ease", and because the circle quickly covers all the visible space, the slower part of the animation (the end) is out bounds where they're invisible.
It's not the ease, you would have the same effect with a linear timing function. It's because when it starts in the middle, you're looking at both sides of the circle expand but you're only seeing the first half of the animation (the rest being obscured by the overflow). When the circle starts at the side, you can only see half the circle expand but you can see that half for (nearly) the entire duration of the animation.
It's hard to come up with a fitting analogy, but it has to do with the fact that in one situation you're looking at the distance between the two outer edges of the circle and in the other you're only looking at the distance between the center and the edge of the circle. Combine this with the fact that you always only see part of the animation because of the overflow, and the animation that has the circle start in the middle looks a lot faster.
If you'd remove the overflow: hidden, you'd clearly see that no matter where the circle starts it takes the same amount of time to grow to the same size.
I can't get "isolation" to register in my editor
🎉🎉🎉Yeeaahhh
[mind blown].gif
Hey, Kevin.. I am editing PDF on pdfcandy... Their support is not good. Everytime after editing it's size should be decreased but.. It increases. PDF loading takes a hour. Cursor rests for few seconds after a sentence editing. Page jumps sometimes automatically, a u to scroll, smooth scroll unchecked. Now a days shows a script may be busy on this site -unresponsive script error. In safe mode.. Same result. I did this on Firefox. Chrome shows memory error and edge is Same. May I have your mail? Then you can check yourself with my PDF. Reply soon Please.
Yeee
Could it use :hover instead of :active on the spans so that the margin-left/right stays the same when you stop pressing?
That would probably work, give it a try and let us know
@@willsterjohnson It worked 👍. I also found that you can use width: 100% instead of the scale which makes the animations more consistent :)
Kevin says css is programming language 😂❤
why not just transition the size of the span itself vs a before element?
Hi Sir
can you make a video about font variation settings
thanks by advance.
I notice you and other web developers avoid using heights and widths as much as possible, like at the beginning I saw you used padding to give some width and height to your button, is there a specific reason for doing this?
Defined widths and heights make you fight... Fight with clipping, overflow, positioning, responsiveness, etc etc
Letting things be sized naturally takes getting used to, but once you do you find the rest of your layout gets so much easier.
You can make the ripple effect like this, now without js
No one is going to click and hold to have the effect finish. If you click it it's just a circle showing up for 200ms in the middle. The effect should finish, but you can't do that I think.
this is called ripple effect and I think it is the default behavior of button in android
That is good for educational purposes, but as you mentioned it, if you're working on a medium/big project you'll probably use a component based library, meaning that you have direct access to JavaScript, so I don't consider not using it a big win. And having seen the solution for this, I bet doing this with JavaScript will be more straightforward. And even for small sites it's not that big of a deal to use JavaScript it's not like bad for performance or sth. So ... 🤷
Noice...
Bro, your videos are amazing, the only thing is it feels too long watching your videos (although we could skip but may miss some important points). So can you come straight to the point instead of lengthy intros and stuff (like having the base ready and talk only about the topic we're gonna dive into)
Need videos for web3 threejs webgl please :)
You'll have to find another channel, both not my realm :D
Haha no problem. Love your css videos
404 on codepen
fixed it :)
The issue with :has can be solved by using some preprocessors like scss
Could you go into detail on how? `:has()` doesn't select the child element, but the parent itself, so `parent:has(.example)` . This selects .parent when `.example` is nested inside of it. This is very different from something like `.example { .parent & `, which selects the child that is nested in the parent. But maybe I'm missing another technique.
width: calc(100% / 3);
Nice trick. But I have to say that I absolutely hate Material Design because of that.
Wait how does that button:has(:first-child:active) work lol
The longer video I linked to in the description on :has() explains how it works in a lot more detail, but basically, it's selecting the button if it the first child is actively being clicked on
At this point you should just use JavaScript for the positioning of the pseudo element right? This would be very easy if you’re using a framework.
I get the urge to put the spans in a "component", but I don't think this would be the right approach, regardless of framework. In Chris Coyier's podcast Shop Talk Show, he specifically uses the button example, like here, as a place where beginners tend to create "components" unnecessarily. If you just have a button with a few spans in there, why do you have a separate component again? Why not use ? Instead, I think something like a "custom attribute", a "directive" in the angular and vue worlds, or a "modifier" in the ember world would make more sense, that appends the two spans, and then you can customize any button with a custom attribute like . If everyone starts creating custom components for basic elements like this, then we will lose the semantic web.