 Hello my friend and friend CSS battles are a whole heck of a lot of fun and this one right here is number 22 Which I haven't done yet and actually it looks pretty good overall With nothing too difficult some nice little tricks. I think we can learn along the way with this I think it's a really good one for that type of stuff except for the first challenge Which I honestly looking at it now have no idea how to do so There's probably something simple that I'm just blanking out on when I look at it But it just means we're going to start with this one. We'll work our way through Again, I try and do these based on speed rather than anything else So I'll time myself as I go through each one of them. I'll give you my final time at the end So if you want to compete against me you can try and challenge yourself and with that we can dive into the first one So we're going to click there. I'm going to get my timer ready. We're going to click start on that I'll move it off screen and we'll get started on this So we want to get that I think we can do that with two dibs. So let's just do div class equals. Oh, no, I'm in the wrong spot already Class is going to be equal to a and we'll have another one. That's a div class b We don't have emit which is always fun when you're trying to go fast on these I don't go for high scores. I go for 100 matches just in case it's the first time you're watching Um, so on here, let's do body is going to be A display of flex. I use flex instead of grid. Um, just because align items Center justify sorry content center. Um, it tends to glitch out. I find the 99.9 scores come up a lot when you're using grid So let's try that one. Of course, we need this background color here. So let's add that fast background will be that perfect So then we have the a and the b. So I think for both of those we can style a lot of it the same Uh, and then just background will be This color let's give it a height Of like 150 pixels and a width of 50 pixels to start with That actually does not look terrible. It's a little bit off. So maybe this is like a 170 Uh, you know what? I don't use the diff enough Diff is our friend with these. Um, that looks pretty close to the actual height and then the width I think 50s anyway, okay Um, actually we had display flex there. So they're already next to one another Hmm, I uh, okay. Anyway 75 I am I always mix up which one is mine 80 That looks pretty good. Um, and then I think what we can do is a border radius And I want top left is going to be 50% No, let's do 100 vw. No Uh 100 pixels Wait, uh zero Ah 100 zero I think is right on Um, I'm only looking at the first half So I'm only looking at up to there and then the bottom is going to be like a 50 pixels And then the zero there. So just like that. Perfect. So I can turn that off So the shape of it is bang on. I just want to flip the second one over So then we can do my b and that one has a transform Rotate x 180 No degrees Rotate y I always get the rotations mixed up. There we go hit submit Yeah 100 match in two minutes and 52 seconds ish not too bad. I think that one went really well Nice and not too bad a nice little exploration of border radius is to get it to work and then just two shapes Yeah fun and this type of shape on the bottom is something you see people trying to do sometimes so You know an idea sort of and I guess how we can do stuff like that. Cool Let's go on to 135 here and I might try and zoom in A bit more to make the code bigger. Um, sometimes that causes some issues But we'll we'll try with that one So three two one go timer is on And we're ready to rock and roll. So let's give the body Body, you know, I should have done is copied and pasted Body display everything with centered on these display flex Align align items items center Justify content center and for this I might actually do something a little bit cheeky that I didn't think of before Uh, we're gonna have div We're gonna have four four divs. I guess Maybe do it with two but four divs will do. Um, the background color on the body will be this Background, I won't do any copying and pasting at the beginning because I am I said I would challenge you guys a little bit If you want to match my times Uh, we might want pseudo elements I think we need two things. We need this as a shape and then a triangle coming off the side as a shape That's sort of how I see this happening um So I'm gonna do width 100 pixels No, let's do width 50 pixels and height 50 pixels just for now. Uh, and then here I'm actually gonna do a So we have the display flex Um, let's do a gap of like whoops gap of 25 pixels and see what happens Uh, I'm looking mostly for the space in the middle. Let's put that dip back on the space in the middle actually looks pretty good Maybe it's off by a little bit. Maybe it's 20 Uh, we can fine tune that. No, that looks better already. I don't know if this is the best We're gonna try it. Uh, let's give this a width 100 200 if I do 200 pixels And then a flex wrap Wrap wrap wrap Um, so let's just make this like 150 Uh, and then the align content whoops Align content of center And then that's the rare aligned content that you need when you use flex wrap And then let's do a margin of auto to center it Uh, I wasn't sure if that would work, but Those are sort of in the right place. So the heights are definitely way too big. So let's try a height of 70 Uh 50 We have a center center height Oh my goodness, I have a width and a height twice Uh 30, ah, that's like why are things not updating 30? So that's probably 40 Perfect and then this 40 30 wait I'm so confused now. Oh because it's wrapping, uh width 100 Okay, there we go. Oh boom exact. I think that's exactly what I wanted. Um Then on this I'm gonna go to border radius zero 100 percent Yeah Or 50 I guess 50 50 percent zero Oh, it looks a little bit off, but it gives us that sort of shape. Is it because That's not right though 40 Hmm, that's annoying. I'm only looking at the ones on the left because the other ones as we saw I can rotate it Oh wait So if I made I think instead of doing this if my width is 30 I think these then I can actually do is like 40 pixels 40 pixels, but I'm not sure Ha I can there we go. Okay. So that worked and then we're going to do a div after Which is content is nothing. This is not the best way to get a high score Probably not the best way to go the fastest either, but whatever Uh content is going to be that background is going to be oh, no, we're not going to use backgrounds. Um We can use a border so position absolute I might have mucked things. Anyway position relative Um, I always the only time I ever do triangle borders is when I'm working on this right here These challenges. So I always forget how to do them. So it's like border Let's just do 40 pixels solid And then Up zero left zero make this 20 Solid and then let's see what we have right now one second Uh, oh actually left would be 100% the right would be 100% Right 100% Right Yep, okay, and then it's Order color Transparent Black Transparent Trans Parent not the shape I wanted um, so we want Black should go on the top, but that's not gonna work Oh, yeah, okay, it will uh the top was Is it the first one? Okay, we can do that but then Height is 200% Oh, wait, maybe if I just do the border at 40, aha No, it's still not gonna work. Oh, no Oh, wait, we can keep it. No Oh Because it does the triangle like that. It's not making the right shape of triangle. Um, is there a way With maybe maybe maybe with 100% That does that though Which isn't what we want That's not good Uh-oh, uh-oh. I'm stuck It doesn't help that I'm doing Okay, one second, um Class is equal to a just so I can only have one for now. Uh dot a Okay, that's what we have Maybe wait, maybe I mucked up there take the width off. No, I didn't because my Even if I did like a transform scale to I move it down and over then it's going to be sticking out that side What I could do is do that as a parent Okay, what if I'm going to delete these three for now we're going to do one div class Equals a I don't really need then here we're going to do a uh Div class equals Uh, a b c d It's just Uh, whatever t is fine for now close div Um, so this will go on my dot t And then Oh, no Yeah T and then this would be my t after top Zero Okay, take the transform off Borders 40 Right is 50 Left is 50 and then on t I do Overflow hidden Oh, no, not t. Whoops on this one on a dot a Dot a Overflow hidden Ah, but still it's sticking up the top there. Ah, I was hoping I could do that with one and now I'm just trying to think can okay What we're going to do instead of that Is let's turn this one off for a second. I'm going to still going to use that same triangle but The width is going to be 100 50 It's in the wrong spot. So it's not helping me Let's just try this. I'm going to do that And then we're going to use this I think this is the right idea Comment that back in this um 40 pixels 50 30 20 No, no, no, I have the wrong one now. Okay black doesn't go here black was here Top Zero should be tall higher though. No. Oh, yeah. Uh, so Top will be negative 40 pixels. Uh-huh. Uh-huh Transparent black We can do that and then oh look, I have the right shape now. I could have done maybe I could have rotated around But whatever we got this There we go. Now. I just need to move that over more And then we'll have to tweak that a little bit. Okay. That's that's one idea now Now that I got that shape, maybe I could have actually pulled it off in a different way So we have t Okay, a There there there The width here can go to 200 300 oh, they're covering each other immediately z indexes and stuff uh a B a c ad just to make them easy to select Let's go with D and D Transform Rotate y negative 180 degrees Sorry, my dog's barking in the background. Um No c and d is the wrong ones. I want the uh, uh-huh. Okay, and then dot d Transform. Oh, I might have to do these separate rotate Let's just do a rotate of 180 degrees 180 degrees Can I do that? No rotate whatever x 180 and Rotate y 180 I'm not winning any time challenges with so there we go. Um Difference So the big difference with them really is the width maybe now goes up to 80 70 That looks pretty good Cool, and then I just need that's a b b d dot c as a transform Rotate x of 180 degrees Not what not my original plan of action And usually there were 99.9. I always count as a win 13 minutes and seven seconds So I usually try and do them in under 10 minutes We're averaging that because I still did pretty good on that first one um All right alien. I is next right? This is 135. It is so we're on to alien. I we're gonna try and keep the pace going fast on this one reset and let's hit start and get started on it. So here We have a body That keeps changing my cursor at the beginning background is going to be that I think this is just Class is equal to a inside there. We can have a div class is equal to b Close div Uh inside that one. I guess we'll have a c and then a d Yeah, I guess so You know what we're gonna do it this way div class is equal to c I guess copying and pasting would be a little faster here Uh faced and a d there we go So the background that so let's grab our first one, which is we have a and c actually both have the same style so we're gonna say Um, I'm gonna it looks centered again. So display Lex align Items center Uh justify content center We don't need the height just because it's the way it works in css battles. Um So then my a is going to be a background of This and then a height of 200 pixels and an aspect aspect Ratio of one and a border radius of 100 bw. It doesn't really matter. Uh, it's too big So 180 Right 180 is 180 is good Turn off diff No, what whoa, uh, there we go. But that was the right size. Okay. Perfect. I'm also going to do a position of relative Because I'm gonna use absolute positioning for all the other ones. So b C and d we'll get a position Of absolute Uh, and now we'll see one of remember I mentioned we're gonna have a fun trick So let's do would be is this background color Background is going to be that Um height will be 100 pixels. Let's just say Uh aspect, you know what we could do is the aspect ratio is on all of them because they're all circles So let's just put that on this And the border radius is the same. They're all circles. So they get that perfect. Um, it's probably a little bit bigger And I think that's just do a margin of auto An inset of zero Uh, we'll get it right in the middle And the nice thing with that. So this maybe is like 150. No is So the inset is zero top So on this side, let's just say auto The bottom will be zero and then on the other side we can just do like 30 pixels Right 40 pixels Not a bad trick, right? It's a little bit too small mine small or bigger So maybe 150 was good and then I have to change this now So actually I'm just sort of like measuring the distance from the side Mines too big now 140 Uh 20 pixels Oh, no, I'm not. Um, I sort of zero I should do I should do Instead of auto on this side, which basically puts it at zero I should do it the other way around I should say auto here because it's going to make it easier auto auto And then I just measure this distance this way. So like 30 pixels. No, let's do 40 pixels over What? Oh, that's the right side. Okay. Yes. This is the right side. That would be the left side I'm so backwards This does make more sense. I had it right the first time. Okay 30 My circle There we go. Boom. Okay, perfect. So now let's do Let's see now that my brain I'm still not perfect for this but background is that we can do a height of Uh, the other one let's try 100 this time The inset inset of zero and a margin of auto Which might boom. It's perfect. And then that last color is back to this one, which is my d Which is my background The height can be like 50 pixels inset of zero margin margin of auto the easiest way to do centering with position absolute Is what I'm doing now 60 And then so we said margin auto Zero on the left auto on the top. So it's centered that way. And then how far do we want it that way? 60 let's just do 100 Bx I'm on that side 80 70 Looks good hit cement Come on. Give me a score Give me a score. That was five minutes 27 in case it never it seems to be hang. Oh, oh 100% Okay, the 530 let's say but we got there awesome Um, but yeah, I really like centering stuff using inset of zero giving it the size you need with positioning This only works if you have positioning or if you're in grid or flex, maybe Um, and then auto will center it but then you just muck around with sort of the positioning after that Uh, not lots of really good use cases for that but for CSS battles, it works well elbow, let us go Uh, we'll bring this over reset start and we're going and I know people tell me I talk fast already in my tutorial So I do apologize because this one i'm probably talking A little faster than normal because i'm in a rush You can always slow the video down if you need to but this is for fun, right? Um So div We're just gonna Redips I'm gonna do div div class like a I'm giving them classes because i'm used to we could go a bit faster but div Class is equal to b and actually let's do a a And then this one will be a b and this will whoops my keyboard c Oh my goodness, there we go All right, so we have that and then this one. Let's just give it class is equal main box whatever So the body will get that we already have that this one my dot box will be Position we'll just use absolute here Um, let's give it a width Oh, you know what my background will actually be this I was thinking of something else But let's give it the background of this color Width will be 80 percent. Whoops width 80 percent height 80 percent In pop Uh 100 pixels. I don't know. Why do I not see anything? Do I need the position absolute on there dot box I call that box Background width height margin. Oh, I put the wrong color um margin left of auto works at least and then this could be like Uh 50 Oh there My dog's barking again. I apologize. Uh the width will be 90 88 the problem with I'm so used to using There we go. Um, I'm so used to using percentages and stuff and not like fixed values border radius will be 100 pixels 000 um Is that right diff? Did I get the border radius? Okay. Look at that. Nice. Um, so then we're just going to use my a Dot a has a background Oh, no, wait, wait, wait. This is going to be Sorry, just to make my life easier border Is going to be this Okay, wait, this my background has the same background color But the border will be this and let's just say it's 50 pixels solid that color Um, which box sizing order box There we go. Um, perfect. So then my background on this one Is the other two boxes that I did so they're going to get that And they'll get a position of absolute And for now just so we can see them actually let's just make this pink Then we had be Absolute then we had my be which is going to get I like how Grammarly works in here. Um width of 100 pixels it doesn't matter too much height of 50 pixels It needs a dot in front of it to work. It's all the way down there. So let's just do top Is negative 100 pixels. Oh, no bottom Bottom negative 100 pixels 100 pixels 50 pixels 20 pixels zero zero Oh, no, my border thing is going to muck it up. Okay. So here my box sizing border box. I'm going to take it off Uh, really that sucks Um my height. Oh, you know what I can do calc Is this going to work minus 50 pixels? E 9 No, why is that now working? Oh wait space space. Ha ha I did sort of work Oh, but now we're back to where we started Well, my height I can make bigger though. No Let's just make the height The height doesn't matter. Okay. We're good. We're good Then b gets a width of a thousand Now we give it okay, we'll leave it like that for a moment Then we'll do c and then we'll change the background c It's a width of 50 pixels height of a thousand pixels And a right of zero just for now Isn't it c c A gets that position width height. Oh, whoops right zero pop zero Ha width 70 60 55 Oh man here the width needs to be a little bigger, uh 90 100 Oh, but it's going the wrong way now. Oh no, uh undo undo that side's okay. Ah I need that much more because I think my yeah, it needs to be a bit longer Margin left Well, we'll just give it an actual margin left 100 pixels Uh 40 pixels 30 40 Okay, whatever this can now just be like a thousand then This gets the 50 again, and now I just have to fix my width width Uh, not my width my margin left It's like 38 40 45 something's off Is my think why is my the lines aren't the same? Are they different that's Oh, there we go 42. Okay. I was so worried there. Okay. Um This one There we go cement that took longer than it should have that should have been really easy Seven minutes though not too bad Little interruption here because my files got corrupted during the recording. Luckily I got interrupted by the phones It was only like a little four minute section of the next challenge and this next challenge is a complete disaster anyway I realized like one or two challenges later that there was actually a really easy solution to this but on this one You don't want to see what I started with for the first four minutes or whatever it was because it was a complete mess But we're starting off from here where I've done a bit of stuff that was all in the wrong direction So you didn't miss much there and anyway, you'll see it's not pretty But yeah, I hope you're enjoying this and let's let's see How bad I did at this one. Sorry about that. You know, it's important when it breaks through my do not disturb So, yeah, we're gonna hit start and as I was on the phone. I actually thought of something so a little bit of cheating there Uh, that if this doesn't work, which I'm starting to think it won't Um, I think there's a way to choose rotate x or y, but I forget what it is I'm just gonna do my transform of uh rotate x 180 degrees I wanted y that's fine There we go. Um, because that's not gonna give me a point Well, let's try this anyway. Uh, we're gonna If it doesn't work, I have sort of another idea, which is fine Uh, c d actually that okay, whatever. Uh, did I copy that? Oh, I copied the whole thing D so d will get a transform x um And then anyone who knows how to make this shape is either going he has You're either shaking your head or we're gonna get there one or the other Uh, why that gives me a circle now the issue is these are 75 75 so if I make these like 35 what happens And this has to be updated Uh 70 So I'm still not getting Point which is a little bit what I was worried about I feel like I need to overflow actually now that I'm thinking about it. I feel like I almost need to do That What if I Something like that let's just make I mean there's no point If I have that type of shape 40 and then I do an overflow Hit it 50 The border radius is I need the height to be more to height is going to be like 150 And then this would have a height of like two pixels Uh 100 Right. Oh, this would be like See I don't think I need to deal with two halves Okay, but I have the flex if I did an align items center I thought that would fix it within my overflowed area um Because I sort of feel like that's what I need to do But if I'm doing that I don't need a whole bunch of dibs to do it Um Is there okay, so let's just see if this works. Let's turn off Don't need the flex don't need this don't need that And for now, I'll turn this off Border radius can just be I just need a circle We just make it big 250 by 250 let's say It might even have to be bigger I'm just think like I do that But then and then I have like a really small div And I'm doing half of that shape That's the only thing I can think of right now So let's get this centered. Um, so let's just see if I do position absolute inset zero And margin zero does that auto does that work here? It sort of does because that's based on this width and height. Um height Let's just keep this I'm not gonna get this one this one line Solid lime I'm coming up with a really bad class names now, but that's great div Class equals outer. We have out and outer those closed div Oh my goodness. This is a mess Okay, so that's going to be outer and this is going to be outer then Because we're gonna I'm going to put the both in that it's going to be a bit easier. I think so the width I think whatever width 100 Something like that, right and then the height like that display flex bear with me for this out we'll get a flex basis probably 50 percent Uh outline two pixels solid red just so I can see if this is doing what I think it would do It's not at all outer out Overflow hidden. Oh my red. Okay. Let's turn off the lime for now Yes, okay that's Sort of the red idea now This isn't gonna work either. Is it we'll see um position absolute Oh that pulls. Oh, what if I Position relative Position absolute. Okay. Good. And then top 50 percent transform translate x uh y negative 50 percent Does this make sense what I'm doing? So I had a bit of an interruption and I had to stop and my lighting is a little different now because It's now evening time instead of daytime, but I can see I still have my timer here ready to go So, um, it's taking me a while to do this one I sort of forgot where I'm at But we're gonna hit start and see where we can get to uh with this one because I want to get it done. Um I think there's probably a better way to do this, but um if I remember I'm sort of dealing with that overflow. So I think I'm gonna make this a little bit smaller It a a is the white one. Yes No, what's my white one? Oh, it is I thought that was commented out. Okay, so I'm gonna take this off I'm going to put an aspect ratio of One just because that's gonna make my life a bit easier as I play with this number. Ah, see where we're sort of Oh my goodness. That's not bad. So I still think there's probably a better way to do this to be honest But that looks decent So that's this So I don't need to be on there. So if I do a And then look at that. I took a long break and we come back and it's just Hours later and things just start flowing. Um So this is gonna be a comma b because we want both of them like that but Just like oh, this should be a dot here, right? Um But just like before the dot b will get a rotate. I think I can just do 180 degrees on this one Oh, no, no, no, that's not gonna work because you have the overflow hidden. We can delete that completely Am I on the right track? Grammarly doesn't like my rotate. Um rotate Okay, wait undo undo a b where's my overflow hidden? On out So this is gonna be yeah, we'll take that off then out Uh x And then we'll just make another one of those And this one will be y I guess the first one doesn't actually need anything and then this can be my y Ha ha it so it's not perfect because if we look at the top, um, there's like They don't come to a point Those might overflow height Now it looks too small I think it's a little it's slightly slightly slightly off. Uh Did that even change anything? That's making it worse I think 200 Let's see. Okay. Let's just try and finish it and I think we're just gonna Consider this one what it is Um, so that's that Okay, so let's just take this we'll do That's my odor. This is gonna be my odor Uh, let's just go Here q That one doesn't really need to have a class on it. Then we're gonna have This one and that one So i'm just doing q w. Whoops. That's a two w and e because i'm using qwerty Uh I'm so annoyed with this one. Um Oh, do I have too many now q. Oh no q w and e so w star And get this background color. Let's just say background Is that which might muck everything up because I don't want everything actually I want all the A's that are inside of there And then let's also rotate 20 degrees the whole thing Oh, no, just the w can get rotated, right? Such a mess, uh rotate 20 degrees Ah, there we go, uh Rotate rotate transform origin, which I'm pretty sure works the rotate property will be center bottom And is it like 45? Yep, um, so we can just copy that The next one was my e and then this one has a negative 45 Uh and W here we can do a comma and say e a Oh, look at that. They're not even really touching There's like the little separation in between because of the rotations. Um, and then The easy Yeah on q at this point. Well, look at that. That was cool, right? You um z index of 10 I don't know what this is going to give me I didn't even submit. There we go 99.8 We're going to take it. Uh, is there a I'd love to know if you know a better way to do this than what I did Um, if you leave a comment down below and let me know I feel like there's a better way to do this But I'm not sure what it is overflows work with the two circles I don't I thought there'd be a much better way to do it. Maybe I'm wrong. Um, it's not coming to me anymore So let's just move on. That was the lotus the lamp The lamp, okay, the lamp looks super easy I said that the last one Right, so delete body is going to be background That It's going to have we have the shade. So we have a div. Um, so let's just do Shade I have to give class equals shade And close that one and then we'll have a div class equals full I don't know what the right word is for that right now So let's do the dot shade position Absolute because it's just going to be easier. Let's say inset of zero, uh, zero again margin auto for now we'll change that um Background Will be that is the easiest thing to do. Let's just say width 100 pixels Right 100 pixels. So we see something Okay, so is the easiest thing here to do to no Here we Clip path ab absolute The easiest thing I think is going to be um I think the easiest thing is going to be To do a clip path So that looks pretty good. Um, there's probably another way to do this, but I'm going to say clip path Let's see if I can remember how to do one. Is it clip half like this? Poly gone 10 pixels 10 pixels 10 pixels I don't remember how to do the path circle Circle works isn't it polygon? And then you just say like 10 pixels zero 10 pixels Zero 10 pixels. Why is that not working? Am I going to have to look up how to do I am? Uh clip path css Um, I'm not going to do the shape. I just get reminded on It is I don't have to do the path polygon. Why is it not working? At least I'm not crazy Okay, just for fun What did I do differently? Oh, you have to give two two coordinates. Ah, okay So the first one we want to do is it zero 10 pixels and let's just do zero 10 pixels Zero 10 pixels 10 pixels 10 pixels It's gone. Oh, yeah, that would that make sense. Um See this would be faster. Remember I want to go over stay at the top to go over So I think it's gonna be a zero and let's just do 25 pixels The next one will be 075 pixels and then let's just do Down all the way a hundred percent 100 percent and then a 100 zero Sort of So this one should actually be 25 And then the next one here should be a zero that looks better So that's there the next one here I shouldn't need What's happening with my second one the third one is at the bottom there, which is fine and then Why I thought it was there there there there, but I have a feeling something's not working right here And it should go in that order Am I going down instead? so 100 percent 100 percent over No, I'm trying to think we want to go that way I'm so confused Okay, let's just move this one. I want to see that's going across that way. Yeah, so that's This is this way and then up and down. So the second point should be I'm just gonna do 100 zero Exactly. So then the 100 instead of 100 I should be able to do like 200 pixels Oh my goodness Really? This is such a disaster You're gone. You're gone It won't be perfect It's using percentages Basically the right shape with 256 We'll go with that I don't know whatever I'm tired now Well, I'm not looking forward to that last challenge anymore with position absolute with 10 pixels height 200 pixels top 50 percent Left Well, just do calc 50 percent minus 10 pixels Position absolute and it should be this color background of that It's off by a little bit. Um Oh, this should be minus five. Maybe there we go and then we can just set index that down set index negative one and submit 100% match in six minutes 30 seconds Uh around that something like that. There we go Uh, I just want to know why so if I did this I had that at 25 pixels originally and then I had Was I doing it backwards here 75 pixels? So yeah, I thought I had I thought I had basically that I think this one I mucked up though And I was just so confused but maybe I was putting these backwards and I just wasn't seeing it for some reason Because I think if those were backwards And I put the zero here It might have been something like that I clearly did something wrong because it's working now. Uh, so Yeah, two points. I thought I knew how to do clip paths, but obviously I don't Okay Eclipse This one too should actually this one. I'm pretty confident in so let's hit reset. Let's hit start Let's give the this is our this triangle at the bottom, but I think this triangle at the bottom is easier. So, uh, we'll start with the body Background which I'm actually remembering to type Then let's do so this will be my class equals hill So dot hill Is going to get a border of 80 percent can I do that 80 percent? solid Red No But 10 pixels solid red. Okay, that's there Um, oh right. No. Yeah, okay. Let's just do that and then border Or this this is the easy way. I did it the hard way before Transparent transparent you do the all the sides transparent and then you say like border left. All right. This should be border bottom color This would be instead of using the shorthand like I used before this would have been an easier way to do it um, so the border Like can you not do percentages for your border 50 percent? Uh 300 pixels 200 pixels Something's going on. Um think 100 pixels okay I don't Not quite sure but sure uh transparent And then can I do this? um position absolute bottom zero Cool, uh, so bottom will be 20 pixels negative And then we just put my diff on. Oh, we're a little bit off for some reason. That's okay. We can do that negative 30 negative 40 45 Maybe 40 was okay. Uh, and then let's just say left of zero 39 38 ha ha there we go nailed that one. So that's actually perfect and then we want my moon. So let's do dot moon Without emit a div class equals moon Lowes div Okay, so that's gonna be there and then I'll just put yeah Yeah, that should be fine. So moon is gonna be that Moon okay, so my idea for this one at least work Back give a bit of confidence before we get to the the actual challenging one Uh width will be like 100 pixels probably a bit bigger 150 aspect Ratio with this you don't actually have to write how many pixels it's going to be. I said bigger it's smaller Um, so you can actually do like 75 and it still works. That's just for css battles border radius 50 Um position absolute this inset zero thing on here and not having inset zero And margin auto is so great auto Uh, because then now I can just do zero Um margin can be auto on the left and the right and then the top will be 200 pixels and Auto Though the shape's a little bit wrong, but that's okay. The top's actually bang on So the aspect ratio is not Not actually one. So let's give this the width is 75. Actually that means the width should be like 85 No 75 80 which one's mine? I don't know if mine's too Oh, there we go. Hang on. It was the right size. Okay. So that's good. Now. We just need to bring that in and Again, we're not after a high score. So we can use a pseudo element uh after And then this is going to have the content we need so content can be that background color can be that Width will be let's just say inherit for now Um high uh aspect ratio might be a little different, but we'll find out content and position position absolute and this time we're just going to say top is like 70 percent border radius Herit Um, so 50 percent 50 percent is perfect and that just means here we can z index that back one and hit submit 100 match 524 awesome. That's about on par. I think with the first one. So That's great. That one. I'm happy with that one. Well, just as planned Nothing tricky on that one. That's basically why and that leaves us with this one Which is difficult I think I'm honestly Um a bit trepidatious to start this one, but there goes the timer And we'll start with the easy one which is my body because I know what to do on there where I'm going to say the background is this color um Now I'm losing my voice. Oh my goodness. We're going to pause for a second. I don't have any water with me All right. All right. I'm okay. I survived that one. Um, here we go I usually have water when I record and I don't bring any with me now. Um, so how can we do this? Here I need a circle 100 so let's start with that and let's just call that dot So div class equals dot Close div. I think that's the only way to do these types of things where it's like the rounded caps Um and because uh dot that's sort of the start of our whole thing. We'll just start with that so the width on that's like 20 pixels 10 pixels. I don't I'm zoomed into I think that makes it harder Um to dodge the widths on things. Maybe that's why I'll say that's what it is Um background that aspect ratio would be one Uh, so it was probably 20 because yeah, that looks better border radius 100 And we'll just position that absolute position absolute In set zero Is it right in the middle margin auto? No, of course not Uh, mine's there. We need to move it to the left. So auto top and bottom might be okay But you know what let's just do this the old fashion way top of 200 pixels Too much 125 pixels. It won't be enough. Let's say 150 Right, uh left 150 pixels. So we're getting close. This is sort of the the classic way to do it, right? We're just sort of magic numbering it And top 140 there we go. So that gives me the beginning and it looks bang on Um, now I need something that can come off of that So the only way I can think of doing something like this is if there's a border on it, right? Because we need it to turn Um, now what I don't know Is how we connected How do we connect it when we're doing okay, wait, I'm gonna try um, so let's do div class is equal to spiral a Close div so before on that one that I completely failed at that had the white Things that is the white middle of the dark. I said that would be easy um, but we sort of had to make or I tried making half circles And it didn't work, but what if we so spiral so let's do spy spot spiral Um it's got so Okay, let's just say width is like 100 pixels aspect ratio of one This is a bit much because it's the wrong spiral wall. I don't want this on all of them, but anyway Aspect ratio of one and then we're gonna have a border What was the size I used 20 pixels so it'd be 20 pixels solid this color I don't know. I have that so why do I not see anything yet spiral So I didn't spell it right spiral Spiral, huh, there we go. Um, and then that has a border Radius And so we did 50 and then I did zero Is that the shape I needed last time and I could have just done that? Oh my god Okay That would have worked I think and then just play with the width I'm so bad. Okay. How is this gonna help me? I'm not sure There That doesn't help me though. It doesn't it's way too big So I do 70 it looks huge Okay, let's just How does that help me? It's giving me half a circle, but we have that So let's do spiral Uh Can I do this? Okay. I was what I was going to do is put like a circle Like a circle here and that wouldn't work because then this would stick out too long But what if I just cover that part of it, right? So if we do, um This might make it easier in the long run spiral after Content, I'm going to take this background color background Width will be a hundred percent height will be 20 pixels Position will be absolute And my spiral itself will also have a position of absolute. So I'll put that now I'm so mad that shape. I could have done it so much easier. I could have been done that in like three minutes Um, I don't see this coming up anywhere. Let's just try red width height position Left Of 10 pixels. Where is this? Content is okay background red width height Position absolute. I want position. Yes That's okay spiral Gotta spell things right Kevin Um, that's actually I don't want with that. I want to do we'll do calc of width width of 20 px times 20 px times 2 plus 100 percent Um, of course, you could just change your box sizing left will be negative 20 pixels and then the bottom will be zero negative 20 pixels And then the color will be that Does that work? Does that work? Does that work? Uh, left 100 px, uh, wait, what was the left I did on this one 160 160 px top 100 px 80 then Z index negative one Uh, so top 100 might have been uh 100 Uh 110 105 Does that work? It's like skewed a little bit, right? Can I okay rotate 10 degrees 20 degrees Sure, I guess I hate these artifacts that come up to rotate if I do a transform. It's probably the same right transform rotate Yeah, those artifact things are still there I don't well actually okay, we could fix that uh 22 And then this would be a left of negative 21 The bottom so the height would be 22 And the bottom would be We'll see if that can work. Um, just to hide those artifacts. We just made the whole thing like one pixel bigger um 20 degrees so then my top This is gonna be so annoying. Does that work? I'm still off though I find like there's this isn't right at all Is this really the right solution? You know what my shape You know what let's take this off What i'm thinking maybe Let's get this was it 110 And 160 was it there no it does drop I'm just gonna do a width and a height This is gonna be easier So the height is too much now. So let's do 20 this is gonna be so annoying Instead of a top I should be using a bottom Because then if i'm changing the height If i'm changing the height of it like here if I make the height 40 It's growing up or if I make the height 10 it's like so it's always sort of like Starting from the same place. So I don't have to like change the height then move it back down. That's it Okay, I'm glad I didn't keep rotating it. That it's so funny that that's actually lining up Okay, awesome So the spiral after is going to be a lifesaver because or you know what? Width So this is my width and height are going to change for each section That the rest of these things are the border. No everything out of the top. Look, okay So we're gonna have a spiral then we're gonna have my dot spiral dot a right and then the b the c to the d So the width that we can take off Because they're gonna go on this one. We're gonna go this slower on this. This is gonna come on here But yeah, we're gonna take that and those can come on here specifically because that's specific to that one Then we're gonna change this to Or I know what we're gonna do here. We're gonna say The width is bar w and the height is bar h Because this is gonna make my life so much easier than this is going to be width And this is going to be height And i'm wondering if I should do the same. I don't think I need to do the same to the top and the bottom The reason i'm going to do that Is here this is going to be my bar w And I don't know if I need it, but we're gonna do it anyway bar w and we'll do it Plus two No, wasn't this 22 pixels Oh, that was my h. Huh, okay h Look at that. We needed the pixel the unit had to come in there. Okay Super so the reason I wanted to do that is because now if I do my spiral b And we'll do b I guess I don't need spiral every time But whatever spiral So the spiral is important and the letter will be important because now we have a b and then the b Is going to have let's do a rotate of 180 degrees because it needs to be upside down Then we can have a width and this time we'll try 80 And we'll do a height of 40 I'm assuming it's going to sort of follow that pattern um, then we can say the left is 80 We have it and then the bottom this so we'll do like one Let's try 90 now. It's covering the other one so z index minus two So i'm not lined up at all but left 50 no 120 30 125 And then the bottom 80 Uh, we have to go bigger. Uh, this is problematic. My after is not going to work. Well Oh wait, uh bar w H no, no, I don't want that at all Do I No, yeah, that one's like really badly positioned I thought I'd be able to come up with a system where I wouldn't have to muck around with those But it looks like I might have to change it But um, there will be that like that. Let's just do spiral spiral be after Bottom is The problem is it's flipped right now. So I'm having let's just turn that off for a second The bottom That's my height It's 80. Oh, oh, oh, okay. So what? Okay, so if we did this is var a calc Var oh var H times two times negative two Maybe that will work And I turned that one off. Oh, no H Times I have 80 or divided by two divided by two Maybe that will work. Uh, it mucked up my other one Okay, never mind. We're not we're not I thought I could get clever with this but the cleverness is not working Uh, so let's put the rotate back on um So I actually need it to be In front of that one now If I go behind How do I do that then? The only other thing I can do is what I had before with the overflows that I don't I just thought of something that could potentially work too That might be easier than this Okay, right. So we have that I need to have Because I I need to have that cut off And because I did it with a border Because I did it with a border That's the only way I can do that. I think I have to do it with borders though I can't Think of a way to do that with concentric circles That would work because then it wouldn't be covering the right parts of it So the um Again, I feel like there's a I'm missing something obvious here the other option is What did I put on spiral position absolute? If I can get okay, so let's try this instead spiral I'm gonna leave Be used like that Um, no, that's my dot. Anyway spiral Let's just put one second outline One pixel solid green line. Let's do that so I can see that I'm gonna take the border radius off of here Let's do that. Let's take all of this off Outline position width height so now For now actually the width and the height Let's just put my a there so I have it width 40 pixels height for 20 pixels Okay, we're gonna do that. Let's just take this off Bring this back up to here So that's there. So the size is wrong So I'm gonna do a width of 100 You know wait I had 40 50 60 I think I want and then this would be 40 because I'm just adding the border size that I originally had Okay, so there's what we're gonna do and then inside of spiral So Inside do I have that pseudo element still? Inside of here Let's do a box sizing border box Just to make my life a little easier border solid 20 pixels width 100 percent height 200 percent Uh position absolute So those work Maybe and this is position relative Whoops not that one This has position absolute on it already Thank you off This is why Width 100 percent height 200 percent and because I wanted to overflow border radius 100 percent 50 percent Oh, but then it's not a circle Oh, wait, wait, wait. That's okay. Uh, is it Is it okay? This we can delete because we're not using it Let's just try. Let's see if we can do this over over low hidden Right because then we get to that and then the bottom we can move it up Uh 150 the width can drop So are we there? Yes Awesome, so that is good and because that is good. I think now What we could actually do that was my first spiral now. We're going to do the spiral B Cool, and I think what we can do because it's a spiral B So let's just come here and do dot B. We don't need both. Uh, let's just try first rotate One 180 degrees scale you Oh, but the border. Oh, no That doesn't work Uh width Um, what was the original width 100? Let's just say 200 pixels height Uh 100 Uh, okay, so my scale I was gonna scale it all up. So we had 80 40. So let's try 160 and 80 it doesn't look right, but then we can just do Um bottom Is now Not oh we need a semicolon there um, let's Let's go from our right if I do my right that's gonna work. No we have to do from left um The size is way off, but you're just gonna muck me up That looks okay the bottom There we go, but the width is wait Yeah, you were going all the way up to the wrong one Um, so my width maybe the height could maybe be 60 uh width 120 And then this 60 is the height always half Because if it is that's going to make life easier. Um, and then this apps to get Bigger and then this does that look better? I think it's still too big Well, maybe yeah, I think it's still too big width will be like 100 And then the height will be 50 if they're always two to one. I'll use an aspect ratio um There and then 100 This is so annoying Minus 20 that goes that way The width actually looks pretty good and then so if width is that so this goes to 60 Which would make this go to 80 90 Is that lining up? It is lining up sweet. So if they're always like that, um If I take this off, just just try and replace this with ass aspect Ratio, so then I don't have to muck around with those at least is two over one One over two It was two over two over one Width is 80 Oh, yeah, and then this one the width. Oh, I deleted it 120 There we go. Was it 120? Yeah. Okay. So then I only have to worry about that Cool. So then we need another one. Oh my god. I'm we got it. We cracked the code It's just a little bit tedious now. Um, it holy crap. It's taken me a long time to do this one. I apologize, but we cracked the code Oh, for anyone who stuck around with me, thank you Width, I guess would be like a 160 now 160 pixels and then left is going to be 80 pixels 100 pixels 120 Ah, look at that We only have one piece left two pieces left Amazing that came together all of a sudden That was a bit of a disaster, but it came together better than some of the other ones Width, uh 200 Rotate 180 degrees I can do 0.5 turn as well, uh bottom And you know a lot more than that 60 pixels I think that might be okay for the bottom, uh, and then the left is 100 pixels 80 pixels The height is off. No, not the height. The bottom 40 50 There's probably some math in there as well. Awesome. So we have a dot. So now we're gonna have a dot two Dot, uh dot said So z We can put what the other don't want we'll do dot z. So it's clear Um is basically another dot. The only difference is my top and my left will be different Right, so this would be Probably the same top. It's just the left actually would go to like 180 submit submit submit come on under half an hour Did I really take half an hour for that or did I forget to restart the clock when I started it? Oh my goodness We got there. That's awesome. Um, yeah, that took forever and I hope you enjoyed this. Uh, if you did enjoy it There is another video where I've done css battles or the playlist of the other css battles I've done including one where I battled against kyle and you can watch that right here That was a lot of fun to do with him and with that I'd really like to thank my enablers awesome Michael simon tim and johnny as well as all my other patrons for their monthly support And of course until next time don't forget to make your corner the internet just a little bit more awesome