Cool 3D grid layout | Can I clone it?
Vložit
- čas přidán 26. 07. 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 CZcams 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.
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!
Had to double check it was a Kevin video
I love how you actually show the whole process, not just magicaly knowing everything. It helps me feel less like a failure XD
I thought I clicked on someone else's video so I had to recheck if it's Kevin. Fantastic Video as always
Same
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 CZcams.
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!!
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.
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!
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!
Love these style of videos, please keep them up! I feel like I get more out of these than the standard tutorials
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!
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 ❤️
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
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 😊
This video is an absolute treasure trove of knowledge! The comments too, Thanks Kevin and the awesome CSS-loving fanbase!
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 :)
Big up to youu Mr. Kevin 👏 this is amazing !
It is superb! Thank you Kevin for all knowledge you share with us. Love you :)
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. 😬
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 ❤❤❤❤
This was awesome...
Learned a lot about CSS and the grids on this!
Awesome video.
please make more on this format this is very educational and interesting, great job
Seriously dude you’re a big inspiration, I appreciate it.
what a beginning!!! Super hilarious!!!
Wooow... This was amazing start to finish.
2:25 in and the tutorial already "payed" itself. Thank you very much for your always awesome content and insights.
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.
Awesome job buddy. Thanks for sharing 🙏
Nice work. I really like this format. Keep it up.
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 :)
Wow that was awesome to watch. Very educational. Thank you :)
Nah man, Kevin is so nice. he doesn't block anyone.
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.
Really enjoyed this
This is my fave type of video
I learned a lot from that. Thank you for sharing.
Thank you Kevin
Always a fan.😊
That trick on left was awesome
I was planning to watch 10min and I finished the whole video Haha ! Great video ❤
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
always relevant.. Thanks Kelvin
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
To get the inverse that you wanted with calc() you just needed to divide instead of multiplying :D
I swear I learn something new in every single one of your videos 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.
loved your process and hope I could use some of your thought process. 😊
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
awesome work Kevin.. :-)
that missing at the end for the first 10 mins was driving me up the wall :)
This is super crazy 🤪 fun cool 😎
That's dope!
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 :)
Your definitely legend 🔥🔥🔥🙏
The fallback strategy at 11:30 is really elegant
Grid areas are great in situations like this one. They are just so much easier.
Great way to outsource my difficult dev work, I'll call Kevin 😂
That is one insane website 🤩
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.
Definitely like this style of video! Although I find myself shouting out answers lol.
THE CSS KING
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
This is more entertaining than a game stream😁 for me
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.
Wow Caleb ! Never thought you were in css
That look at 47:40. lol I feel ya, man.
47:43 That's why I learned Backend first ))))
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 :)
47:36 we have all been there and thats the reason we love coding because afterwards 😂
Now I understood he is a CSS king 🤴 even if he says he isn't!
GREAT!!
Thank you, for magic!:)
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.
it would be awesome content revealling how they did it at the end
I'm pretty much learning grid now.
that was the best intro ever lol what you mean you blocked my number lmao
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
amazing
Hi kevin, quick question: @ 23:32 if you switch the order in HTML of the anchors "anti slippage" and "dex liquidity" , wouldn't that solve your positioning problem?
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
u r amazing ❤❤❤
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'm not sure it's a default setting, but I think you can Ctrl + Alt + W to emmet wrap
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.
I like videos like this
You can steal fonts that are paid by using the network tab, it shows outbound requests for fonts which you should be able to download
Question please:
Around 44:30 - you tried to set min / dynamically transform it according to the screen..
1. Why didn't you simply set a padding -Right - Left with Precentage (%) - so it will auto re-size it?
2. Regarding adding a Position: Relative on it - didn't you had to add a Position: Absolute - for that to take place?
Thanks in advance!
Eyal :)
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 ☺️
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
How do you wrap a whole highlighted block in a div (or another tag)? After CTRL + SHIFT + P, I don't know what to do next
Damn, i dont think i would be ablde to do that... Learning frontend.. I think u can create something like this with years of experience