 Hi there my friend and friends. A few weeks ago I did a live stream where I took on CSS battle number 27 and since I was answering questions and chatting in between the challenges the entire stream was over two hours long. So I've edited everything down and I've put a timer on the screen while I'm doing them because even within the challenges I sort of cut out some of the umming and awing that I did along the way and cut out some larger chunks so you can sort of keep track of how long I did for each challenge because I do not go for high scores with CSS battle I just try and solve them at a 100% match as fast as possible definitely there was more efficient methods that I could have used along the way for a couple of these but I had a lot of fun doing it and I hope you enjoy watching me get through these and sort of stumble my way through a couple of them so here's my timer we're gonna hit start let's see how long it takes um so first easy wins all the time let's just go in with a background of uh that color on I do this all the time where I forgot I forget to put selectors uh when I'm doing these challenges so that's never a good thing when you have time limits that you're setting on yourself it's easy to make mistakes that's too big but then we'll just do a display grid hopefully this doesn't muck me up uh because then we can do a place uh items of center and I don't think yeah you don't need heights and widths on stuff um 40 I guess yeah perfect uh div or not them um emit div class is outer a that's fine closed div uh and we'll do outer a like that so people are I see the chat moving out of the corner of my eye and people are probably like why is he doing it that way but uh outer um let's just give this a width of 400 pixels height of 200 pixels um oh yeah that's fine position position absolute so it's out of the flow uh this will get position relative so oh I might have to muck around anyway anyway position relative just so it's inside so it's already in the center um I might not need to do that but whatever there we go um and then a border border radius of 100 vw oh that's not going to work I need to do it in pixels because we need an oval uh if I do 200 pixels 500 pixels or percentage as we percentage ah there we go uh we're close but we're too high 80 and not wide enough to 20 230 oh if you hold shift you go up and down so that's okay and this is maybe 85 and there's a diff that we can turn on I'm a little bit off 90 I should make mine a different color actually just so I can see when I switch oh we nailed it okay it was 90 perfect um which we'll just get a border color of that and then why are we not having outer b oh because I didn't make one that would help right uh b and c b and c uh we'll just do a d so the outer is useless now but that's okay border color and then rotate 45 degrees wide I must have misspelled the other thing 60 degrees perfect and that means my dot d gets a border color we got it this one wasn't hard um but it's we're gonna have to change the order of stuff too I guess uh border color and then rotate I'm guessing is a negative 60 degrees 99.7 uh I'm taking that oh oh oh whoops uh z index z index of 100 I wish it would check faster 100 there we go okay perfect uh 535 530 somewhere around there there we go okay I was really mad there for a second because sometimes you're off by like that 0.1 percent um but it looked good okay perfect let's get started with it we're gonna hit start and we're gonna delete our styling on there uh let's try doing that thing I mentioned we're gonna do a div b okay we have to copy paste here because it's gonna go faster that will be a c and that will be whoops that will be a d let's box a shadow I'm gonna get confused if I do it with gradients let's try a shadow uh inset 10 pixels solid a solid box shadow 10 sorry 0 0 0 10 pixels and this color I just want to see what happens perfect uh the only problem is I think my first shadow would have to be the dark color um so let's just yeah I think this would probably be faster if you did it or less characters there's probably a really smart way to do this um this one will be this color comma and then this one will be 20 so my numbers are wrong so let's just try 20 and 40 I just want my line thickness which I think my line thickness is good so if I did that I don't know mark in the chat had said he did this in 100 and something characters this is not how you do it in 100 and something characters 8120 that would probably be enough and then we can take my a and I did an attribute selector and just do a transform or not even a transform a translate of negative 50 negative 50 does that look it's not in the right spot uh I don't want a pixel and I have my my gradients not uh maybe I need one more gradient in there but why is it not lining up that sucks uh 130 140 okay so I'm just missing I this is going to work at least I'm happy about that but I'm curious to know what better methods there were 140 can be that color shouldn't I be getting that's this color oh no I need it okay we'll copy both of those 140 160 and then this one needs the semicolon whoops there we go perfect okay so that works and then I just have to position okay so yeah that one's in the right spot so B can get turned on B's where I thought it would actually be C can come in with this but then we do a positive value for both perfect okay so it did work my idea did work I just needed the absolute positioning on there and then the same translate but this one is negative and this one is positive and now I can hit submit that one took me longer than the last one oh no that's kind of embarrassing I got it though 100 match but definitely not low on characters you probably could have done this as a single gradient on the body would be my guess as one way to do it but it is what it is I guess so here we go for this one three two one let's hit start um so we'll just do a body body has the background of that color um is that the same color as this I know it's slightly different uh do I need to do I think I need to do this with three dibs right body select all the children grid area stack they'll all be on top of each other oh and they're centered to you I didn't think they would be the height the height's gonna be different for each one though 100 oh just thought of something now okay we'll just uh oh actually can I go in the body and just set a height here height 100 pixels oh I can do that perfect and then margin top of auto is that gonna work margin bottom of zero didn't I was hoping that would actually move it all the way down uh negative 100 this is please never ever ever do what I'm doing right now um I just want to line it up this isn't the right way to do it but it looks like it's lined up so I'm gonna take that uh never ever do this please um okay oh but see I've already made a mistake because I'm doing these with widths and heights and we have to do all of this with a border I'm gonna do this just with my a for now why is my a there I'm so confused okay I'm gonna one second uh position absolute we're gonna use absolute it's gonna be easier for me to figure out where things are her bottom is going to be that color uh border bottom color perfect uh except it'll be this one or whatever that's on all of them um so it gives me a triangle and then we can play with the sizes obviously this is gonna have to be bigger closer um if I'm using that I can probably I don't need these anymore I'm using absolute positioning we're I'm just gonna one second border bottom will be 200 pixels uh this color solid this color okay so I'm doing the wrong one so this would still be 100 actually the height oh my height is good it's the width it's wrong so my border left width is that right 200 let's just say 200 pixels aha it is okay and then my border right uh right width is 150 maybe um why is it that shape left oh right okay they all need to have that so I can bring those oh no they don't this is the one where it's just border bottom color we could do right okay um so we'll copy that this will have a z index of 50 and we'll just do the next one down which is this one uh whoops copy that and then this just becomes like 150 no oh no that was the one that stays the same diet that can come off of here and that one goes there um so then my oh this should be a B Kevin okay yeah and then my border border bottom width is 150 pixels there we go it's a little too much right yeah we got there perfect and then I can copy that one paste it whoops probably would have made sense to go the other order um to save on characters because then I wouldn't have to worry about my z index but whatever uh so this one's probably like a 160 and then it has this color 180 oh my widths are wrong I thought my widths were okay okay 125 can you do multiple there we go that looks better hit submit seven minutes each one has gotten like a little bit longer than the last one at least we got there though so reset my timer bring the timer in this is the one that I have absolutely no idea how I'm gonna complete so I'm gonna hit start and I'm gonna fail miserably can I give this width 100 aspect ratio of one if I do it on the body oh look how ugly that looks though anyway we're gonna try mucking around with this maybe I can't do it on the body but I just want to sort of get the first stages of it done um so or you know what to be easier no I'm going to do a different thing here take that off take that off take that off I don't even know if I need that anymore we're going to go on that div this probably be a lot easier now that I think of it and now we can change the color away from red back to this and then I can just do a box shadow right back shadow 10 0 0 10 pixels 20 20 pixels that color 0 oh 10 was right so the size can go back to the actual correct color in the middle and then my box shadow that's one box shadow then we just take another box shadow one second so we're gonna have two that's one two three four five shadows and 90 and that's too big 30 40 40 50 60 and then this one can be 70 perfect at least we got that in place that looks good I feel like submitting now and just taking my score like whatever that's that'd give me like a 70 percent right I'm going to call it t for triangle and it'd be triangle um zed or it'll do x well have x x y um just because I can't do it in a and you can't use numbers I don't think so maybe you could I don't know triangle so let's see if I know how I don't know how to do clip paths um background uh width 150 pixels height 150 pixels um position absolute so it doesn't shift anything um top 25 pixels both this is gonna work I'm really bad with clip paths so this might be really painful and I don't even know if this is the right solution uh so we started zero zero let's just go like 10 pixels 10 pixels and then do a just so I just want proof oh I already forgot something polygon uh polygon and then wrap all of that and just to make it a bit easier to read is it I have spell check no e in polygon see I already do I need to put pixels here I don't think so though do I no I didn't think so um oh wait should I just yeah okay that makes more sense zero and then I'll just do another not a zero there let's do 50 and a zero here I just want to see okay that sort of makes sense so if I did this one's going to go 100 just for now 100 over and then this one will be 100 down oh no whoops let's just I'll put 50 pixels here and put 100 here 100 percent if I do 50 it might be okay actually um so 50 there's there we go we figured out how to do a triangle to clip path um my sizing is slightly off somehow because that 50 you think would be lining up better so my height I'm actually worried that my I'm going to change stuff here a little bit really fast um because there's a margin on the body by default no that didn't change anything okay my top is off a little bit I see it shifting now though yeah there we go now when we get to this point is where I don't know how I'm going to do this if I get to that point now we want to move and add another stop here so yeah because this is my point right there so after that we're going to stay at 100 I don't know maybe we won't what if we did calc 100 minus 10 pixels 50 percent and then is this going to work oh we have to close my calc we need to come back up to this corner which would be if I just did 10 pixels 10 pixels I just broke the entire thing what polygon that's okay that's okay oh comma uh no the 50 percent goes here okay see there we go there we go we have something coming together now my my sizing is wrong but that's okay what if I did that at 15 and 15 see this is where I'm going to magic number it but I'm sure if you know how to make a triangle you wouldn't have to so now we want to go down to over here so that's the next point after this we want to go all the way down and so we're going to stick at our 10 pixels and then we'll do another calc of 100 percent minus for some reason 15 worked before comma we need two values um this is my oh no yeah that's good comma perfect it's coming together okay and then from this point we need to go all the way back that way I'm going to take that so I have the tx then we're going to do a t y I don't feel stuck right now I just don't know if this is the right solution so if I just do a y and do rotate 90 degrees 180 degrees you have to do a full rotation and then a left a right of 45 pixels and a left of auto div z I don't know if I have to close that div z that we can just fill in that space uh that makes it easier to center uh so this would be like a 50 and a 50 or let's even make the height 20 oh can we can we do this without even having to muck around okay I'm going to hit submit it's not going to be 100 though what's my time 15 minutes okay I'm taking it 19.9 16 minutes I did it um cool I didn't think I was going to get there just because normally with clip pads I I follow all over myself so I'm pretty pretty happy I got that to work the problem I still have with clip paths is like when I want to change that and just figuring out where I'm going um can be really really hard the the 100 minus things is definitely useful I'm really happy that worked because if that didn't work I'm not sure what I would have done I thought it'd be harder to fill in that middle bit um but yeah I'll take a 99.9 percent for people saying clip path looks hard to use just use clippy now if you enjoyed that I've done a bunch of css battles here on my channel you can see the full playlist right here or if you just like to watch me battle Kyle of web dev simplified that video is right here for your viewing pleasure and with that I would like to thank my enablers of awesome Andrew Simon Tim and Johnny as well as all of my other patrons for their monthly support and of course until next time don't forget to make your corner of the internet just a little bit more awesome