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 😁
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.
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!!
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.
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?
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?
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?
: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.
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?
![Blox Fruits Dragon Rework Update [Full Stream]](http://i.ytimg.com/vi/EqDAp8udhm0/mqdefault.jpg)
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.
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.
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.
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!!
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.
It's great to see this... It's the best css tutorial I've ever seen.
Zoran was happy to hear that you recommended his video on fonts.
Definitely up for more of this style especially if you enjoy it. Good to mix it up :)
I actually figured this out while helping my friend on his project. It was and awesome research for it.
The grid template columns thing blew my mind
I love it so much,Thanks alot kevein😍
Next topic: magnifying glass cursor 😃
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?
You’re the king 🤴🏾 of css damn Kevin 🥶
Thank you Kevin. This is very helpful 🙏
Thank you Kevin. very helpful, give us more pls
Can you transition the gap and z-index to get that overlapping thing with flex ? Dunno need to try this...
Thanks, really helpful! 😀
Thank you powell ♥️
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?
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 😮
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?
: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.
Thank you powell for informative video😊
love the video. thank you
Nice to learn from you Thanks alot !
What channels does the CSS king watch? What other resources (books, sites etc) do you use?
Awesome content
damn i learned 2 things from this and this is super cool
how would you get the overlap on the collapse to be reversed? Left most on top.
your videos are amazing. thank you.
Do you have a personal website.
Very nice, thank you
I am just wondering when css will replace gsap for all animations?!
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.
Meet CSS, the programming language for creating cool effects like this one (on the web).
I've tried this and the images aren't overlapping
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?
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
This is cool. Although mobile is amazing, it would be so awesome for design stuff if folks only used desktop.
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
amazing
Awesome
Great
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 :)
Neat❤
Great 🎉🎉🎉🎉
The has selector feels like cheating 😂
👍👍👍👍❤❤😍😍
In a few years, we might not need JavaScript anymore.
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 😅