Cool 3D grid layout | Can I clone it?
HTML-код
- Опубликовано: 26 июл 2024
- My buddy @codebreakthrough has asked me to recreate a cool-looking layout with a 3D grid, so let's give it a shot!
This is part of a series where I show my first attempt at something, with very little editing, to give you a better idea of how I tackle problems and show that even the best of us get stuck!
✅ Submit suggestions for this series here: docs.google.com/forms/d/e/1FA...
🔗 Links
✅ The repo for this project: github.com/kevin-powell/3d-gr...
✅ Andy Bell's Modern CSS Reset: piccalil.li/blog/a-modern-css...
✅ Creating columns using Grid: • The EASIEST way to get...
✅ More on focus-visible: • Use this instead of :f...
✅ Performant shadow animations: • Use this instead of :f...
⌚ Timestamps
00:00 - Introduction
00:42 - What we're trying to build
02:00 - What we are starting with
02:36 - Writing the HTML
08:13 - Starting the CSS
16:14 - Creating the grid
27:11 - The hover states
29:33 - Submit ideas!
30:21 - Fixing the border-radius
31:36 - Trying to make the grid 3D
37:45 - Getting perspective to work
40:01 - Trying to slide the grid under the text
47:49 - Fixing the sliding behaviour
56:21 - Improving the perspective
58:58 - Adding the shadow
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RUclips channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
You could've called... 😉🤣
Great video, great work.
Regarding the issue of perspective. Yes, it can be on the direct parent, but it can also be on the parent above it (the container), or the section above the container, or even on the body itself. But it means that all of the divs 'in between' need to have a preserve-3d on them.
That means you could have kept the perspective on the section, but then you had to add preserve-3d on the container and the grid itself.
I knew I needed a preserve-3d 😂 - thanks for the insight there... I was sure what I was trying to do should work, lol. I'll have to clarify in a video that looks more on getting started with 3D stuff that's a bit more polished and researched.
@@KevinPowell I know why you got confused here. Last week I found a code that I did three years before using rotateY. It was working fine back then on both Chrome and Firefox. I didn't have the preserpective and preserve-3d on the direct parent. Now it still works on Firefox but not on Chrome. Had to do a lot of testing to get it to work on Chrome and yes now you have to use preserve-3d on the direct parent. Amit's comment is really helpful to understand what was going on. You should have done this video a week before and it would have saved hours of my time. 😁
The feeling is mutual
Makes so much sense... Maybe preserve-3d should always be followed by adding it to all descendants.
Had to double check it was a Kevin video
Recommendation: In the end, once you're done trying to clone it, it would be cool to compare yours to the CSS of the original to see how different the code is (also showing different approaches to same problems).
I'd also say, about 3/4 through the video, you should have broke from the original design and improved on it instead of trying to copy some broken junky behavior.
EXACTLY!
I thought I clicked on someone else's video so I had to recheck if it's Kevin. Fantastic Video as always
Same
I love how you actually show the whole process, not just magicaly knowing everything. It helps me feel less like a failure XD
I'm loving this series, really really useful to see a glimpse of what actual work looks like vs a tutorial.
Really awesome. I would vote for this style of video where you show your mistakes and then talk your way through them, it is so useful.
Same, I watched it from start to end, and for once I really felt like I was learning. It's 100x more insightful than a normal tutorial.
Just wanted to comment saying I super appreciate you taking the time to build the CSS like it's part of a larger project.
It provides a lot of insight into how to think long-term about keeping CSS clean as a project scales, and it's something that's missing from a lot of JS/CSS/web dev content on RUclips.
In particular, the mix of utility and modifier classes and making use of the modular nature of using var() as you did is a great middle ground between using plain old CSS and something like Tailwind.
Dang I love videos like this - seeing someone at your level still getting frustrated and dealing with it then coming back and owning this challenge was awesome - love it Kevin!!
People like me who are still learning web development will be indebted to you. Because you can give good quality content for free. Always appreciate you sir. Love you ❤️
Great tutorial! Hopefully I can help simplify sliding the grid under the text:
You had
“left: calc(calc(1000px - 100vw) *-1)”
And you can use algebra to “open the parentheses” and get
“left: calc(100vw - 1000px)”
Think about it this way:
As your screen width grows, you want the distance from the left edge to increase, and as it shrinks you want it to decrease, even become negative.
As you play with perspective you might find that you want to change the scale at which the left margin grows, or it’s offset, or as you did set a min, but that would be the simplest way to create this slide effect.
I also had math in mind. For me (x - y) * -1 is equal to (y - x)
margin-left: calc(calc(-3rem + 3.5vw) * 4);
I guess give smother effect. Have a positive margin or 0 margin and then gradually make it more negative.
Wow, I am so impresed that you were honest about your frustration and that you show how normal it is to struggle with challange even for such a pro like you :) respect!
This is beautiful Kevin!!!! Thank you so much for this things. This is the kind of stuff you show to people and say: "This is just CSS" and they do not even understand what do you mean because it is mind blowing!
I love the variety in your channel, and love this kind of content in the mix! I feel like the speed you go at is perfect, and it is so cool to see somebody at your level just playing the game!
As someone just getting starting in code and web dev, these videos are incredibly helpful and inspiring to see. Thank you for taking the time and sharing your process!
I like this new exploratory style in this video very much. In the past I felt like I was exposed to a lot but it was hard to remember it when it was all done. In this video, where you were exploring more, I felt like I could follow along and understand your thought processes and things just clicked more. Thank you for your great content!
Love these style of videos, please keep them up! I feel like I get more out of these than the standard tutorials
Nah man, Kevin is so nice. he doesn't block anyone.
I can't believe I watched the entire hour here :)
I am really glad you showed your thinking process and trial&error. I really enjoyed it!
what a cool 3D design too :D
I really like this kind of video! It's very interesting to see how you start with the design, break down everything, focus on this and that and how you solve your problems! I also learned so much new stuff again and it's way more understandable and more pleasant for me to watch than videos where people know exactly what they have to do and just write line after line if you know what I mean 😊
kevin, i just really enjoy watching your videos. you’re such a warm presence. i admire you. you’re a wonderful teacher. thank you for being you!
Keep doing this, it's very interesting to see how you think and figure out issues step by step, I love it
Glad there's tutorials on youtube where the producers care about a11y. Good to hear why you pick links and why you put aria-labels on them :)
2:25 in and the tutorial already "payed" itself. Thank you very much for your always awesome content and insights.
Hey Kevin, I love this kind of video, it shows me how you think and how you solve problems and as a beginner I needed that. thank you so much ❤❤❤❤
Yaay, I'm very happy now because I discovered that being stuck when I'm developing a website is totally ok. Whenever I'm being stuck, I thought the problem is this is not my field
But when I started watching his video I'm very much motivated and inspired ✨
Thankyou so much Kevin for the video 📹. Means a lot 🚀
Dude everybody gets stuck especially using CSS. Me you everybody. (PS: Kevin doesn't get stuck. He's lying. He is not a human so we cannot blame him for being a god) But yeah, It's alright to get stuck. It enables us to learn new things.
Love your work and the style of this videos. It's so nice to see how you try to find the solution. Gives me hope for my work. 😬
This was awesome...
Learned a lot about CSS and the grids on this!
Awesome video.
It is superb! Thank you Kevin for all knowledge you share with us. Love you :)
please make more on this format this is very educational and interesting, great job
Big up to youu Mr. Kevin 👏 this is amazing !
That trick on left was awesome
This video is an absolute treasure trove of knowledge! The comments too, Thanks Kevin and the awesome CSS-loving fanbase!
what a beginning!!! Super hilarious!!!
Seriously dude you’re a big inspiration, I appreciate it.
Wooow... This was amazing start to finish.
Awesome job buddy. Thanks for sharing 🙏
Nice work. I really like this format. Keep it up.
Wow that was awesome to watch. Very educational. Thank you :)
I was planning to watch 10min and I finished the whole video Haha ! Great video ❤
I swear I learn something new in every single one of your videos lol
I learned a lot from that. Thank you for sharing.
Great vid Kevin! Btw in VS Code if, what you want to select is in a single line under each other, you can push the keys [Shift] & [Option]. Makes it so much faster :)
Really enjoyed this
loved your process and hope I could use some of your thought process. 😊
Hey Kevin, I really like your videos. You have inspired me to get back into writing code rather than wordpressing it all the time. I would really like to see you do a video like this one, where there is a spotlight effect shining on the feature grid. I have been playing with this idea today and it is not quite right, so I thought I would write you and give you the idea. Thanks, and keep up the great work, it is really inspiring.
Thank you Kevin
This is my fave type of video
always relevant.. Thanks Kelvin
Always a fan.😊
That's dope!
To get the inverse that you wanted with calc() you just needed to divide instead of multiplying :D
one word.. LEGEND!!!!
Hey Kevin, at 7:08 you can hold the middle mouse button and drag down to get multiple cursors instead of Alt + clicking each line!
Ah, is that it? I always forget that shortcut 😅
Alt+shift+cursor down should also work i think.
ya you don't even have to drag, just place the cursor at start, then alt+shift+click at the end
awesome work Kevin.. :-)
that missing at the end for the first 10 mins was driving me up the wall :)
I don't work with grids pretty much often but rather than having a grid inside a grid, you can instead do a flex container with the feature grid inside. Then have the flex container have relative position and the feature grid an absolute position. After that have the feature grid get its width wide enough on wide screen and set the right property to 0 so it would stick to the right side of the parent flex container. Finally have the feature grid z-index of -1 and try making the screen smaller. This way we let the feature grid flow by itself and go under the left section when the screen shrinks.
* width sizes are just sample, tweak to your desired number
* 3d properties and grid are omitted
.flex-container {
display: flex;
position: relative;
max-width: 1200px;
}
.left-side {
min-width: desired minimum width;
max-width: 50%;
}
.featured-grid {
omitting grid props....
width: set most suitable width on wide screen i.e. 700px ot something;
position: absolute;
right: 0; // actually this should be a negative number like -10rem but to demonstrate making the grid flow under the left side I will just stick with zero
z-index: -1;
}
On paper this should work without calculating offset for featured grid since it gets push to the left the more we shrink the page until it goes under the left element. This is really fun Kevin, I get to use my brain power a little
The fallback strategy at 11:30 is really elegant
You aligned the feature grid to center at the very end! That had me triggered hard. That would of been much earlier for me. LOL
Kevin you are a boss.
Just one small suggestion, since you’re using windows, there is a built in window manager. Press windows+arrow to snap windows around to half, full, quarter, third, etc. I recently discovered this (by accident) and it is a lifesaver/game changer.
THE CSS KING
This is super crazy 🤪 fun cool 😎
Love the video. I would really like to see a video on what you have setup as a local webserver that you are running. Thanks :)
Grid areas are great in situations like this one. They are just so much easier.
Your definitely legend 🔥🔥🔥🙏
GREAT!!
Great way to outsource my difficult dev work, I'll call Kevin 😂
Definitely like this style of video! Although I find myself shouting out answers lol.
Since people are mentioning snapping windows around you can also create a new desktop with win+ctrl+d and then you can quickly switch between them with ctrl+win+left/right arrow. It may be better for presentations than alt+tabbing.
This is more entertaining than a game stream😁 for me
That is one insane website 🤩
47:43 That's why I learned Backend first ))))
Now I understood he is a CSS king 🤴 even if he says he isn't!
Thank you, for magic!:)
At 15:40 you say left and right padding of 1rem, but you set the first of the two numbers. You got me all doubting myself (and even look it up), but that really is the top and bottom haha
That look at 47:40. lol I feel ya, man.
amazing
First such video of yours that I'm watching ("stream of consciousness"). I can totally see why people like it. Feels much more helpful for developing my own thought process than a normal tutorial (though these have their place too). More please.
u r amazing ❤❤❤
47:36 we have all been there and thats the reason we love coding because afterwards 😂
it would be awesome content revealling how they did it at the end
Wow Caleb ! Never thought you were in css
I'm pretty much learning grid now.
I'm going for my third month at my first programming work. It's actually hilarious how much stealing (if we consider stealing like copying/using bootstrap stuff, or libraries, or components that already exist). It's pretty much 50% of a jr's work. The other 40% it's finding out why it doesn't work, and how to make it function. And the other 10% it's actually doing the jira tickets.
that was the best intro ever lol what you mean you blocked my number lmao
Hmmm, how many rows...
Uhm, master Kevin, those rows don't need to have the same height, do they? 3 rows should work fine there, if the middle one is not too high, and the first and second one adding up to the third. (2fr 1fr 3fr)
And the items can be named to give them a "role" in the layout. So no numbering the children. And placing them with grid-template-areas is so much easier than using spans. And I have seen those work with media queries.
The sound advice to take away from this video: If you get stuck, go get lunch!
Nice! Thanks for opening me up to CSS perspective. A little comment on the original design, as much as the concept is cool, it's not very obvious to users that the icons are buttons.
thought the same! looks more like a banner of some sort. It looks cool but i'm not immediately drawn to hover and click there.
Oh, totally. I don't think it's a great design, but saw it as a fun challenge that could open some interesting doors for a video :)
Dear Kevin,
Just found out about you last night.
Thanks for your time and effort and for sharing and inspiration!
Do you have a complete course we can take?
(maybe like UDEMY or others?)
Thanks in advance!
Best Regards,
Eyal :)
I cant believe it took him more than 20min, something that me the noob Jr i am could do in 10, it gave me a little more confidence lol
MORE 3D MORE 3D 🍿🥤
I like videos like this
awesome video man just wondering how can i move the whole text box im trying to move it to the left i tried multiple thing it messes with the feature-grid
50:00 left: max(0, calc(calc(800 / 100vw) - 1px)) gives you a left value between [0; +infinite[.
800 represents the window width (in pixel) at which the left value will be 0.
you can't divide by "vw" using css calc
what you're probably looking for at around 45:00 is the reciprocal
I'm not sure it's a default setting, but I think you can Ctrl + Alt + W to emmet wrap
i think you could have used the inverse for the shifting (1/x) or the negative logarithm to make it less extreme
they're using media queries and use common break points with transform translate
Hey Kevin.. couldn’t you have used a calculated transform on the X-Axis for the 3D grid so it would have looked like it was moving in and out instead of just from left to right going under the text. I know it’s not what the design was originally but it would be a minor tweak for a better look, wouldn’t it?
BTW: love your videos and tips ☺️
right off the bat it does seem like a classic grid layout with a matrix2d transform applied to it
ive been obsessed with that function lately so it kind of makes sense
edit:
damn didnt know perspective existed.
You might not be into that but I would love to see you build something with Threejs