Cool 3D grid layout | Can I clone it?

ah time to do my research this project seems pretty cool but more importantly look at their website this is slick yeah i need to hire their designer i mean look at these icons are those buttons how how do you even do that you know i gotta i gotta call kevin he's gotta make me this website yeah um kevin uh it's caleb hey i was hoping you'd take a look at this website because i got distracted what do you mean you blocked my number i got a new number of course all right so here's the page that caleb wants me to try and copy and it is kind of cool with this i'll admit i like the effect i like the tilt and i think the most complicated thing for this is actually going to be at smaller sizes because that thing on the right actually like sneaks behind and still is and you know has like an overflow going on uh we'll we'll see what we can do there luckily for me the these are all images which i've already stolen from their site so the images on there that will make life a little bit easier and their font seems to be a premium font because if i come here and i go to uh actually i found it on default but um there's in firefox devtools there's a font thing so if i do that and then select it i think it's called gobold i'm just going to try and find something somewhat similar over on google fonts i think um but i'm only worrying about this we're not gonna do the whole thing because i think this is the coolest part of the site there's other like the animations and stuff are nice but this is what my challenge is going to be i'm trying to do and let's see how we can do it and if you haven't watched one of these series before it's sort of an unedited take unless i have a really long stretch where i get stuck so if there's something terribly boring i'll take it out but my full thought process on trying to implement something like this and yeah we'll see how we can do with it the feedback on this last time was really good so let's hope that you all enjoy it this time as well so i've made a folder here that just has my images and nothing else going on so let's make a new file which is my index dot html of course i made that inside of my images folder so let's drop that over there and we'll make a css style dot css file as well and drop it outside my images folder now let's go to my index and i'm just going to do an exclamation point and hit tab to get everything i need that is emmet and it's comes preinstalled in vs code um and copied layout for caleb all right so we're ready to get started let's just move this over here so i can see what we're trying to build i'm going to leave it like that because this is the focus and this part on the right is a little bit less interesting so what i'm going to do is just get the html written for this because it's pretty straightforward and then we'll worry about that part over here because that's i think the more interesting part and we can do that together all right so if we look really quick at what i just did for the this section right here um basic basically i have an h2 where i just have a few classes on there that are going to be used to style it i have my paragraph which is the text and then i created a div class of flex that's going to have my two links that are buttons in there and i don't know where that closing div is that's there it is okay good i thought i forgot it somehow and so yeah those will be the two buttons that are right here they do have a big gap between them so we'll we'll address that when we get more to there because there's different ways we could do something like that um and this is sort of the more interesting area so the first thing we'll do and i'll explain why i'm actually going to use grid on here in a second um i know what i'm going to do i'm going to do flex and then i'm going to large gap here um only gap gap hmm i haven't made a utility class like this before and that's why i'm sort of thinking about it um because if i made a gap class i want to be able to use it on grid or flex which is why i'm not doing like flex large gap or something um and if you're not used to the double the double hyphen it's just saying like it's a modification of that um i'm just gonna do large gap and we don't need it on that one but again i want to try and make something that could be used to continue a larger project and not just this one thing even though this is my focus right now so if i have this is grid what i'm also going to do then is i need to wrap all of this so i'm going to do a ctrl shift p and then i can choose emmet and then it's wrapping with whatever i had selected so then i can just do a div here i don't need a class on that i don't think and let's just hit save which should format my html for me thank you very much so we have my div class of grid this is going to be one column here and then my second column is going to come here so let's make a div and this is the interesting div uh this div is where we have all of these things and i'm going to click on one to see what actually happens that's a link right yes it's bringing me down to here but that's like an anchor link um i didn't see it update there so whoops yeah that's kind of interesting they're using some javascript there so you're not getting the you know so if you want to go back you actually have to scroll up but to me that's a link um it's just an anchor link not a button in my opinion so i'm going to make those links uh so that's going to be a div of what do we call this [Music] um feature so it's gonna be grid first of all we're gonna use grid for this for sure so grid and then um feature grid feature feature grid yeah feature grid it's like features right so we're going to call it a feature grid um so grid is a utility class feature grids less of modification and more of just like what i want to call this area um which is why i'm i guess it could be grid hyphen hyphen feature or something but um it's really something unique to here it wouldn't i assume wouldn't be something you'd reuse for different stuff in different areas though i guess maybe whatever i'm still i'm sticking with it like this um so here we have one two three four five six seven we have seven uh so we're just going to a dot where's new a feature grid yeah we're gonna do a um in each a so a times our a times seven and then each one has an image inside of it what's important for these because it's only images um let's do that did it work oh save it's so annoying okay i'm gonna fix this really fast uh and i messed one of them up still so annoying i was putting them all on the source there we go i was putting them as the href instead of the source let's also just come down on these just to make sure the links render properly um so one thing that's important here is when we have uh links that don't have text content uh we could do like an sr hidden thing for the content in there but what i'm going to do is come on each one of these and this would be like social links too or something like this i will come in with an area label to label them all so i'll do this quickly once again with this and what this does is it provides context to a screen reader that gets there they can't see the image even if your your image has some alt text on it it's nice that like you're providing an image there's no context for what that link is doing um so we we give an area you can give an area label to that link to just give the context for what happens if we click on it um so low fees and i'll fast forward this um really fast i'm typing those out and giving more context i have no idea what any of these things are i'm so out of the crypto world um okay so what do we want to do so now okay we have that all in place we can actually jump over to our css and start writing a few things in here um so i'm going to come in with uh no like this is where i think a nice reset would be a good starting point so i usually would start with um andy bell modern css reset and i mistyped that but we still got there and i can just copy this i'm used to using it i'm not going to break it down i've looked at it in more detail in previous videos so i'm just going to leave this basically here with what it's doing with one exception and without one it's not even an exception i just need to add some stuff now so let's just come here and say body first the background is black and the color is white because that's like the primary thing for the whole site so i don't mind doing that on the body that's perfectly fine i'm also just going to add some padding of like 20 vw 0. this is not something i would normally do it's just now when i let's let's get the preview going on this uh when i have this actually open in the browser i want um oh my css isn't linked let's go and do that that would help um link css there we go um so i just want space on the top and the bottom so i don't like it's not glued to the top because i'm only building out this one section um for now we'll change the font family maybe we'll see if we need to but font family will be saw serif for the moment there we go um so we're off to a little bit of a start it's not a fantastic one but we have something and okay a few things now that i want are some utility classes um and actually if we come and look at my buttons um and stuff like that these buttons i did two things on them i gave them button class and then button primary in a button accent because the button if i look at the colors on the original ones um i'm just calling anything that has this pink as the the primary color and accent is the blue that we see there and you can sort of do the same thing this is like primary link or something and then primary button there these are secondary ones here um things like that so it's like the two colors that are being used so i'm doing primary and accent it could be primary and secondary whatever you want um you know this may be that that's more of an accent or primary i think primary secondary but i already named them and i'm lazy uh so let's come to my css and do a few utility classes here i'll make them quickly um just you know i'll fast forward this part just so you don't have to see me write them all all right so the only thing i didn't set up was the text compressed for the font family uh but it's really fast i set up a text primary text accent for text colors background ones for background colors a flex class and a grid class and what i did on these is i did a gap and gap being on flex is the best with an undefined custom property because i didn't make my colors up here in my root but what i decided to do here was um i i really like doing this so it's an undefined custom property so if it can't find that it will default to the value that i've put here and so by doing this i have this one rem fallback which will be the default but if ever i need to like with my large gap then what i could do is have my large gap and say that the gap and then i can just say gap is like 4 ram or 3 ram or whatever i need i can do that on a modifier class like that or if i had like a section like this one which uh which that was my feature grid so um dot feature grid i can just modify gap could be like 0.75 ram or whatever i need there so it's just a nice way to be able to modify things quickly and easily with custom properties so that's basically what i did i stole the colors just through my dev tools and now i think we're ready to go and get on over to here oh i realize the font size on here is also bigger a lot bigger so that's my h2 let's just add a font size 700 because it's pretty big so on my body let's set up a like three font size or we'll just do two i think we'll have my font size font size 700 which is going to be i don't know how big that was let's just say it's a 3.5 rim and i'll have a font size 400 which is my basic one which we'll say is 1.125 rem which goes up to 18. so two other things we'll do is on my body here uh we'll say the font size right here font size is my var font size 400. and we also want to create that utility class i have text utilities here so we'll do it here uh font size 700 will be my var font size var font size 700 again this seems silly just trying to clone this one thing um but i do find that it's you know it's worth i'm trying to do it as if we're building out a bigger structure here uh i guess on here we can also just do a line height line height of one point or maybe even one would be enough there we go okay that looks a little better and closer to what we want except my base one might actually be a little bigger there we go okay so i'm happy with that i didn't style the buttons i don't know if i'll bother doing them i might just leave this for you guys to take over and finish off because i want to focus on that thing on the side there and getting that to look the way it needs to look so let's scroll all the way down and here we can say my featured featured grid grid and we can actually start styling it so dot featured grid and this is going to have a grid column a grid template template columns of 1fr 1fr you could use repeat there but i'm faster that way i called it featured grid right feature grid feature grid now we have two columns awesome um one other thing though is this area here this would be grid i'm going to call it columns uh grid columns and the reason i'm doing that and maybe i could just do that same thing then let's grab grade columns here no it's gonna be so different okay no we're not going to do it there so here i've grid let's just do grid columns so it's a grid auto flow of column there we go there we go uh we want these to be even i'm just going to assume anytime you have the grid columns you want them to be even so we're going to do a grid auto column of 1fr these are things that i have talked about before this has to be s this is not with an s mixes me up every time ah there we go two equal columns uh which i think is more or less what they have with their layout maybe they're not perfectly equal um and section okay we'll just take this from here all the way to here shift control p wrap and dot container save okay um so one more utility class that we can use just to keep things off the edge of the screen uh we'll do it down here grid flex we'll do here dot container uh we'll just say padding is two ram on the or we'll do one one ram on the left and the right uh zero top and bottom and then we can say a max width of i don't know 65 ram might be a bit big for what i want to do now and then a margin of zero auto to hold it in the middle and i'm going to bring this down even though i think that's you know just so it doesn't get too big for the demo that we're working on right now um and actually i'm gonna make this a bit bigger just so we can keep my face from covering stuff um so there we go i think that should be good we're getting there we're getting there now let's go on my featured grid um except we don't want to a we want three i think one fr maybe let's go back to the original one oh it has four it's getting so tiny it's this is much wider than what i'm setting up uh in mine what i'm going to do is let's just pull this down and move this up so i can keep that in view or maybe i should just take a screenshot of it or whatever we'll move this up like that and just scroll down [Music] and something like that like that okay so i can see what i'm trying to create at least uh sorry if my face is covering it a little bit in the demo but you should you know we're we're focused on that top part so this is okay let's stop writing frs then this will be a repeat of four one fr so we get four columns 14 c and c columns whatever we get four columns so that's good now is where the fun begins um so we will turn on my grid inspector so we can actually any time using grid please please please use your grid inspector it just makes life so much easier so we can turn my grid on so we have okay how many rows do we have we have two i'm going to say there's four rows like how many one two three rows maybe it's no but i can't i can't three it can't be three rows and i could inspect them to see how they did it but i don't want to do that i'm gonna six rows one two three four five six i'm gonna say there's six rows grid template rows of repeat six comma 1fr okay it looks really broken right now but we're going to fix it the question now is okay so let's see if i can do this we're going to say featured feature grid because to me the images are less important than the order that like if you're putting different elements on the grid you always want them to follow this same pattern at least that's how i'm going to think about it so if i if i change the order of these this is the pattern i want i want two tall ones on the sides these are always here and then this big one over here and i always want that to be the same so if i always want that to be the same we're going to say a uh or we can just do nth child we won't limit it to links nth child and we can i think get these right we have the first one so one first child i could just do first job but whatever we'll say ends child one can i do like a pattern here one four five and seven there might be like a one n plus something we can do for that uh but i think the easiest thing to do one okay we have four of them one so one two three four remember css you do start counting at one not like other languages five uh five and seven there might be another way we could select those with a smaller selector but then we want those to be a grid row of span three span three okay i think that's working we're going to leave it like that doesn't look how i was expecting it to i won't lie let's go with my uh the second and my third one are going to get a grid row of span 2. and last but not least is the last one which would be one [Music] one two three four five six six the sixth one is going to get a grid row of span four i thought that would just sort of fall into place oh okay so this one's span four and this also okay this will help grid column of span two oh no i didn't do my columns good okay i have one yeah that's okay no one two that should be okay then sorry i thought that i might need more than four columns but i think four is okay these look narrower here but i think it might just be the skew that's on it why is anti-slippage going there i don't get why my anti-slippage is in the wrong spot um i just want to see the order of these then to see if i muck things up so we have one two three four that's good anti-slippage decks and that one oh okay so this okay because yeah okay okay so what's happening is the i haven't done grids like this in a while the grid is so let's add backgrounds to these guys why do i not see oh it's the wrong grid if i tune that grid on again um let's give all of my let's just say star um background of hsl 360. i want to be a bit transparent so that's why i'm doing hsl 50 fifty percent fifty percent over point two or something um so you can see the images there uh that's okay we'll just let me copy this we're gonna do different background colors on these so we can actually see what's happening this one can come in hsl this could be like a 240. and there we go okay so these guys are actually going all the way down to here so this anti-slippage is trying to go over to the next column and what i'm going to do for now is let's make that font size smaller it won't matter okay let's just leave it like this they're tiny but it's fine uh and we'll just boost the opacity on this up to one be easier to see there we go so this guy we can't see because they actually have a background color on the image um but this guy here is actually spanning across two right now so it's going it's using all this space and then so these flow like that now this cell is the next so it's like when the grid's looking at this it's going all the way across okay i can't put anything here i can't put anything here i can't put something here but oh i can put something here because it's always going across across across and so it gets to here and it goes oh i can put something here so i will and so anti-slippage gets put here it can't fit decks here so dex drops down to here because this is like the next it can't fit here either because it's a span too so it goes i can't fit here i can't fit here okay here's the next place i can go that fills up this whole area this is the next one so it goes after here where am i going i'm going down to the next empty cell which happens to be here so right now it's a little bit of a mess now i'm not sure if this can fix it or not but we're going to try grid auto flow of dense is not going to do it okay i was hoping that would just sort of sort things out the only thing that did was pull that up into this empty slot here so it just means we need to work at it a little more so one thing you could use grid areas for this uh the nice thing with good areas if you didn't need to redefine it within media queries it'd be nice and easy to do that they never did so i'm not going to like i can shrink that down and it stays the same all the time so this one is a grid column of so let's turn my line numbers on actually i just have to find my dev tools let's turn those grid line numbers on so we want it to go from line two to line four so we can say that uh that's my grid column so i can say start at two and span over two columns so that forces it and it's actually made new stuff because it couldn't it couldn't go here because something was already there so it's forced its way down to here but now on the grid row i can tell it that it has to start at line number three so we can say start at line three and go over four and then that slots into the spot we wanted it to go and it's going one two three four now i feel like my grid is a little mucked right now with how things are are going i'm a little concerned with why do i have a height that is so big on my rows um the gap is not i want to keep the gap the gap is good why do i have all this empty space here how did it decide the height of these rows um is what i want to know yeah so this is actually taking up those it's just the issue is oh i know why okay i was gonna try something else i'm happy i didn't i just flashed on me because the parent here is a grid right the the parent itself of because the parent itself here is a grid let's go back into the dev tools uh so this is a grid that means that this and this are set the height is a stretch now because by default items grid items like flex they'll stretch to match in height and that's why the rows are so huge so what i want to actually do is on my feature grid i can do an align self of start oh yes that worked cool cool it looks really messy with my grid on now so maybe we could turn off the grid inspector because everything is more or less in the right spot right that's actually nice cool so let's turn off the background colors now because we don't need those anymore oh my goodness what did i do okay that was fine uh so there we go that is more or less what we have here obviously we need to hover so we'll do that first because i think that's the easiest thing um so feature grid a will get a um i don't have to do anything right now it's only when we hover there's no transition for that shadow which is actually a good thing um because shadows suck like it's not the best thing for performance reasons and if you want to know how to do a performance shadow uh animation i have talked about it in previous videos so there should be a card popping up for that um but we don't have to worry about that so let's do my oh i i had what we needed let's just say feature grid a i'm gonna do focus and a feature grid a uh i put focus i went focus i want focus visible here and i want to hover here uh so when we hover or i don't know if they did it we're here they don't seem to have i i see it's actually getting selected they didn't do any focus states which naughty naughty make sure you do have them because it just makes keyboard navigation impossible without it and i'm doing focus visible so if i click it doesn't select it then keep it highlighted so if you want to know more about focus invisible i just talked about that the other day once again card uh but we'll s we won't really yeah we will see it in action i guess um so we're gonna do a box shadow on there uh it looked pretty big we're gonna do zero zero one it was pretty big two ram and it was like okay hsl we'll do hsl because if i do zero zero uh percent and then this value so a hundred percent is white and then so let's see what that even looks like uh so now it's a little bit too bright and a little bit too big so i'm gonna drop that down to a 1.5 and to drop the opacity on it like for me now i can just come here and do a point eight or something um so it's just an easy way to drop the opacity on that and let's go see what that looks like i broke it oh because i put commas if you do commas you'd need the comma 0.8 if you do spaces then you do the slash 0.8 there we go i think that looks pretty good cool all right so just a really quick aside before we keep going with this this is part of an ongoing series the last one i did had a lot of positives around it where i just build something out as i go you see my mistakes you see me trying to figure things out and so if you're enjoying this and you like this approach and you want to see me build something there's a link down below where you can submit things that you'd like to see me build can't promise that i'll get through all of them i will get through very few of them probably i plan on trying to do one of these videos maybe once a month or so so but and what i'm going to do is just go into the submissions choose the first one i think looks cool and looks fun i'm gonna build that out so there's a place where you can put in the link and a little short description of what you'd like to see me build because it's usually a component thing rather than a really big site or something so if you have any ideas you'd like to submit that is down below now let's jump back into the rest of this um one thing that's a little annoying i noticed is see how we have a hard edge on this and on these it's actually a round edge so i just assumed the pictures i got would be rounded off but clearly they're not so we do need to select these links and say that these links have a border radius which is pretty big border radius of say 0.75 m maybe um and there we go now i didn't think that would solve it i thought i would have to do an overflow of hidden on there too to stop it from sticking out but it looks like it worked and it's weird because the bottom one looks bigger than the top one but maybe i'm imagining things or maybe the images i grabbed were really weird so we will do an overflow of hidden as well uh there we go that actually is rounding them all properly okay so there we got the rounded corners i know the sizes are a lot smaller than the finished version we're gonna fix that um and actually because of how it's set up i might set a min width and and play around with it because it does overflow in a way but it like overflows underneath the text so that's gonna be a hard thing to do uh another thing we will have to do on the feature grid though we have that let's do my transform actually so here uh we'll do a transition of transform over 350 milliseconds ease in out and then here on this one what we can do is my transform scale of 1.15 maybe they get pretty big there we go oh maybe a 1.1 is fine maybe a bit less but i'll stick with that i think that's fine we're close enough there we go yeah i think that's actually looking pretty good super i'm happy so we're going to come on the feature grid now and let's come on the feature grid itself we have all the grids set up and then we want to come and say that we have a transform on this guy as well is it just a skew isn't it skew it's not a skew is it how do i do how do i even do that you know what it might be um i don't know if we need to preserve 3d on this or not is it a rotate z let's just put 20 degrees and see what happens what's y i always get mixed x or y okay let's do that and then here let's do a is it preserve uh okay we gotta we gotta do some mdming mdm preserve 3d i almost feel like it has to be on the parent though when you do this transform style i knew i was missing something um okay transform style trans form [Music] style preserve 3d 90 should make it disappear that's what i was thinking so if it's at 45 so that's rotating this way you can see how it looks flatter if we turn that off it's going to like stretch back out so i want on the y axis should be doing this but it's not preserving 3d um which is why this for some reason if i change that nothing is going to change i also want the transform [Music] ori gin to be on the right side um [Music] feature grid feature grid is inside okay what if we just did class is equal to um reserve 3d and then i don't even know if this is gonna work dot preserve 3d oh no i'm thinking the wrong thing with the preserve 3d i do need this but i think that actually stays here that actually stays here and what i want this one to be is perspective css perspective i need ammit with me css perspective mdn and yeah this is how far away you are so i'm going to put it here we'll change the class name in a second um we'll say first perspective is i don't know 10 ram and this is where i never know like how far away from something am i supposed to be so if i turn that off is it changing anything it's not changing anything i'm sure rotates the right one though because the idea is you're rotating it that way but in a 3d space rotate 3d css rotate 3d i don't think i was so sure you didn't need to use the rotate 3d though i was so sure one second rotate y 3d what if i say that can i get more information see oh that's not that's a three yeah but you can see even there it's not it's staying flat so maybe the perspective is what's gonna save me i was right though okay so x is that way y is this way but the problem is it's staying flat so i need the perspective if i'm further away am i just putting wow i thought this would be easy and i'm so terrible when it comes to 3d stuff in css but i thought hey this should be perspective let's call it perspective perspective i thought as long as the perspective was on the parent that it could work but let's try putting it on the grid itself not working there either so let's put it back on perspective let's make sure i have this class name correct which is here when i say parent i thought it could be any of the parents wow i'm so stuck [Music] okay so i found out what i was doing wrong that took me longer than i'd like to admit uh but what it was is basically the perspective class that i have here uh i don't want it here it really needs to be the direct parent so i'm gonna remove that from there and i'm gonna add perspective here container perspective because we're not doing any transforms on this it won't have an effect anyway uh but by having perspective on the parent so that is it looks like i broke something there but the juju let's just collapse that down uh oh you know not even on the container i apologize the perspective needs to be on this one the grid grid columns and so i'm just going to do perspective right there and there we go it mucks it all up and so by being on the direct parent so i have this one div here doesn't matter we're not doing any transforms on that but it's giving the perspective to this one so it turns out i was wrong when i said it just needs to be i said parent but i said it could be on anything it needs to be on the direct parent the only problem is it's it's disappeared i put a border on there because i couldn't figure out if i'm like maybe it's turning but the children aren't for some reason um so it's working now but it's gone flying off so i'm gonna turn off this because maybe that okay we're on the right track um [Music] this is where okay so we rotated 40 degrees but we're really close to it so i think we it's exaggerated so i'm gonna move further away i think yeah so that the further away we get from it um the less effect like the less strong it's going to be i think is part of it um let's just do like 50 and see what it looks like so this should probably be a negative 40 instead of positive 40 we're getting somewhere we're getting somewhere and then this number obviously you can play with two and that's one thing i always have trouble with is like should i play with the perspective or should i be playing with the transform um but it looks like we got there a little bit okay cool um nice now we need it to be bigger because it's not big enough so this is where we could make it bigger by making [Music] the container bigger but that doesn't re i want my container to be a fixed size because if we look at the actual site here let's when we look at this at large screen sizes it actually still spills outside of the main container a little bit on the side there um and it's definitely like there seems to be like a container thing being used here and it's definitely bigger and then when we get to whoops when we get to smaller screen sizes and this starts shrinking down it just starts overflowing out the side and it actually i mean there's something weird going on with its positioning there a little bit i think we could do that in a nicer way but we can see that it's actually like going out underneath there and you can actually these we can't click on because they're underneath here but like you can actually still click on some of those which is kind of interesting i'm not 100 in love with that in terms of usability but it's an interesting effect and we're going to try and get it to work um so actually i think we can go full screen with this now that we know what we want to do so how can we do that um so i don't know if this is going to work or not but that's my feature grid so what if i said that this has a width of it looks like a pretty fixed width to me let's just say it's 45 rem it's it's spilling out the side so on the [Music] i think it'd be on my body uh we just want to have an overflow hidden right um overflow overflow [Music] y hidden x x i always mix those up there we go um so it's spilling out the side we're not getting the overflow so that's okay uh and that lets it get a little bit bigger and i think it needs to actually be bigger than that so we'll do 55. okay so the sizes of things are getting a little better and more in line with what we want them to be and if you're at a big enough screen size we can see it but we actually want that to more spill under what's happening on that side so i'm going to throw a position on the position of relative and then i'm going to say that the right is a negative 20 viewport width positive 20 viewport width um so the idea is that oh see that doesn't work at all though because it just keeps sucking it that way so maybe i actually want to do it the other way around so it's relative to the no i do want it relative to the right side but the viewport width it's going to muck it up [Music] so what we could maybe do it is a cl lamp or a min max another max a minimum choose the smaller of these two values 20 viewport width or 20s pushing it that way or zero is always in let's just say five ram and see what happens i think it's just locked in at the 5. um okay let's try that one now it's not locking in actually what i think what i think it's done is it's actually hit the five um but it's relative i wouldn't i'm wondering if perspective is actually let's just put a border three pixels solid hot pink um yeah so it's relative to that maybe so like large screen sizes it's perfectly fine but then as that shrinks it goes off it's sort of what we want in a way except it's really locked in i thought that would shoot choose this oh choose the smaller 5m is always going to be smaller what if it's five i just want it so it can actually shift around a little bit so you see it it does move a little bit there at one stage so actually maybe the smaller of the two this could be like a 30 and this could be a 10 maybe i just want it to be able to keep shifting to go underneath the text see there now it's sliding out underneath the text and then it's coming back in that way and if we combine that with my grid overall being larger or my container at like a 75 or something um i think we might be did i put my kevin this should be zero and this should be 2 rim just to keep the sides clear so there it slides under the text but it sort of the opposite of what we want actually hmm [Music] okay so i just played around with a few different things um really what i want this number to do is to keep getting bigger because if the left i wanted to keep getting into a negative value so if i do negative 100 it goes that way negative 200 it keeps going and i realized with the min max and stuff i was trying a lot it's mucking me up if i do a calc and i say calc of negative 1 times and then a viewport unit instead of just doing the negative viewport units um i think so as no okay so as my viewport gets smaller i want that number to get bigger and there's ways of doing this so if i do okay so what i'm going to do is 50 viewport width for now so if i just do 50 viewport width it's there and the bigger i get the further off to the right it gets the smaller i get it eventually you know it stops for whatever reason um let's just make that smaller so it's sort of here and then it as i go this way it's going to go with the viewport um and then it will you know that number is relative to the viewport so anyway it's sticking to where i want if i do a negative 20 viewport width it's going underneath but as i go that way it's actually like doing something weird there and then this way it keeps pushing that way because that number the negative keeps getting bigger and basically what i want it to do is the opposite i want a negative and if i did that on the right again let's just try the right because as the smaller i gets the more it pulls it to the right that way and then that way the more it pushes off of the right side and then if that's a negative it doesn't work either because negative let's just try five okay so i actually paused the recording there because i was getting so frustrated with this and uh what i did it looks like i've sort of got something that's working but it's going too extreme where it's pulling the items really far off but at the smaller size it's it's sort of giving us what we want i think um and i i got an idea from the holy albatross which is by hayden pickering where um i'm see now what i don't know is why i need this if i need this part here um and i need to experiment with this and play with it more but basically let's go and see what value this is giving us let's go to do an inspect on here and let's go to my computed and let's find my left value um and i'm hoping where is it abcd i don't even see a left because i'm on the wrong thing i'm on my main so let's go and find it and see what we're actually getting here um i think it's that one right then we have that on feature grid not on that one feature grid my left is now okay so we let's let's look at our left uh what negative 183 and as this gets bigger the left is getting smaller and then as i go this way the left is getting or it's more so as the screen gets smaller the left goes more and more negative which was the trouble that i was having before and basically uh which is now exactly what i want so as the screen gets smaller the left value gets more negative and as my screen gets bigger the left value gets bigger and bigger the only issue with this is it gets too much right now um and what i don't even know i put a thousand negative a thousand pixels minus one hundred um so if we do that without the minus one let's just see what like could i do this with just negative a thousand pixels but i don't think so i think that times negative one is really important for this so now if we go back to my dev tools and we look at the left it's 63 and as my viewport is getting smaller and smaller that number is getting bigger and bigger as you can see and the reason that number's getting bigger and bigger is because it's a thousand minus 100 viewport and the viewport unit as the viewport units are getting smaller so i think actually what i i think i sort of had something like this before and i think maybe what i could just do is a calc of 100 vw times negative 1 maybe just so it's inverted so yeah except no that's still not working and to look at why that's still not working let's come back to here so that's it negative 558 so as i go this way it's we're just taking my viewport with my viewport's getting smaller and smaller and smaller but i've turned my viewport into a negative number this is the same as saying like negative 100 vw essentially so if the viewport is smaller then we're you know if my viewport is the smaller my viewport gets the smaller this gets and it's a negative which isn't what we want so we really need a situation like this where we have a big number minus 100 viewport width and that means as long as the if if we do this and we come and take a look as soon as we so let's adapt this now so as as my screen gets smaller that number is getting bigger and bigger and bigger now now this would be this a thousand is important here so it's if my viewport is smaller than a thousand that number will be bigger because we're doing a thousand minus my viewport so the smaller my viewport the smaller this value is so the total calculation here is becoming a bigger and bigger and bigger number the thing is i don't want it to be getting bigger and bigger and bigger i want to becoming more and more and more negative holy moly i knew we could get there in the end so i can do this now the problem is with this obviously we can either go too far one way or two far the other and i don't like where it's um so you we can sort of find it's right around here i put a thousand for i started with ten thousand actually um which was way too big and it just lost it but this is about a thousand pixels so if it stopped moving at this stage that would be good and that's when we do this minus this becomes zero minus one and then so this is where like the it switches right so now we're saying a thousand minus one thousand fifty three so we're actually getting 53 times negative one um so but we're getting minus so it's negative 53 times negative one so we're getting a positive 53 value now i don't want that to actually happen i want to stop i don't i want the number not to change once we get to this thousand pixels here so instead of doing that i'm going to take my calc here because we can do math inside of min and max functions um so i think what i can do is min i want the smaller of the two values because if it's a negative value it's smaller than zero so let's say minimum between this entire thing which i guess okay one second i'm gonna leave the calc here just for a minute so i can sort of wrap my mind what i'm doing here so this minimum of all of that and that's all in my calc comma zero and if i do that it should mean let's bring my dev tools up and see the calculated value and this is where it can be useful to see what the calculated value is zero oh no not that's not going to work because now it's just always going to be zero right no matter what or yeah it's always going to be zero but no shouldn't a negative number okay let's just make this a negative number should be let's just put negative 10 pixels here and jujuju 0px uh the reason i'm doing that is i'm looking here and it's actually saying it's an invalid property value so if i do 0px does it work invalid it's still saying it's invalid why is it invalid can you not do a minimum with a negative number let's just do 10 and 20. okay 10 and 20 is working negative 10 pixels and 20. it's saying it's valid now i think i didn't hard refresh before and that might have been part of this too so it's it is taking the negative 10. okay that had me a little worried so let's undo back to where we were and i'm just going to px i don't know if that's actually going to solve it refresh no i'm getting invalid property again on there minimum oh wait calc open close i'm closing my min here silly me it works now it works ah okay thank goodness okay so it's working now we got something if okay so with that if we did that properly it's choosing the minimum between those two values so let's go to my computed let's go look at my left so it's negative 264 and then as this gets bigger and bigger and bigger at one point it gets to zero and then it never gets bigger than zero so it locks in there and this way it just slides in like that i'm actually really happy with that um i paused the recording because i went to go eat lunch because i needed a break because i was going nuts and if ever you're stuck on something do that take a break stop working on what you're doing because you're not getting anywhere anyway um and then come back later when when you have a bit more of a fresh mind and well i'm actually gonna make this like negative 100 just to cheat a little to pull it over maybe a little bit maybe negative 50. maybe even like a negative 50. um just to get it a little closer on this side um just because and i think we actually were matching pretty well the overall design on that now so here we actually get the whole thing um i think looking at it now compared to theirs one of my issues i think is my perspective um but actually let's take a look let's go full screen here and know what we're going to do i think we're getting pretty close but let's do that let's scroll this one like that and scroll this one here this screen width is a little bit different all right so we've matched the screen widths so yeah there's is less the overall width looks less and the perspective is less on theirs um and it actually their things look taller than mine see how it looks more stretchy here so we could maybe i'm wondering if they did something different but you can see the behavior is actually pretty similar if we whoops so if i shrink oops let's let's do that just so we can see more and if i get to that screen width like we're not far off where theirs was um obviously the compressed text and stuff makes a difference there but we're not that far off on how this is behaving overall my buttons just seem a little bit more stretched than theirs and they seem a little bit taller it might be where the perspective is being applied to might be part of it as well i'm thinking um so i'm gonna do one i'm pretty happy right now to be honest where mine is coming from or what mine's looking like compared to theirs uh so let's just tweak there are i think a few tweaks but that that one thing was like where most of the headache was coming from um so if i turn this more that's a negative 30. if i do a negative 40 on there instead it's going to rotate more and i don't let's just do a trans form origin of left is that gonna that looks a little bit better but now let's drop that back to a negative 30 maybe that makes it easier to deal with because if i do zero see how it's like flat and then if i go to 10 so it's like it's coming out this way but it's not actually shrinking this side um instead of doing it from the middle i find that actually makes it easier to work with overall and it knows [Music] i'm happy with it but i find okay let's let's bring this number back to like if i do i think they actually did this and then did a trans translate is it zed and then like negative or okay one second this is where is it doing a translate zed or is it my perspective what if i made that bigger now i think we're getting somewhere there we go yes okay cool let's turn off that red box there we go and we can turn off my hot pink box so that's looking so much better and with that i can take off so the perspective there made a huge difference um so that fixes that the next thing is now my negative 50 here i can bring this back to a zero to keep my spacing there super duper awesome awesome awesome i'm so happy okay perfect the next thing is as it goes underneath the text we don't want it uh there we go okay so it does um i might have to adjust the break point on that then to come in earlier just how i set that up i think it's actually pretty similar but now what we want is when it's going under the text we don't want to lose we want to be able to you know we don't want to lose the text it goes behind a shadow in the actual one um so i'm wondering i don't wanna normally i wanna actually do it it's kind of annoying because to do this i was thinking i could do everything just on this featured grid to get it to work but i need to have a shadow on the left side here to pull this off and i think it's much easier to put that shadowy effect on the text than anything else and the thing that's annoying about that is you need to have it i can't select the feature grid's sibling before it i know that's something a lot of people would like to have with css that we can't do right now um but pretty much this whole thing becomes the component all the way back up to like here because we need to have the perspective on this as well so i'm going to call this feature grid parent our container container feature grid container um and i'm going to delete the perspective one because now this become because you need to have the text and you need to have this here i feel like this becomes sort of this is where that's going to go and then this yeah so i'm going to do it like that and then we can just say that the class equals feature grid it's like accompanying text right accompanying i'll just put text so we have a feature grid which now broke because i turned off my perspective so this is my feature grid container it fixes that and then my feature grid text gets this is like anti-bem right because i have feature grid and these have these prefix but that's fine um then this would have a gradient um background of linear gradient i'm going to do uh i'm gonna do an hsl here and you'll see why because i can just do zero zero or zero zero percent zero percent over zero that then goes to an hsl zero zero percent zero percent over one um but for now let's make this 255. just so we have a color on it which i don't have background feature grid text i called it that right feature grid text feature grid text where is my gradient i did something wrong obviously uh feature grid text i muck some oh i did what did i do wrong commas that hsl is good that hsl is good oh silly okay it is working you can even see that there's some color there uh now that i put the comma there um let's just do this at 50 then so we have a color ah okay uh or that's lightness so let's i want to have color so i can actually see what i'm doing so this should be at 90 degrees yes um and then i want to put a stop let's do it like 60 that's not right how do we do it we do the stops or is it the other way around uh 60 here ah it is there okay so we have zero going all the way to 60 and then the color starts the gradient starts at 60 and does this like final little dash here and so i think that's actually pretty good so now we can turn this back to black so for black it doesn't matter what your color is as long as you have a zero in your hsl um and that works except it looks like crap on the top but on the sides oh i did it the wrong i did the wrong way around undo i want my color back let's turn off formatting here for a sec i actually want it to be completely the other way around this should be at zero okay let's give this a color then 255 50 and a one and let's move this up to like 70 percent just so it's more that way and here we'll do 50 here too um so yeah it's nothing and then into that i'm going to move this pretty close to the end 80 maybe 75 maybe actually should be fine okay so then instead of it going to a color we want that to be going to black so then this becomes zero so there's zero lightness in it so basically we're going from black to transparent is effectively what we're doing there so as we go underneath you can see that that we hit that gradient and it starts to disappear this one will actually become like a point eight um i think is a little bit better and on this i'm also going to add some padding of say one rem all the way around which is going to help the still i have one issue with it sticking out the top here um but that padding is going to help on just the side i think it looks a little better that way so it disappears behind um and then i originally did on the feature grid in align cell start but what if we did center on that instead and let's get this guy the full the full space here so we can see what's happening and all right so at large screen sizes it's looking pretty good and then as we go this way we start losing these are all buttons that are working i'm happy with that and then as it starts to shift we start losing on the side which is how the design went and then at this point so that break point maybe could be changed a little so it starts sliding underneath earlier but then eventually it just starts sliding on underneath there and we start losing it that way i think that's perfect i'm super happy with that um maybe another you know what i did do i'm going to try one more thing instead of this actually um let's go back to here one way we could actually fix that instead of if we didn't want to do the line self center is this background could actually be brought onto the container i think um oh maybe not because i think we want to keep this here and even with the perspectives and stuff it won't okay no it won't work because i knew i had a negative z index on that so i was thinking maybe we could do something so you could do it i think another nice solution for that gradient so you could actually get it positioned a little bit better could be to come and do it with a pseudo element that covers the entire div so you cover the whole thing and then you can just get the shadow to be where you want and you have to worry less about the spilling at the top even though the perspective could pull it out the top a little bit but that was a lot harder than i thought it would be that sliding underneath the text was much harder but if you liked that and you enjoyed watching this if you want to i'll put the link to the finished version of this down below so you can fork it off and finish things or tweak it or play with it a little bit if you enjoyed this and you didn't see my last video or i tried to do a cool border effect it is right here for your viewing pleasure and with that a really big thank you to stuart and randy who are my supporters of awesome over on patreon as well as all my other patrons for their monthly support and of course until next time don't forget to make your core on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 133,799

Keywords: Kevin Powell, css, front-end, frontend, html, tutorial, css grid, grid, 3d css, perspective, website layout

Id: yuzggllFaC0

Length: 68min 2sec (4082 seconds)

Published: Tue Nov 09 2021