Awesome! This reminded me to check on overflow-clip-margin support, I’m so excited for that property! If anyone’s curious, it’s not supported at all in safari and has partial support everywhere else (supported only when using ‘overflow: clip’ on both axes). Come on safari!!
This format really helps me grasp the points you're focusing on Kevin so definitely more please. I think this has a lot of potential for use in a graphical menu system - I need to go have a play around with that idea 😁
I finally bought your merch! One tee, one tank and a toddler tee for my daughter ^^ we'll match, can't wait to get these in France! Thanks for the video. These are the kind I prefer, I learn best watching an expert do and explain what's happening.
You really have a talent to put in one not too long video great content, and clearly explained. I don't know if I use the effect as a whole, but learning ingredients is very helpful. Thank you for your work.
Hi Kevin, another great video. And yes, that format is really nice. Also, I wonder whether you might do an occasional video relating to web application CSS and techniques. E.g. Forms, displaying data in tables, master -> data drill down?? Just a thought. Your videos are very informative and useful, but there is a heavy leaning toward "marketing" style of web content. An occasional perspective on using modern CSS with a more "application" leaning would be very much appreciated. What do you think?
:has(), :where() and :is() are so great and are 100x better than pre-years transition: grid-template-columns/rows; // Is there any issues with slow down on that like a few of the transitions? Even if it is bad might still use it over a JS solution. Like this and talking about new things. Stuff in the brain as long as it fits is always nice fallback.
At the end part. When you have the horizontal scrolling, instead of the scroll bar, is it possible to have like an arrow button at the left side of the avatars, and by clicking on it. It will move to the next avatar to the left while the firat avatar on the right will dissappear. and when all avatars are over, to repeat from the 1st avatar ? ... and same for the right side ? Only because it would look better I think 😮
Yup! Can come in handy, and might even be a bit more descriptive... only issue is you can't have a border with it as well then, or box-shadows, both of which I wanted on these :)
Hi kevin, I have tried to solve the challenge with the help of column-gap but the problem here is immdiate snap of the animation when my is hover is removed/taken off. How to avoid immediate snapping for the animation I have given to the column-gap property?
01:28 why border-radius:100vw (seems like makes .avatar circle unless avatar width/2 < viewport width)? also why box-shadow depend on font-size (rem unit) but not border?
Awesome video! Q: Wouldn’t grid-auto-flow: column and grid-auto-column: var(-column-size) work the same without the hard coded count? Would the transition work on the column size?
transition: grid-template-columns 🤯
11:30 Holy cow I didn't knew that track to select the direct previous element!!!
It’s brand new so I wouldn’t use it for another few years
Yya
best CSS channel i am aware of!!!!
I really like the new format. Just quickly dip in and see bits of what is possible works great for me.
Awesome! This reminded me to check on overflow-clip-margin support, I’m so excited for that property!
If anyone’s curious, it’s not supported at all in safari and has partial support everywhere else (supported only when using ‘overflow: clip’ on both axes). Come on safari!!
This format really helps me grasp the points you're focusing on Kevin so definitely more please. I think this has a lot of potential for use in a graphical menu system - I need to go have a play around with that idea 😁
Thank you Kevin ... love to see your thought process as you fix the "features" from the initial code. Keep it up ... I would love to see more of this.
I finally bought your merch! One tee, one tank and a toddler tee for my daughter ^^ we'll match, can't wait to get these in France!
Thanks for the video. These are the kind I prefer, I learn best watching an expert do and explain what's happening.
You really have a talent to put in one not too long video great content, and clearly explained. I don't know if I use the effect as a whole, but learning ingredients is very helpful. Thank you for your work.
I actually figured this out while helping my friend on his project. It was and awesome research for it.
Next topic: magnifying glass cursor 😃
Zoran was happy to hear that you recommended his video on fonts.
It's great to see this... It's the best css tutorial I've ever seen.
I’m loving these component tutorials!! PLEASE KEEP IT UP!!!
The grid template columns thing blew my mind
Definitely up for more of this style especially if you enjoy it. Good to mix it up :)
I love it so much,Thanks alot kevein😍
You’re the king 🤴🏾 of css damn Kevin 🥶
Thank you Kevin. very helpful, give us more pls
Hi Kevin, another great video. And yes, that format is really nice. Also, I wonder whether you might do an occasional video relating to web application CSS and techniques. E.g. Forms, displaying data in tables, master -> data drill down?? Just a thought. Your videos are very informative and useful, but there is a heavy leaning toward "marketing" style of web content. An occasional perspective on using modern CSS with a more "application" leaning would be very much appreciated. What do you think?
Thank you powell ♥️
Thanks, really helpful! 😀
Thank you Kevin. This is very helpful 🙏
Thank you powell for informative video😊
:has(), :where() and :is() are so great and are 100x better than pre-years
transition: grid-template-columns/rows; // Is there any issues with slow down on that like a few of the transitions? Even if it is bad might still use it over a JS solution.
Like this and talking about new things. Stuff in the brain as long as it fits is always nice fallback.
At the end part. When you have the horizontal scrolling, instead of the scroll bar, is it possible to have like an arrow button at the left side of the avatars, and by clicking on it. It will move to the next avatar to the left while the firat avatar on the right will dissappear. and when all avatars are over, to repeat from the 1st avatar ? ... and same for the right side ?
Only because it would look better I think 😮
Can you transition the gap and z-index to get that overlapping thing with flex ? Dunno need to try this...
Awesome content
Meet CSS, the programming language for creating cool effects like this one (on the web).
love the video. thank you
1:30 Fun fact: You can use clip-path: circle() in order to create a circle without using the border-radius property
Yup! Can come in handy, and might even be a bit more descriptive... only issue is you can't have a border with it as well then, or box-shadows, both of which I wanted on these :)
then the box-shadow and border would not work properly
Hi kevin, I have tried to solve the challenge with the help of column-gap but the problem here is immdiate snap of the animation when my is hover is removed/taken off. How to avoid immediate snapping for the animation I have given to the column-gap property?
Nice to learn from you Thanks alot !
What channels does the CSS king watch? What other resources (books, sites etc) do you use?
damn i learned 2 things from this and this is super cool
01:28 why border-radius:100vw (seems like makes .avatar circle unless avatar width/2 < viewport width)?
also why box-shadow depend on font-size (rem unit) but not border?
Very nice, thank you
Plz do this with flex
I am a bit confused with var and grid
Are there any clever ways to get a count of elements with pure CSS?
I am just wondering when css will replace gsap for all animations?!
how would you get the overlap on the collapse to be reversed? Left most on top.
your videos are amazing. thank you.
This is cool. Although mobile is amazing, it would be so awesome for design stuff if folks only used desktop.
Great
I've tried this and the images aren't overlapping
To bad we can't transition grid-auto-columns: var(--column-size),
In that case we could've used grid-auto-flow: column instead of a fixed avatar-count
Awesome video!
Q: Wouldn’t grid-auto-flow: column and grid-auto-column: var(-column-size) work the same without the hard coded count? Would the transition work on the column size?
yeah, I didn't think of that for some reason! But I just tested it, and it doesn't animate.
unfortunately there is no transition for grid-auto-column
god level css
Awesome!
I like it
Couldn't you use grid-auto-flow: column; and grid-auto-columns: var(--column-size); so you don't have to worry about the repeat number?
That's a very good point, I should have thought of that 😅 - EDIT: I just tested it, and grid-auto-columns isn't animatable, so it doesn't work
@@KevinPowell Ah, bummer! I was curious about that which is the reason it was a question and not a statement hah.
Do you have a personal website.
amazing
hover reminds me of the the mac menu bar
You could do some nicer easing, and have it stretch over more elements, and have something pretty well matched to that I think :)
Awesome
Great 🎉🎉🎉🎉
Neat❤
In a few years, we might not need JavaScript anymore.
The has selector feels like cheating 😂
👍👍👍👍❤❤😍😍
Great stuff... but codepen sucks on an ipad. Its so clunky...
yeah, it's not ideal on touch devices...
So we get 2 stupid ads now before each video . . . 😡
Can. you show how to make the blocking function on a chat app >?
ok but do i need to check @supports(@supports) first 😅