I took a bit of a different approach with this video, showing how I learn something from a tutorial or blog post. I had an idea of how it worked, but I didn’t know all the details, so I did my best, and then would explore his code to see why things might have been going wrong. Would love if you'd let me know if you liked this style of video or never want to see it again!
A suggestion for improving this format: make something of your own at the end of the video using some of the concepts you just learned. That could help make the video feel even more like it’s adding to the discourse, and not just mimetic.
Enjoyed that you kept the debugging in there. It makes it all so much more real and it's an important skill to have, and one that often gets overlooked in tutorials :)
Always enjoy your videos, Kevin. This one, where you are working your way through someone else's code, is especially enjoyable and relatable. Thank you for the guided tour.
This is awesome, and not as complicated as I thought for a sec. I was waiting the whole video for you to remove the underline from the links.. oh well.. :D If you want a project to try out, one thing that always takes my attention is UA-cam's animated likes counter. Obviously there's js involved, but I think it could be interesting to see how css and js go together.
I could imagine this as a table of content, where on mobile it could also use this kind of a style and the focus gets updated with what's in view as you scroll.
Awesome fun animation video😇...loved it💖... I saw the mistake of var parenthesis issue the very first and got anxious to tell you sir like if it is a live class Going to add this animation to my list in a personal project😊..
I have a background in coding, so there's a fun dynamic here: When you're talking about css and html, I'm in complete awe of your knowledge and skill. And then you have to look up what an abs() function might do and why it might be useful and my brain goes: This guy's a complete idiot. But the actual takeaway is, of course, that we all have our own areas of expertise where we have experience, knowledge, and maybe even some talent, and then we have domains that are new to us, where we don't immediately recognize common patterns and we have to look up even basic things. And that's completely normal and fine, we all have to start somewhere. Great video 👍
Kevin transform-origin works as folow: There is 2 imaginary lines: Horizontal and vertical If this is the box of an element: 1,0------------0,0 | | | | 1,1------------0,1 The 1st value is indicating percentage between 0 and 1 on the horizontal line, while the 2nd value indicating percentage between 0 an 1 on the vertical line. If we speak about rotation its like puting the nail in the place where you want the box to rotate around. So if we want the box to rotate around the bottom left point it will be transform-origin: 0% 100%
This seems how you'd implement a MacOS X Dock animation, with the hovered icon growing and the ones beside it growing but less. Not that I would ever want that on a web page, but it's cool to know how it could be done. :-)
Thank you, very nice. The inline style attribute for --sibling-index can be replaced with something similar to how the --target is set: li:nth-child(6) { --listindex: 6; } ul:has(>li:nth-child(6):hover), ul:has(>li:nth-child(6):focus-within) { --target: 6; }
While it's amazing we can do this now in CSS, it seems like something that may seem clearer using javascript for the behaviour and have it modify the CSS to change the display.
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
I took a bit of a different approach with this video, showing how I learn something from a tutorial or blog post. I had an idea of how it worked, but I didn’t know all the details, so I did my best, and then would explore his code to see why things might have been going wrong. Would love if you'd let me know if you liked this style of video or never want to see it again!
I like learning alongside with you!
Love this style of video! Keeping the mistakes in makes it feel more human, and provide insite into effective problem solving skills
A suggestion for improving this format: make something of your own at the end of the video using some of the concepts you just learned. That could help make the video feel even more like it’s adding to the discourse, and not just mimetic.
"When I go on the orange, the banana pulls away from it, but the mango stays close." - Kevin Powell
Quality CSS content right there 😆
🤣
Enjoyed that you kept the debugging in there. It makes it all so much more real and it's an important skill to have, and one that often gets overlooked in tutorials :)
Kevin, thank you, I love this kind of videos, especially when they're under an hour, half an hour being ideal. Thank you!!!
Always enjoy your videos, Kevin. This one, where you are working your way through someone else's code, is especially enjoyable and relatable. Thank you for the guided tour.
This is awesome, and not as complicated as I thought for a sec. I was waiting the whole video for you to remove the underline from the links.. oh well.. :D If you want a project to try out, one thing that always takes my attention is UA-cam's animated likes counter. Obviously there's js involved, but I think it could be interesting to see how css and js go together.
I have been away a while and what a cool one to come back to ... Thank you Kev!
I could imagine this as a table of content, where on mobile it could also use this kind of a style and the focus gets updated with what's in view as you scroll.
amazing explanations and tips Kevin!!!
10:54 The aggressive spring makes it look like jello 😂
You’re making me want to get back to CSS again. Thanks for all the great videos.
Awesome fun animation video😇...loved it💖... I saw the mistake of var parenthesis issue the very first and got anxious to tell you sir like if it is a live class
Going to add this animation to my list in a personal project😊..
You're the king, Adam is the wizzard 😊
As always super good! A good chance to use here the new attr() for the indexing!
Transform origin with one value will always set the other axis to center
I have a background in coding, so there's a fun dynamic here: When you're talking about css and html, I'm in complete awe of your knowledge and skill. And then you have to look up what an abs() function might do and why it might be useful and my brain goes: This guy's a complete idiot.
But the actual takeaway is, of course, that we all have our own areas of expertise where we have experience, knowledge, and maybe even some talent, and then we have domains that are new to us, where we don't immediately recognize common patterns and we have to look up even basic things. And that's completely normal and fine, we all have to start somewhere. Great video 👍
Kevin transform-origin works as folow:
There is 2 imaginary lines:
Horizontal and vertical
If this is the box of an element:
1,0------------0,0
| |
| |
1,1------------0,1
The 1st value is indicating percentage between 0 and 1 on the horizontal line, while the 2nd value indicating percentage between 0 an 1 on the vertical line.
If we speak about rotation its like puting the nail in the place where you want the box to rotate around.
So if we want the box to rotate around the bottom left point it will be
transform-origin: 0% 100%
center middle is default, do not have to explicitly set it, but it is better to do it if nothing else but for readability and maintenance
This was awesome!
5:30 Minor CSS selector optimization: use the :is() pseudo class to enumerate all the states
If you are selling springs, then it could fun to see the springyness of the spring you are purchasing heheheheheheh 🤣
🤣
Looks like abs() is only in Safari and Firefox, but you should be able to do the same thing with max(var(--value), -1*var(--value))
Huh, that's interesting as it still seemed to work, will investigate 🙂 - but that's a nice workaround!
31:19 Blazor could set the sibling-index pretty easily
This seems how you'd implement a MacOS X Dock animation, with the hovered icon growing and the ones beside it growing but less.
Not that I would ever want that on a web page, but it's cool to know how it could be done. :-)
so cool how a bracket error can make you search
Please use Alt+Z (line wrap) when you have long line(s) of something.
What happens if you have focus-within on one li and you hover over a different li?
Link for the blog in description is broken!
Should work now, thanks - nerdy.dev/hover-not-hover-sorry-not-sorry
Thank you, very nice. The inline style attribute for --sibling-index can be replaced with something similar to how the --target is set:
li:nth-child(6) { --listindex: 6; }
ul:has(>li:nth-child(6):hover), ul:has(>li:nth-child(6):focus-within) { --target: 6; }
Browser support?
For the full effect? Should be decent-ish, but I haven't tested it.
that was coool
While it's amazing we can do this now in CSS, it seems like something that may seem clearer using javascript for the behaviour and have it modify the CSS to change the display.
For me, having all of this in CSS makes more sense. Probably comes down to where we're more comfortable though :)
Time to get the world high
WTW?? What is @media (hover) ??
Code for this video, if available plz.
The link to Adam's blog post has a codepens for each step along the way :)
It's super janky-even in Chrome.
I have a massive Flash tsunami menu Déjà Vu :)
Never was a fan of hover effect. Useless on mobile.
Squeeeeeeeeee!