CSS Battle - taking on round 15

css battles are just so much fun to do and to challenge myself with them a little bit i decided to speedrun their latest set of battles hi there my friend and friends and welcome back to the channel i'm so glad that you've come to join me once again and if you are new here my name is kevin and here on my channel i hope you fall in love with css and if not fall in love with it at least hate it a little bit less as you might be able to tell i'm feeling a little bit under the weather right now i had another video planned for today but i don't want to record it while i'm all stuffy like this so this is an edited version of a live stream that i did over on twitch not that long ago i've edited out all the random little bits in between each challenge so the challenges themselves are completely unedited even though i sort of would have liked to have edited out a few parts along the way so as you might know if you've seen me do other css battles i don't try and get the lowest possible score i try and get a 100 match and what i decided to do was to go through every one of the challenges in their newest set of challenges and see how fast i could do each one and just like string them all together so i would finish a challenge hit pause on my clock go to the next challenge hit play and to see how long it would take me to get from the beginning to the end and get through all of them in one sitting and on that note just last time i posted one of these a lot of people were saying kevin you weren't getting 100 match because you're adding code and of course that's not going to help your score it doesn't help my score but the percent matched has nothing to do with how much code i actually write if you're up for a little bit of a challenge you could try these out before me i've linked it down below time how long it actually takes you to get through them all and then you can compare how you did them to how i did them compare each challenge see which ones you can beat me on which ones i might have beat you on and see who did all of them quicker as well or you can just sit back and enjoy the ride let's go and jump in and let's hit start there and see how i can do on this so the first thing we want to do is obviously delete all that and i'm going to need four divs but i'm going to give this a class is equal to a copy that and one thing people often say oh i did it fast like i find when i'm rushing through these i make so many stupid mistakes that i wouldn't have normally seen so let's say body and we'll do my background see i'm already making typos and you start messing things up when you're trying to go fast but that's part of the fun and part of the challenge i am going to do a display flex even though i'm a little always a little worried with that and we'll just do a align items center and a margin of zero i think sometimes helps even though i don't really know if we need it and let's say all my divs we'll have a background of that actually i think we can do a lot here so i'm gonna say width of one or 75 pixels maybe and aspect ratio of one at margin of one pixel maybe and here let's do a justify content of zero as well as zero center whoops i open my screen there we go um see the alignment's off a little bit so i'm just going to add a bit of a margin top here um yeah margin top of 10 pixels um 12. i should have done that on the last line we can just do this uh whoa 12 15 pixels why is that not working 25 one second see i'm already it's not moving even though i'm changing my margin top is it uh is that really okay let's just do this here instead then padding top of 10 20 pixels i think i'm a little bit off but let's just come in and say border radius of 50 oh i have a margin of 1 here that's why it wasn't working kevin um but it looks i'm off by a little bit uh okay let's just say margin right uh margin in line of two pixels i don't want a margin on the top and the bottom of them oh yeah i feel like my size is off too this is already gonna be a bit of a mess but anyway let's just keep going and then i'll sort of fix things up a little bit after um should i do it this way yeah i'm going to do this because i already screwed things up so i'm going to say position [Music] relative here uh just so i can absolute pizza or you know what i could have done anyway whatever i'm committed so we're going to do it this way it sucks when you think of better ways to do something after the fact but whatever it's too late now i could use some borders and done things a little smarter than this um but this should work background of that and a position and if i did it properly i probably could have done this one faster absolute uh with height absolute gotta be spelt right border radiate border radius fifty percent um and then ah that's a problem too though okay you know what we're gonna scrap that this will become a border it's an easier border of um 20 pixels solid this color and we'll get rid of the background that makes more sense and that just means my width here is probably that's still too big that looks better right i'm off by a little bit my space is too big uh there's a little jump happening there but i'm pretty happy with that um then what i could say is i have my classes so i'm glad i actually went away from that position absolute i don't need this either anymore i'll leave that there my a we're gonna do a border color of this one and the little tweaks on this to get it to 100 are not going to be fun and then my dot b and this is why um might be after this is why i left the position relative position absolute um content width 20 pixels uh yeah because that's the same width as my border height uh we'll just do 50 for now that will probably have to be changed border radius will be 100 bw so it's a pill shape a background color that is this one a right of zero and a top of negative fifty percent negative let's just use pixels oh my right also has to be a negative 20 and let's just make my height bigger that's not bad let's just hit some submit to see what it gives me because i'm pretty close ah okay 99.9 i'm gonna i'm gonna try and fix that really fast but if i start getting these 99.9 and get stuck on it uh i'm not gonna waste too much time i think it does maybe it's because i shouldn't have used flexbox oh but i wanna use flexbox but maybe not this okay it's worth having that on there oh uh align items oh it's worth doing that then it's i'm i'm keeping that why is it it's just maybe my padding here it still has that little shift it's so close if i get a 99.9 again oh 100 there we go i'll take it and so we'll hit start and we'll delete all of that and let's start with the easy wins so my background color body whoops wrong place good start kevin uh body oh my goodness background is i have to get that again because i copied the wrong thing okay easy win um so we're gonna have one div with a border on it oh we're gonna do box shadow for that i'm just not sure about these guys i guess i could use pseudo-elements for that so let's just call i'm to do that so maybe i can just say this then div of oh is that this color i must be right so background is that width looks small so we'll say 20 pixels a height of our height i'm just going to stick with aspect ratio just because when it's a perfect square or circle it just makes life a lot easier maybe that's a 30 on my body we'll do display flex again to get it in the center justify items justify content center place items center this i really wish i could use the grid one but i'm scarred ever since i did that and then rotate uh can i use rotate in here actually rotate um 45 degrees yeah we can this is new uh that you can do that but we can do trend there's a bunch of the transforms now see it's already off like if i do a diff is it just my size it looks off already by a little bit which is really frustrating but whatever um this is yeah you can do this now instead of doing the transform i don't know what the browser support is and actually because of that transform rotate 45. 45 degrees tran trans form it's still off by a smidge so does it really just want me to do this and then say a margin top of like 100 150 125 and a margin left 125. our margin in line of auto right why does that not work okay margin 125 auto [Music] why doesn't that center it on the page oh kevin so stupid okay um so i almost feel like it wants me to do that so let's just increase that margin top and if we look at is it it's the same as it was before that was a waste of time okay and then let's add a box shadow on here so we're gonna do a box shadow uh with this color so it's gonna be zero offset zero offset zero blur 75 pixels and that's way too big 40 pixels still too big uh oops that's 49 that's why 40 probably oh maybe we're okay i think that looks good and then so then i want the background color and then i want another one that's going to be 0 0 0 60 pixels and this color and you need to have commas between them there we go and this should be 80 maybe 70. it's too big 65. oh my my other one is off by a little bit there we go oh it looks off by a smidge why am i off like that though i'm so confused by the difference between it like it's closer on one side than the other i'm a little i'm a bit worried but anyway it's this one does need to be bigger but 40 see 40s lining up i don't know okay let's get those other things in place and then i'll i'll fix things so div before and my div after this is definitely too big and then this one's i mean that's the other problem here is if i change the inner one it also change oh maybe that's better actually and then we'll fix my margin i guess i just think maybe i'm not perfectly centered okay we'll stick with that um so for both of these i need a content that will be the same we'll grab you this will need a position uh yeah position relative i think it'd just makes my life easier position absolute um background will be red for now so i can see them width 20 pixels height 100 pixels uh 35 it looks like it's going to be the same as my box that's 35 right yeah um and then my div before just scroll down makes it easier for you all to see and then i want to do top is negative 50 pixels 100 pixels and then height will make 50. and it'll just make my life a little bit easier there we go um and then i want to do my other one so that's my div after the left okay we'll rotate that one rotate we'll see if this lets me do it 45 degrees 90 degrees which might make positioning things a little tricky here to get it where i want it to be actually that sucks but whatever uh top of zero goes where it is top zero top negative we'll do the same negative 70. goes there uh and then a left now that it's rotated i'm so thrown off on how things are going to move around top of zero uh so we'll do top like negative 10. i think they're too big though they shouldn't be width of 35 we'll do a width of 30. that's pretty close so let's change my background color oh good good good now i just need to fix this auto and say it's like 100 pixels instead to 250 120 150 180. so mine that's mine that's theirs 175. perfect submit 99.6 yeah right seriously why is it one sec let's try here transform rotate and submit 99.9 see that don't use new syntax and it is i see that there is so i'm going to go back to what i had before actually of my 35 here and to see if that gives me if that doesn't give me 100 i'm good with what i have now come on there we go 100 match yes that one took me a little bit longer than i thought it would but we got there uh and that is one of those frustrating things so don't use grid and don't use rotate make sure you use the transform rotate we learned a couple of things awesome once again and the timer is off so we can delete u and let's get my background color right away and we'll do background uh i do this all the time body background of that um this one i'm gonna have this div okay so here i think we're going to do a div class equals outer and then in there we can have a i'll just do a p p class equals inner i think i'm going to do it like that and i think we can do everything with just that um so let's try i'm doing a paragraph there i'm just so i don't have to close it that's the only reason i did it with a paragraph um so if i do that then my will do my dot outer first outer it needs to be rotated that's okay we're going to get everything positioned maybe and then rotate it um so background back ground is you wrong color of course then we want to do a width it looks like about maybe 100 pixels aspect aspect ratio of one oh no it was the right color it's okay i'll use that color because i need to be able to see what i'm doing i'm just going to use margins i guess so we'll say margin of 100 actually i'm going to have to rotate aren't i and it needs to be a little bit bigger maybe a 120. so let's rotate it right away trans trans form rotate 45 degrees because if i don't do that it's just not going to work properly um so the margin top needs to be a bit less so let's go with 80 and on the right and left i'm going to try auto for now and see if i can get away with it because that's always the best uh we're pretty close 125. oh that's my width whoops i want my margin 80 should maybe maybe 85 oh my goodness it's so hard to tell i think that's bang on though i think that's good so um i'm gonna leave it that color just for now and let's come on my dot inner and say that the background is that with um in this case i'm just going to look at twenty percent and once again an aspect ratio of one enter inner uh so with 40 maybe and a border radius uh whatever 100 will also work this should be a little bit bigger i should have maybe gone with pixels but we'll see if i do a display flex on this that should let me come on here and just do a margin of auto boom i should have thought of that on an earlier one oh no it's not centered perfectly though is that because my other one oh it is okay so my margin top on this needs to be a little bit bigger that's why 80 so maybe it's 90. ah there we go okay good is it the right size then awesome okay so i'm going to change this just so i don't forget this color needs to change we'll stick with red for now let's do um light uh light green just because the red hurts well that's painful too um okay it's still not nice but it's better um and then on my dot outer once again before and a dot outer after because i'll use my pseudo elements to bring those in and that just means here we'll do a position relative i feel like i'm getting into a bit of a flow here i'm feeling like i can go a bit faster through these now um then we need this is our background color so let's do that right away background is that and my position is absolute um width on these can actually be a hundred percent and the height on them will be like 150 maybe compared to the parent and then let's grab and a z index of negative one doesn't seem is that going to muck me up i have a solution do i have a good solution if that doesn't work i do have a solution if the z index there doesn't work oh because i have a transform oh that's annoying okay so we're just going to do this then um oh that's so annoying uh p class outer bg um p dot outer vg position position absolute width or inset inset 0 hopefully that doesn't muck me up background lime green inset 0 is not working uh one second position odor why is that not working did i muck something up there oh rpg okay i'll worry about that after is it the flex that's mucking things up it might be the flex that's mucking things up one second one last thing i'm going to try okay that's better that's weird though but okay that works and then okay anyway we'll figure that out after i'm gonna just turn this off i can't comment things out we'll just do that for now i'll get these other things in place and then i'll i'll come back and fix that um dot odor before so i'm going to turn off my rotation here for a second as well i'm just going to cut that because i think it's going to be easier for me to work uh the outer before is let's just do a background of red is that the one i'm looking at no i'm looking at the other one so we'll do my after first okay um so that one or for both of these actually we'll just do our border radius of 100 vw which will give it the pill shape and i'm actually wondering they're a little bit smaller the width here i think so uh this is going to be this is so much more annoying than i thought it was when i first looked at it yeah the width should be a little bit smaller let's try like a 90 95 and then [Music] um i guess a left of 2.5 percent just to center it like that oh that might not go on both okay that one will go on this one at least um and then the height of it might actually need to be bigger than 200 and then the whoops top of zero uh top of negative fifty percent that's too big some maybe the 200 whoops what did i do there i put caplock on again um which isn't the end of the world but okay that is working then okay i'll stick with that um and then i just need to fix my my other one my inner and this is where i maybe i should have uh see i have cap lock on don't do this to me right now oh there we go i fixed it um inner oh no it's outer again outer after transform rotate 40 90 degrees oh whoops oh okay whatever before that worked better than i thought it would on that other one uh so does that mean i can just copy these properties and put them here the size is a little bit off but um oh and i have my green my green came back so i can i don't need that pseudo element after all interesting um so let's grab that color that was my outer that's this one okay and let's put my rotate back on which i have somewhere in my clipboard there it is oh uh yeah okay that makes sense i was like oh yeah that makes sense actually why that's happening okay and it says this creates a new stacking context which just mucks everything up and that's why i needed to have this so should we try and turn that back on now and then my inner here will get a position position relative just so i can say z index of 99 that should bring that to the top this one can get this dark background on it instead of the lime green left negative 10 pixels uh that should be top then i don't know why i need this on here but it's off i don't know why i need this and i can't just do a zero so now everything is good except these guys are too big um so the width here maybe is actually like an 80. and then if that was 80 i could use a calc here to actually speed things up now they're just oh look two of them are actually this bottom corner is positioned like right on so then this is where maybe i should have used pixels for my height um maybe 200 is actually close ah man this sucks um and then this could be like negative 20 pixels negative 40 pixels 30 pixels if my math was better here this might be easier i don't think the side this is this sucks um [Music] this is gonna get so finicky now i don't even know if my size is right on or not no my size is still off and every time i change this then i have to come and change this which sucks now it's too long for sure oh my good and it's to oh oh oh it's so close so close on the top right oh okay okay maybe i got it maybe we got there i'm off by a smidgen ah that's frustrating 99.9 i think i'll take it because let's zoom out to like the normal zoom i'm off by like a smidgen though for sure maybe it's just the width here instead of being in percentage uh 80 of what did i have eighty percent of 120 so maybe it was just 100 pixels instead but still it's still off that's even worse um it's i think it's these actually should instead of being in pixels 2 um percentage maybe as pixels it just and then the last thing to fix is the outer bg there we go yes wow that took me a lot longer than i thought it would oh my goodness okay at least we got there though all right so i think this one's easy which means i'm gonna it's gonna be a complete disaster so let's hit start and delete this i need i could probably use suit elements but you know what i'm gonna do is just um class equals uh a b and you'll see why i'm calling it a b in a second so we have one two three four and then i'm gonna have a this is a terrible naming convention a one and a two and then we're going to go with a b three this is still terrible but whatever b four um and i didn't use numbers because you can't start a class name with a number so that's there let's do body the background of background like that and then we're gonna have all of my divs have a lot in common so we're going to give all of these a width i'm actually going to go a little bit weird here i'm going to say 100 and a border radius of 100 vw the hundred vw i used it and another one too it just creates the pill shape that i'm after and they all have the same height so i'm going to give them all a height of say 30 pixels and i still can't see them oh i didn't give them a background that would help background we'll change out the ones that we need to after um so this should be probably 40. that looks pretty i think that's good i move that down a smidgen okay then let's just do we're just going to position our position of i don't even need what am i doing position ab salute and we're just doing this this way um so that means and then i'm going to say that my the other thing that i will do for this and i think i'm giving myself more work because it becomes hard to do this but whatever um trans form rotate 45 90 degrees 90 degrees on my b's and that should be a dot b um again i think it's more i might be creating myself more work but let's just say then b uh 3.3 is going to be a i rotated it so my left property is going to be negative 100 pixels for now oh that actually moved it the wrong way top and let's just why is that anyway let's see and my 4 would be a positive ah okay so we're sort of off and running now um i just need to get that in the right spot basically um i don't really like this solution i don't find it very elegant but um whatever and for both of those let's just say that the left is negative ten negative five it's off that way so negative 5 or i should or whatever negative 10. which one's mine might oh i'm going the wrong way negative 5. oops i'm a little confused about why it's off more and more it doesn't like how i'm solving this basically or because it wasn't oh what oh i just needed a left zero okay okay uh and that first one is actually good so this one is just gonna be like a 350. look at that right on okay so again this is like the least elegant way to do this but i just felt um i don't even yeah we'll just do a top on both of these of like 130 i guess bang in the middle that's good and then i can just choose my dot one and do a left of negative 100 to probably the same as oh no it's it might be the same actually no it won't be um and actually i might i'm still off but let's do my dot two and say that the left is two hundred oh okay so fifty and fifty too much twenty 25 20. there we go and then just change the color here background and go to that don't forget your semicolons ctrl enter whatever let's hit the submit button 100 match that one went a little smoother uh there's much better ways to solve that one or more elegant ways i should say but after the after the struggles i had on those last couple of ones uh a little bit of absolute positioning can help all right so i'm gonna hit start and let's delete this div now is this easier to do i'm going to try and do it with a div class outer and then some inner children maybe if you just use absolute positioning for everything odor um it would be easier but [Music] we'll do p class equals inner one uh inner i'm going to do that maybe a it doesn't really change much but uh and then a p class equals inner two uh if you do paragraphs and you don't close them they auto close when the dom is rendered which is why i don't have to close them just to speed things up but of course talking about that just slowed me back down so i didn't achieve much body background of that um and then my outer is this one so we're going to start with you dot outer is a background of that margin top of a hunch it's like 60 i i do get myself in trouble with this sometimes oh i can't do percent as a margin top it's not going to work anyway so we're just going to say margin top of our okay margin 100 pixels auto and then zero on the bottom just in case with 75 pixels and then aspect ratio of one and this is why i like aspect ratio just because it becomes so much easier to play with the sizes of things and there we go that's right in the spot um so then here i can do a position abs relative so then i can bring my you know what i don't even let's try and do this without absolute positioning um inner because there's different ways we could do it without that um so width on this one looks like it's 50 height is 50 so it's gonna be relative to its parent and the background on that will be this um oh whoops let's do one so this is where i wasn't sure if we needed to bother but there we go um can i do this then um position relative you know what instead of position relative we can just do this transform of rotate 45 degrees and we can do a second transform on there of translate x y of negative one hundred percent uh which we'll have to play with that number obviously and the height here needs the size of its off and as again an aspect aspect ratio of one makes life a lot easier so we'll stick with that that size actually looks better um so let's do a translate of negative okay let's just do it in pixels negative 100 pixels and negative 50 pixels okay let's wait this is the order you put rotate and transforms in changes things which is really annoying and i always forget see um so do your translate first then your rotate after makes life easier which is the most frustrating thing that it's different depending on the order you put them in uh negative 100 so a negative 50 this one may actually be able to stay as a zero then no it has to go over a bit negative 25 30. that's bang on and then this one just has to move up 75. that one oh no my rotation is actually not 45 degrees or is this okay let's just try so i think maybe the rotation is okay now it's just positioning it which is super weird but okay uh negative 28 29 or is it the other way 32 33 34. that looks better and then it's closer it looks like the rotation's still a little bit off though oh my goodness okay that looks better again so let's just drop maybe that's a 70 and then this is a 30 30. no oh i hate when it gets finicky like this and again is this because i'm zoomed out let me just see here now i am off by a little bit there we go that looks a little bit better my rotation might actually be off by like one degree 37.5 or is it a 37 that's pretty close okay i'm going to stick with that um and then that this i can actually use this can go on my uh dot inner because it's going to be the same oh no i can't oh that's annoying okay that's okay i can just copy paste anyway which i'm going to do and this will be my dot 2. let's zoom back in which gets this background color and then this looks like it's closer to like eighty percent width except that's mucking everything up why'd my one not muck everything up but my two is mucking everything up how come my one didn't do that which it should have because this is taking up space anyway let's um so my translate let's just take the translate as a zero zero now to see where we're at zero zero if i turn that off i just wanna see something okay it's fine um i'll leave that on and then i'm just gonna say top zero right zero which i don't know okay that's okay so let's go up now so up is i always forget negative 100 the wrong one this one is up negative 100 pixels would be like 120 and then this would be maybe 100. and we're getting we're super close it's not quite there so it's too high 105. oh no maybe the 110 was okay and then this just needs to go uh 28 32. i always get mixed up at certain points 33 when i almost feel like my rotation is actually slightly off or my width and height that okay so here actually one [Music] 108 maybe no the other way 112. i'm so close but it's off by a smidge which is super annoying 99.9 99.9 it's this rotation with this no 36 that one's right on now 36 38 no the other way 32 there we go i think that's it yes awesome okay not too bad all right i guess we can jump in so i'll open that up i'll hit start on my timer and we'll delete that get my background color body all right i did it again body goes here get the background color of that um and then one two three four we have four steps of this color so we're gonna have our div class equals i'm gonna keep it shorter just for that but then the inner ones i won't div or we can do paragraphs again just so i don't have to have closing tags class is equal to um i'm going to call it step one and then let's copy paste that step two step three step four and that drives me nuts there we go two three and four uh maybe not i was gonna say something but back i'm gonna back out of that so the body's there let's try just doing a just a margin of zero and a display of flex with a um justify content center this might be a waste of time but align items they always look centered and then you actually start doing it and they're not so you sort of regret that but whatever um so my a which is sort of my window i guess or door it's a door um so my door is a width of 100 pixels and a height of 200 no 150 170 170 we'll try that it's probably wrong and the background which i think is not that it's this here and my background there see it's not centered [Music] maybe it's centered maybe it's centered if i get the right height it is centered sweet and i think my width is okay my width is good awesome um then we can just do a border radius border radius starts top left so 100 vw 100 vw0 perfect this one is proving to go pretty good ah can i do this let's try i don't know if this is going to work uh display this play of flex um and then if my dot step is width the width i'm not too worried about so we'll just do a hundred it's gonna be too much let's do a width of 80 pixels and let's do a height of 15 pixels and a background of this color um so the height is not right maybe it's 20 or 25 20 probably probably uh whatever um so here we're going to do a flex direction i'm going a bit more elegant than the last one now uh flex direction of row makes columns column to make rows a align items align items no justify content justify content of end flex n no is it a line items that i want align items no i did okay i want that one anyway but why doesn't just defy content flex and [Music] why not what am i doing wrong what am i doing oh my goodness okay um i'm so confused they're not they're not doing at all what i would expect them to do right now if i take that off they go there which okay so that's left and right and then this should be top and bottom justify content it's not justify items i feel like that should work and i don't know why it's not working what am i doing wrong oh my goodness okay i'm gonna come back they are getting smushed here because of this i don't understand my display flex flex direction column align items flex n goes that way let's just turn this off for one second so they're they're all next to each other right now if i give these an outline outline one pixel solid red they're all there and they're getting squished that's normal align items end that's why they're on the bottom because normally they're on the top so if i have the end there they're going to do that and if i do a justify content flex and i'm having well now it's not doing anything because they don't have the room to do anything which is normal because they're shrinking this would only work but then as soon as i change the flex direction flex direction uh to column and it changes that way shouldn't they just all move down to the bottom oh my goodness that's so frustrating i'm so stuck justify i feel like i'm not spelling justified content right like okay justify content center what am i doing wrong it's still doing the same thing uh that shouldn't change anything no okay good i feel a lot uh you can't do it justify self either okay there is another potential solution if that doesn't work if i do that no it's still not going to work because you can do an align self of like center and that oh right okay that's i don't know okay i'm gonna have to find him i'm gonna comment this out because it's not working for me uh okay i have one other idea actually one other idea to keep that on take this off because it's not doing anything um let's choose my one this is my last ditch attempt here using flex for this uh margin top of auto okay i got their heights back what one two why did that even give them their height back i'm so confused this was going to work really well too because i was just going to do my one is the one on the top so i was going to say margin and not margin i just do like a transform translate x of like negative or is it even positive yeah so i could do like 50 pixels and then just do that for each one two three four uh take these off because i wouldn't need them this would be a two this could be like 40 this would be my three i broke something here one two three and four actually this would be a zero so or whatever say 10 so i don't know i'd have to play with those numbers but now everything's broken i feel like i is this paragraph thing really mucking things up you shouldn't have okay maybe that's div class a i'm worried now like i'm looking up here and i'm like did i muck something up there this is so frustrating i'm so lost i might have to cheat or do i just i feel like there's a stupid typo here somewhere or something because something's not working that should be working step one [Music] background black red height 100 pixels width 100 pixels two okay let's one second 50 50. just to make sure i'm not going crazy i'm going to delete step one so i have that one guy who's there right now flex direction column flex and that's making sense justify content please don't be that it's still weird though why is there space between them okay whatever um that was the height 150 right height 150. i'm just going to solve this position we're just going to get it to work and then after that i'm going to figure out what i was doing wrong because i've wasted so much time on this um bottom zero that's not a bottom of zero the height here should actually be bigger this is so stupid two bottom negative uh bottom of like 20 25 uh 10 5 7. left of negative 10 uh 10 negative 10 oh right why am i doing left right so the heights were better actually the height was 20. i just the bottom step is bigger than the other ones or this is off mine there's no okay there we go i feel i was going in with so much confidence and i'm so defeated right now uh bottom and a right of negative 35 maybe oh my goodness okay and then this is not even going to be 100 match which is the worst of it bottom of 50 60. 58 55 57 and a right of negative 60. at least those should be consistent oh my let's see my the bottom 58 my spacing's still uh 50 6 maybe then everything's moving a little bit but i'm still going to hit submit i'm so so angry with myself for this for whatever i did wrong i'm just counting that i'm going to hit stop 99.9 for me is close enough because i'm so frustrated with that one so let's see the chat what did i do oh i did paragraphs and they have margins on them [Music] [Applause] [Music] is that marco who said that uh uh one is perfect i don't even need to change it two margin [Music] left becomes like 20 pixels oh no i have to do um i could do margin right of negative 20 i think right yeah i could do transforms on that as well margin right of negative 40. margin right of negative 60. oh i did it whoops the wrong way around 0 20. so this i don't even need and the one i needed that one margin right of negative 60 40 20. oh my goodness i could have changed the widths too yeah and here use i had them justify content uh the flex end on this to push them over so if i change the width on each one of them that would have worked perfectly too at least i know it wasn't crazy that's so frustrating okay so i won't use paragraphs anymore or if you do you must set a margin of zero on those paragraphs oh my goodness that's so frustrating okay css right okay i have to redeem my can i do the next two challenges in under five minutes that's not going to happen body background [Music] is sorry i wasn't hanging out in the chat there i'm just so frustrated um i'm just again i know there's sometimes easier ways but i'm just gonna do this with three divs uh class equals outer out outer one i'm calling them outer just whatever two and then class is equal to inner they're not really in and out but it's just how i'm sort of visualizing it so we'll start with my inner um background for now uh background i'm so demotivated after that one uh background will be red for now so i can see it a width of like 75 pixels aspect ratio of one border radius of i don't know 10 pixels maybe um so let's use display display flex to get it in the middle and then justify content center align items center at least i was right with my solution on what i wanted to do on that last one because honestly i was feeling like i didn't know what i was doing with flexbox for a second there i guess that's on it actually looks like it's like one pixel too tall sometimes when you do a margin zero on the body it helps on these for some reason it doesn't change anything though okay i'm going to leave it like that and if we have to modify it we will the reason i'm doing flex and maybe it's not the best way to be doing this but i'm still going to do it so and we're going to see if this works and it might not but i have a quick solution i have a backup plan if this doesn't work width will be 200 pixels which might be a bit big height of 100 pixels and a background background of this let's change my flex direction to column um so these are too tall uh are they okay this is where let's add my border radius first um border radius of 10 pixels for now maybe it's okay actually uh then i can do my dot uh one which let's just say margin i don't know does this work negative oh yeah i don't want to do that okay uh transform translate translate y negative fifty percent uh fifty percent dot two is going to go the other way is that how is that looking actually it needs to be a little bit more i'll use pixels then just because using using percentages i prefer doing um 60 65. i prefer using percentages if i was doing this in real life um oh you know what my widths are actually way off but with these challenges it definitely gets easier um so i just want to translate and it's going to be a negative say 65 65. maybe negative 60 65. i think that's right on actually i think my plan is actually going to work so for my 2 it's going to be the other way around it's going to be a 60 negative 65. then i just need to come up onto my inner give this a background that's the right color and say z index is 100 and it's not working as planned because i forgot about these inner border radiuses ah kevin okay my plan didn't work how come wasn't i lined up properly before and now it's not lining up anymore which is interesting why not what did i change the through off i changed the height on these maybe and it threw things off that's theirs that that's theirs that's mine i can fix the the problem with the shapes that's not the end of the world um i'm just going to add suit elements to do it ah it's kind of annoying okay whatever it's not the end of the world um i just want to get that middle thing positioned properly what's the easiest way margin top of 10 pixels and width is maybe 70. okay that's better and then this this bottom one now negative 60. okay there we go so everything's positioned properly i just forgot about the inner roundness that i need so for those we'll just do a dot one before before dot two before i'm gonna have to change things quite a bit actually but that's okay dot one after dot two after just so i can do a full position do i even need yeah i'm trying to think actually i just i don't need no i don't need to do this i only need a before okay think kevin i need the pseudo element here just so i can have those two round corners and then this can be the original shape so i only need a before on the two of them i don't need that many um so if i do that my width here is going to change down to 100 which sort of mucks up my positioning and all of these uh 0 no 30 then 50. that's mine that's theirs oh maybe one second bring that back to where i was i want to go out more 100 90. okay uh there mine there's 85. okay that's positioned good so this one's probably 85 this way that one looks positioned well as well so both of these can get a content of that a border radius of inherit so if i do need to change the border radius it's very easy to do um i could probably even just do a position of relative or i don't need to do anything i can just use transforms on these i think uh width we'll use 100 height we'll use fifty percent and then my dot one we can say that the right right uh transform because i didn't do positioning uh transform trans late x is one uh 50 oops [Music] before with oh they need a background color too now we'll just say background is that or inherit would have worked and i still don't see it content oh if you don't have a position absolute you need to display lock so it actually shows up perfect and then my dot two if there's another way to do this i'd love to know what it is um would be the same thing but the other way right not to do why is my knot 2 not showing up because i did that before negative 50. and a top of a top translate he needs to be on the bottom so negative 50 that way and 100 down okay um and then here my position of relative so i can give it a z index of a big number which isn't working oh i don't even see him dot inner why is my dot in her not even showing up oh he is there okay oh my goodness oh that sucks okay so ah kevin wait a second then oh yeah okay okay whoo i was like wait wait wait but it's okay uh let's just make these heights bigger okay good and then this becomes i did 70. so would this be like 50 uh 60 uh 40 into 30. 40. 50. let's just use a number then uh what's the height of this thing i don't know what the height is okay whatever 100 px 50 px 25 pixels 30 pixels there we go okay and then i can turn off my red background uh copy u replace u and oh the border radius of this should still work border radius not inherent 100 vw 10 pixels wave oh cause it's underneath there wait a second oh my goodness i was so confident now i'm like oh i screwed the last one up i know what i'm doing wrong um yeah i had it so do i need two suit elements to be able to do that i have this one that's gonna round that way but it needs to round like that i didn't think of this at all properly i did need two boxes for the outer to be able to do this instead of one so i have like this box is going to be there i need one with these three corners and then i need one that's going to hide underneath here and sort of fill that space in right because this one's dropping down too low oh my goodness okay so we'll do this we'll do this all together um dot one after dot two after this is one where is there a better way to do this uh content is that position i'm just gonna go with a position absolute uh we haven't used it at all yet let's go with backgrounds that are red for now so we can see them um and i just realized if i do this i actually want these widths to be a lot smaller right and then i just need to pull them into the right spot no i could leave that like that actually and then put this height back i'll do that that makes more sense um which means this one just needs to get fixed back to where i had it which i forget was it negative 50 negative 25 uh 25 i was 100 wasn't it okay so that yeah i'll keep that that's fine and then here i just need things that are going to fill in that space there that's all i'm after so these can have a width of like 10 pixels height of 10 pixels uh the background is red a display of block we'll make those a bit bigger so it's just a bit easier to play with and then let's choose my dot one after position at position i haven't been using position so we can just say uh transform translate x of uh fifty percent oh uh let's do 100 pixels perfect and then i can do the same thing with my two except this one is going to be uh 50. a bit less than that 30 and then i want to move it up as well so it says translate and then i want to move it up negative 20 pixels that should be good and then i can just change their background colors to that there we go started off really well i sort of got thrown off a little bit there but in the end we got there i feel like i should have learned from what we just did to do this one so we'll jump into it the chat's not too active right now uh so let's hit start and let's get into it so let's put my background as this uh you need a selector to put backgrounds on um so for this one i haven't really thought about it other than needing so i need a div that's going to make that shape a diff i feel like i'm okay i feel like it looks too easy and that i'm not i'm gonna muck things up but we're gonna give this a class is equal to um stick one this one looks easier than the last one but i have a feeling i'm gonna bite myself and muck it up again stick two stick one in stick two so stick can have this uh dot stick we can do that at that we need a background background of that one a height of 30 pixels 20 pixels my body is going to need a margin of zero margin of zero um and then let's see if this if i can do this display flex justify content center but no i want a line item center align items center height their width 100 or they'll disappear um the flex seems to have influenced their height a bit okay wait wait wait wait wait okay let's try something else here instead of this um then we need like the flex here is not really solving much for me but um so i'm these are going to be absolutely positioned let's do um div div class equals cover one close div and we'll do a cover two this anyway we'll see if this works i'm hoping i learned from my last one so my dot cover for now will have a background background i think what i should do more of is this actually zero zero fifty percent over one over 0.5 or something so i can actually see it so let's give it a height for now of 50 pixels a width of 50 pixels cover background is it not like this hsl syntax zero oh whoops i know what it is you need a percent sign on that one uh there it is okay so it's there and i'll just do position position [Music] absolute on that position abs absolute um so even this i don't know if i'll bother with that let's just say this is a inset of zero on the top zero on the right zero on the bottom and 45 uh 55 i should say oh i don't want zero but i just wanna okay it's uh where am i no maybe it is 50 then inset's a shorthand so yeah this is where i'm trying to get to um and then the bottom insets actually me 50 as well so we can be there i like this opacity thing this is sort of working for me a little uh and then border radius zero zero zero uh 20 pixels that looks okay um i know i'm going to be missing these round corners here uh see this hmm okay anyway let's start with this and then we'll we'll keep going this is at least going to be in the right spot so i can change that here um that should be my cover this this inset will be so that's my cover and then my dot one will be that one uh and then my dot two will be very similar but i think the other way around right zero zero oh the border radius is different too it's true that border radius goes there this border radius becomes uh 0 20 pixel zero zero zero um okay so that's so maybe i do we actually need the two sticks to do this instead of just one i was thinking i could do it with one uh so if i have two sticks and on my stick oh i gave one one i gave them the same oh wait a second wait a second wait a second no that's still okay i'm gonna have uh another stick here dot stick i'm gonna have three sticks uh this is gonna be switched to a b and c though just so i don't have the same numbering convention stick c dot c will get position [Music] ab position absolute let's just give this a different color so we can see it background back ground of let's do that same thing again zero zero percent zero percent over point two um uh i'll give it a high set index so i can see it okay i want this one to be inset and then we're going to go 80 and 80 45 percent zero [Music] 45 percent zero that doesn't work why not 55 because i have a height height of zero [Music] or actually one second i might be crazy but what i'm just trying to do right now is cover that little middle section um so then here i could say dot a border radius let's just see if this works border radius 0 10 pixels i think it will work uh 0 0 then my dot b this might work my network border radius of 0 0 0 10 pixels uh this one is this going to work guys or is this just a stupid failure it goes there but then without my zed index yes i redeemed myself at the end uh i learned from the last one a little bit on that one that makes me feel a lot better uh the reason that works here if i just change the color on my dot c so we can see what it's doing um and i all right let's turn off my.c for a second so we will have no background on it uh oh i didn't even need it why i was sure i needed that guy to fill in the middle but i didn't one second i didn't need that one there how is this even working okay well whatever i got a better score now okay i thought i need to fill in that middle space here but i'll take it why did i think that i did i didn't have to do that i don't know why i thought i had to do that okay because this is tall oh right because this okay i was just confused my border radiuses this guy's coming and he's actually dropping down into the space but then this one's covering it um so that's why it's going into here okay that makes sense so like here let's just change color here color or background i mean background to purple um so like it's actually going underneath here one second one two cover um opacity of 0.5 um so you can see like because they're taller that solve the issue of that middle area where i would normally would have run into issues with cool okay so i over thought that one a little bit and i had the solution already done but hey at least we got there i forgot to hit stop so let's say it's like an hour i'll check after like an hour and 16 minutes maybe to do eight we did eight of them so it's not too bad if you enjoyed this video you can check out where i battled kyle from web dev simplified right here or where i battled one of my patrons frank right here and speaking of my patrons a really big thank you to my supporters of awesome over on patreon richard stewart and randy and of course all my other patrons for their monthly support and of course until next time don't forget to make your part on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 30,371

Keywords: Kevin Powell, css, front-end, frontend, html, tutorial, css battle, cssbattle, cssbattle.dev, css battle speed run

Id: Rf8XDHCMogM

Length: 84min 11sec (5051 seconds)

Published: Thu Oct 28 2021