I really like using named grid rows, columns, and areas like you've shown here. I learned it from an earlier video of yours, it's such a useful tool to have available!
To polish that z-index-hack you could add ease-out, so when animation goes backwards it's speed is higher at the beginning and once you hover on different object z-index difference is not that noticeable. Also I really like your approach to designing styles in general so it's really easy to use once the scale of a project gets bigger, there's definitely a lot to learn from you
great content! it is not the first time you show us position absolute with grid to position descedent elements in a grid, but it is something easy to forget, so I glad you did this and show how powerful grid can be.
Kevin, they aren't zoomed on the eyes, they aren't zoomed at all. The only thing changing is the visible area of the image. There is no zooming or scaling happening, man :)
They aren't zoomed but they are all positioned on the eyes in the thumbnail view. The eyes are not all in the same location on the images but they are all captured on the thumbnail
Hey Kevin, I'm new to the world of development and I've heard of CSS frameworks. I've never seen you using them, so I was wondering if was worth to learn one. I have the same question regarding SASS as well. Could you make a video about it? Thank you very much.
This is amazing! When i saw the markup i wasnt sure how it would work. I was trying to play with position: absokute on grid-child pseudo elements and it wasnt working. I wonder what i was doing wrong. Very fun how-to!! Congrats on CSS Day spot too!
A lot of very ingenious stuff here. I was waiting for the focus on the eyes of each picture, but I suppose you just have to tweak each image independently.
So why this method (explicit grid rows and columns) vs using the intrinsic size of our images to dictate the image column width and allowing as many columns will fit into the parent container (and auto rows for as many items as we have in the list)? This seems like it would be more flexible if you added or subtracted a bunch of list items (or wanted to have the content width to be flexy as well).
hot damn -- I learned sooooo much watching this. The animation trick is awesome. You should put a link to those three videos you did that explain naming the grid lines (the fence posts! Why doesn't anyone use the fence post/fence rails analogy explaining grid!).
This is cool. I'm really interested in the opinion of a CSS power-user like yourself: To me, as someone with very limited working knowledge of CSS (I'm mostly a backend engineer, also have significant TS/Angular experience but I literally use Bootstrap for everything and only tweak in scss), every cool thing done in CSS feels like a hack or a system of several hacks that are completely unintelligible without context/extensive comments and that I would never feel confident or comfortable using for anything important. Does that feeling go away with CSS proficiency, or is that just how it is?
Hello, Kevin! There is a question just of a kind "Can we make it by CSS":) Do you remember the effect of Telegram's erosion of a message? It's like a dispersion, blowing up to the moleculas! Do you have an idea how could we make it through CSS??
Hello Kevin, Thank you so much for the lovely content which you create and share for the benefit of so many people (myself included 🙂). I learn so much here. This video specifically has some really interesting stuff going on, but what I actually find myself asking, is something much more basic which keeps coming up in a lot of code which I see… In your code, you wrap the with a and as far as I can tell, this wrapping is not required for any of this to work. There is of course the semantic aspect of denoting that this is a distinct section of the markup, but imho, the itself could function in that capacity well enough. Semantically the denotes a section of the code which contains list items, so why the extra wrapper? I see this in a lot of code and I keep wondering if I might be missing some purpose of this… (it is of course just an example of more general question). Another thing which kind off bounces of this question, is the tendency to give classes to almost any element which is referenced in the CSS. There seems to be an aversion to using descendant selectors which would target elements just as easily. I find using them easy enough plus it keeps the name space cleaner and easier to manage without conflicts. The result of less wrappers and class names is a cleaner markup with less naming issues. It is easier to maintain and is more legible. One last question which is again kind of basic and related to the other two, is how many levels of nesting make sense when writing nested CSS. I love that we have nesting in CSS natively now, but I find that excessive nesting quickly defeats the purpose of an easier dev experience… would love to hear your thoughts on all of this, and again, thank you 🙏🏻.
I was thinking that there was something to do with clip-path: inset() because it's clearly not a scaling up that is going on, but the clipping leaves empty space around the images (I tried it in the codepen). It works, but I haven't figured how to get the css to "ignore" the clipped portion and make the grid compact as it is. Of course, they're using background-image (cheaters! LOL) and ideally the images would be identically sized and already cropped so the eyes of everyone would be roughly positioned in the same space.
15:40ish The row position does not seem that maintainable for INF speakers. Guess with SSR could have the loop of the data from DB set-up multiple new CSS. Now yes over the eyes would almost always need custom offsets, but that could also come from the DB with the name & other stuff.
WTF I thought only only direct children could be grid items unless you did "display: contents"... I had no idea you could control absolutely positioned elements with the grid!
Hi Kevin Powell, Your video content too much important. I want to show you a shape can you create that!! Shape in to image, How can i send you that image?
Never knew CSS properties could be used this way until i watched your video's. its hell'a complex. But, i love how you explain every little thing. it's easy to understand. Thanks for such amazing videos. ❤
I'm not new to CSS in general, but I'm very new to "Modern CSS." What does "Modern CSS" mean? Does that imply use of SASS/SCSS? Just trying to figure out what Kevin is using here.
I thought let's check out that event, because I live nearby anyway. But dang, why is a 2 day conference that doesn't even include a hotel room €816.75?
Nice work, Kevin. Out of curiosity, is there a way to afix a centerpoint (horizontal and vertical) in pixels of percentages for centering an image? Might make it possible to recreate the Ken Burns effect. It would have to be pulled from some sort of variable, but would be the starting point to making it possible.
Wow amazing. but.. if i have the situation like this video, I think I will just using the javascript and css together. haha But I understand the how it works. Thank you kevin
Actually solution with grid is very cool :) Have some notes: - css variables seem not to be very useful as they can't be used in css selectors - auto for top and bottom rows of grid are fine, but they wouldn't completely disappear as there will always be a vertical gap near them - I thought z-index could've been solved by transition instead of animation, but maybe not as I'm not sure about overlapping shrinking and growing images If I try to make it without :has, I would probably use display: contents - it would've help to place images into grid without absolute, but I do see the problem with positioning texts in that case. Have to think about it.
Since the images are inside links, any alt text will be primarily experienced as part of the link name. Link names should describe their destinations so what each person looks like isn't appropriate. The link destinations also have the same images where they're also treated as decorative; because they're still adjacent to the individual's name, some will say that's okay but I think they should at least have the individual's name as alt text so screen reader users know the images exist and who they're images of. Ideally each speaker would also provide how they want their photo to be described to avoid the awkwardness of someone else writing it.
Couldn't you do this by having the image and list in 2 completely separate columns and use :has() to identify hover and modify the content elsewhere? With :has() it seems like you can change any element on the page based on the state of any other element. Then just use aria to connect the names as captions for the images.
You could, but it'd be more work imo. You have to have a :has() for each list item/image. It could work, but I think this is easier and has simpler HTML. And better browser support 😉. Granted, you don't need to select the ranges like I did here if you do it that way, but this was more fun 😅
Why would using JS be easier here? If you wanted the images separate to make it easier to put them on the grid, then you could use :has(), or even a ~ Combinator for better browser support, and do this too... The ranges might look a bit odd, but I don't see this as being any more complex than the JS you'd need 🤷
Wow. Using position absolute to elevate a child into the grid of an ancestor! 🤯 Thank you for the tip!
Glad you liked that one, and thank you so much!
Grid is complex to use, but man is it powerful !
That z-index hack is neat, definitely going to use it in the future
Never knew that position absolute/relative can be used together with grid. Super interesting!
I really like using named grid rows, columns, and areas like you've shown here. I learned it from an earlier video of yours, it's such a useful tool to have available!
To polish that z-index-hack you could add ease-out, so when animation goes backwards it's speed is higher at the beginning and once you hover on different object z-index difference is not that noticeable. Also I really like your approach to designing styles in general so it's really easy to use once the scale of a project gets bigger, there's definitely a lot to learn from you
great content! it is not the first time you show us position absolute with grid to position descedent elements in a grid, but it is something easy to forget, so I glad you did this and show how powerful grid can be.
That was a genuine mind blown 🤯 moment for me.
Kevin, they aren't zoomed on the eyes, they aren't zoomed at all. The only thing changing is the visible area of the image. There is no zooming or scaling happening, man :)
They aren't zoomed but they are all positioned on the eyes in the thumbnail view. The eyes are not all in the same location on the images but they are all captured on the thumbnail
Hey Kevin, I'm new to the world of development and I've heard of CSS frameworks. I've never seen you using them, so I was wondering if was worth to learn one. I have the same question regarding SASS as well. Could you make a video about it? Thank you very much.
This is amazing! When i saw the markup i wasnt sure how it would work. I was trying to play with position: absokute on grid-child pseudo elements and it wasnt working. I wonder what i was doing wrong. Very fun how-to!! Congrats on CSS Day spot too!
A lot of very ingenious stuff here. I was waiting for the focus on the eyes of each picture, but I suppose you just have to tweak each image independently.
This is mind blowing, dude! Thanks for teaching us ^)))
So why this method (explicit grid rows and columns) vs using the intrinsic size of our images to dictate the image column width and allowing as many columns will fit into the parent container (and auto rows for as many items as we have in the list)? This seems like it would be more flexible if you added or subtracted a bunch of list items (or wanted to have the content width to be flexy as well).
hot damn -- I learned sooooo much watching this. The animation trick is awesome. You should put a link to those three videos you did that explain naming the grid lines (the fence posts! Why doesn't anyone use the fence post/fence rails analogy explaining grid!).
Really very useful thanks for sharing your valuable knowledge love from India ❤❤
How woudl you add that } bracket in there? Great video as always.
I really love the way you think. Very clever use of the nx+b function in the grid ! Chapeau .
thank you for sharing
Which theme is he using for Vs-Code ? any idea?
Loved it! Thanks Kevin❤
I once used absolute/relative on a grid, until today I didn't know it was so wow :D
Nice! Congrats and looking forward to the eventual YT videos from CSS Day.
My brain exploded when he named the rows and columns and then used grid-area 🤯
This is cool. I'm really interested in the opinion of a CSS power-user like yourself: To me, as someone with very limited working knowledge of CSS (I'm mostly a backend engineer, also have significant TS/Angular experience but I literally use Bootstrap for everything and only tweak in scss), every cool thing done in CSS feels like a hack or a system of several hacks that are completely unintelligible without context/extensive comments and that I would never feel confident or comfortable using for anything important. Does that feeling go away with CSS proficiency, or is that just how it is?
Love. this is such a fun, logical and simply powerful sign of how far this has come.
Very cool, I like the little hidden tip nested within the project.
Can't wait to see you at CSS Day this year Kevin!!
Hello, Kevin! There is a question just of a kind "Can we make it by CSS":) Do you remember the effect of Telegram's erosion of a message? It's like a dispersion, blowing up to the moleculas!
Do you have an idea how could we make it through CSS??
I am your big fan. Love from india❤❤
I will be looking forward to your talk, Kevin.
You can use grid-column on not directed child grid items????!!!!!!!!!!!! Why I cant find any articles about this
😍😍😍
You could play with custom properties set on each image to have the effect you want on the eyes
Hello Kevin,
Thank you so much for the lovely content which you create and share for the benefit of so many people (myself included 🙂). I learn so much here. This video specifically has some really interesting stuff going on, but what I actually find myself asking, is something much more basic which keeps coming up in a lot of code which I see…
In your code, you wrap the with a and as far as I can tell, this wrapping is not required for any of this to work. There is of course the semantic aspect of denoting that this is a distinct section of the markup, but imho, the itself could function in that capacity well enough. Semantically the denotes a section of the code which contains list items, so why the extra wrapper? I see this in a lot of code and I keep wondering if I might be missing some purpose of this… (it is of course just an example of more general question).
Another thing which kind off bounces of this question, is the tendency to give classes to almost any element which is referenced in the CSS. There seems to be an aversion to using descendant selectors which would target elements just as easily. I find using them easy enough plus it keeps the name space cleaner and easier to manage without conflicts. The result of less wrappers and class names is a cleaner markup with less naming issues. It is easier to maintain and is more legible.
One last question which is again kind of basic and related to the other two, is how many levels of nesting make sense when writing nested CSS. I love that we have nesting in CSS natively now, but I find that excessive nesting quickly defeats the purpose of an easier dev experience… would love to hear your thoughts on all of this, and again, thank you 🙏🏻.
I was thinking that there was something to do with clip-path: inset() because it's clearly not a scaling up that is going on, but the clipping leaves empty space around the images (I tried it in the codepen). It works, but I haven't figured how to get the css to "ignore" the clipped portion and make the grid compact as it is. Of course, they're using background-image (cheaters! LOL) and ideally the images would be identically sized and already cropped so the eyes of everyone would be roughly positioned in the same space.
15:40ish The row position does not seem that maintainable for INF speakers. Guess with SSR could have the loop of the data from DB set-up multiple new CSS.
Now yes over the eyes would almost always need custom offsets, but that could also come from the DB with the name & other stuff.
WTF I thought only only direct children could be grid items unless you did "display: contents"... I had no idea you could control absolutely positioned elements with the grid!
Actually Kevin's is more clean isn't it? At 23.53 you see there's an z-index issue in the original design. Nice work!
I'll try to come. Would definitely be nice to say thanks in person :)
Hi Kevin Powell,
Your video content too much important.
I want to show you a shape can you create that!!
Shape in to image, How can i send you that image?
This is new to me but it still confuses me and makes me feel like I still need to learn about this "nth" and "keyframe" thing.
Hey Kevin, just to let you know you can pronounce "Roel" as "Rule". It's not some sort of Spanish name 😄
Never knew CSS properties could be used this way until i watched your video's. its hell'a complex. But, i love how you explain every little thing. it's easy to understand. Thanks for such amazing videos. ❤
tailwind css will die seeing these grid hacks. Also, cant we just give z-index:1 to all images by default?
Ick, not very adaptive if you have an unknown of changeable number of people to show. Is there a way to fix that?
I would have been positive that using absolute positioning would break the ability to set grid positions as well. Interesting that it doesn't...
CSS Grid always give me pain. But not anymore.
Great job I love your videos❤
Bring some brownies back, Kevin!
I'm not new to CSS in general, but I'm very new to "Modern CSS." What does "Modern CSS" mean? Does that imply use of SASS/SCSS? Just trying to figure out what Kevin is using here.
Unless he means using CSS3?
I thought let's check out that event, because I live nearby anyway. But dang, why is a 2 day conference that doesn't even include a hotel room €816.75?
I live close to Amsterdam. I'm coming for sure. Edit: If I make enough money, I'm a broke college student and didn't expect the price to be that high.
Nice work, Kevin. Out of curiosity, is there a way to afix a centerpoint (horizontal and vertical) in pixels of percentages for centering an image? Might make it possible to recreate the Ken Burns effect. It would have to be pulled from some sort of variable, but would be the starting point to making it possible.
Wow amazing. but.. if i have the situation like this video, I think I will just using the javascript and css together. haha But I understand the how it works. Thank you kevin
Very interesting, I just can't believe what can be achieved with CSS. A bit over my head, but great video
Recreate TH-cam ambient mode
In some strange way I actually hope the "AI"s are learning from you. Nice work as usual.
Kevin, have you tried using display: contents?
What about using counter css functions with % and / to set columns and rows into the grid for the img ?
Would be so great to meet in person after all those evenings spent together🎉
Isn't it just a :has selector?
Expect 10 years old solution to be more interesting :)
Actually solution with grid is very cool :)
Have some notes:
- css variables seem not to be very useful as they can't be used in css selectors
- auto for top and bottom rows of grid are fine, but they wouldn't completely disappear as there will always be a vertical gap near them
- I thought z-index could've been solved by transition instead of animation, but maybe not as I'm not sure about overlapping shrinking and growing images
If I try to make it without :has, I would probably use display: contents - it would've help to place images into grid without absolute, but I do see the problem with positioning texts in that case. Have to think about it.
This was super rad! 😎
For the image alt, should they not describe the image? "A 40 year old white male with brown hair"?
Since the images are inside links, any alt text will be primarily experienced as part of the link name. Link names should describe their destinations so what each person looks like isn't appropriate.
The link destinations also have the same images where they're also treated as decorative; because they're still adjacent to the individual's name, some will say that's okay but I think they should at least have the individual's name as alt text so screen reader users know the images exist and who they're images of. Ideally each speaker would also provide how they want their photo to be described to avoid the awkwardness of someone else writing it.
Couldn't you do this by having the image and list in 2 completely separate columns and use :has() to identify hover and modify the content elsewhere?
With :has() it seems like you can change any element on the page based on the state of any other element. Then just use aria to connect the names as captions for the images.
You could, but it'd be more work imo.
You have to have a :has() for each list item/image. It could work, but I think this is easier and has simpler HTML. And better browser support 😉.
Granted, you don't need to select the ranges like I did here if you do it that way, but this was more fun 😅
No way! You’re coming to Amsterdam ?! 😮 I guess I’ll have to come then 😊
Ah wait , tickets are nowhere near affordable 😂😅 maybe someday if I’m able to save up some money I can afford such a thing . Good luck 🍀
Every time you reload the CSSDay side the speaker lineup order changes. How would YOU code that?
Just map a randomly sorted array?
Just a bit of JS there, not too hard 😊
my oh my!
Grazie!
Thank you!
complex css is hard better use js for these effects and actually very less js is required for this effect
Why would using JS be easier here? If you wanted the images separate to make it easier to put them on the grid, then you could use :has(), or even a ~ Combinator for better browser support, and do this too... The ranges might look a bit odd, but I don't see this as being any more complex than the JS you'd need 🤷
First comment
1st