I've been challenged to a CSS Battle rematch | Can I beat him again???

a little while ago kyle of web dev simplified had me on his channel for a css battle and i sort of just barely eked out a win against him but it was a lot of fun and i thought it would be great to have him on my channel for a rematch i may have lost to kevin in our last css battle but i've practiced and trained and i am here to take him down on his own channel so all of these battles will be from cssbattle.dev to determine a winner it's whoever can get the closest match within 10 minutes so we're not going for high scores we're going for closest matches so if we hit 10 minutes and we don't have a finished result we just have to take whatever score it gives us at that point kyle seems pretty amped up he wants to take me on he's ready to try and take me down i think i can take him once again though so let's go and see how we do round two fight okay so for this one we need to create this you know microphone-ish looking sound so essentially we have a bunch of circles i want to overlap over top of each other a rectangle on the left-hand side and then the microphone itself this is going to be a tough one to get done in time so we're just going to have a class that's called left and let's say body background is this dark color and then dot left is going to have a width of 50 percent and it also needs to have the exact same background color and a height of 100 there we go and if we change this to red real quick we should see yep it covers that left half which is exactly what i want because i think this is just dead center in the half point-ish then we need to have a bunch of circles so we're going to say just copy this a bunch of times circle and uh for the circle we're going to have a class called blue and a class called right so we say circle this is going to have a border radius of 100 percent dot blue is going to have that background right here and uh then we have what is it circle right i think i called it probably should call it circle right and then we want it to have a width of let's say 200 pixels height of 200 pixels and um you want this to be display flex no we don't well what am i thinking uh we want this left to be position absolute there we go and uh let's just uh put our circle right it needs to have a right uh i'm sorry a left of 50 percent what is this we need like 200 pixels on the left 300 400 100 why is this not showing up um i do think we're going to need four divs though but we're going to do div i'm just going to copy and paste this i think that might be a little faster copy paste paste paste um but on this side i don't know if it's going to be easier to have two separate ones or to have we'll just go with two separate ones for now um so i'm just going to do an id is equal to a i'm just doing ids because it's a little bit faster and you can even do it just as like an attribute instead of even having that on there but i don't want to confuse people too much with what i'm doing um d um so for all my divs actually they're all gonna have a background uh whoops we need to write div first div so they all have the same background color uh oh you know what we're gonna need a little bit of a different setup that's okay oh that's not going to work then div actually this is we can do this div that has an id on it can have a background background of that and let's i'm just just so i can see width uh not width height height of like 10 pixels okay it's working uh so this is saying any div with an attribute of an id on it and the reason i want to do that is on this side that's my sound so let's say d is my sound i'm just going to wrap it in another div i keep doing emit div and i might need to select it but we'll see div that should be a close um so we have this div inside of there i'm going to start with that actually um so d d d so i'm yeah i think i'm going to start with my sound waves because it's the one that i think is going to be the um the hardest so that's my d and what do we want to do with it we want to give it it has the background already let's just say width oh whatever it's fine width of 100 pixels i'm actually going to change this a little bit and height of 100 pixels and a border radius of 50 it's a little bit big i think it's actually going to come down to like a 75 and a 75 um and actually this one's gonna have a different background color so this will be background of that and i'm gonna do that same box shadow trick um box shadow of this looks like maybe 10 pixels 10 pixels so it's a 0 0 0 blur 10 pixel thing and then we want the color on it um so let's put that on its own line so we can see it so this is a the spread right so it's this is the same trick i used before so we're doing that with the spread um and then 0 0 0 20 pixels and the the nice thing with box shadows is it's sort of like you can use this for your border but then have you know multiple borders instead of being stuck with one and i'm taking too long to do this uh 40 40 oh my goodness 40. come on come on 40 and 50. where'd it go there we go uh and the color here 60. blue dark blue dark do i need one more what's going on here i did something wrong and i want this color no one this is the dark color 10 20 oh this would be 30 30 40 50. and i okay so i um and this one should be this color that's my outside one there we go five 125 that's dead on perfect so we have this circle done and now what we need to do is have another circle we'll call this circle right two and it's going to be very similar just slightly smaller so copy this it's going to have a color of black and circle right 2. i'm just going to copy this down a bunch of times circle right 3 4 5. i think that's all the circles and three is blue five is blue and we actually will have a circle six which is going to be black so body and black are gonna share this color just like that and now circle right two we want to have a width of like 180 pixels 180 pixels and the top is going to need to be our circle itself we can just say top 50 transform translate y negative 50 that should center our object force if we just remove the top here and here there we go so maybe it needs to be 190. that looks correct what maybe needs to be 180 though and our left needs to be 1 35 our height needs to be 180. there we go that is correct 100 so we dropped this by 20 and up this by 10 each time pretty easy so drop this by 20 and up this by 10. that didn't quite work right um oh duh we need to give it the right number okay that's not quite right this circle's a little bit too big right no a left left of negative 50 percent um we'll fix that in a second uh hopefully so what we'll say is my body has a width of 80 percent and a height of the height i'm not going to play with the height i don't think and then a margin of zero auto auto there we go so it's that's way out there anyway i think that's gonna get fixed in a minute i think i muck things up anyway uh a and b i might have screwed up here i'm running out of time a is um okay width i'm doing the little box on the far left width of 100 pixels height of 80 pixels border radius of 20 no 10 pixels okay the height is way too big 50 40. 50 60. the width i might have to play with the width too but um so now what i want to do is i want to move it down so on the body i can play with that margin top of like 100 pixels um no that's not gonna work okay i'm gonna leave this at like 20 or 30 for now uh because i want to bring in this big one and i want them centered in there maybe i should no it's okay i can do um display flex oh yeah look it's helping it's helping display flex and then um align items center perfect okay good so that's an improvement already and up this by 10. there we go we have our not so correct but somewhat correct thing so now for our left background is that we need to make the width like 60 no no okay let's just do this with a pixel we'll say 200 pixels 225 pixels 120 pixels pretty good i mean my things are a little off but it's pretty good um we got two minutes now we need to do the microphone let's make a div for that this is a this is a tough one there we go we have an extra left we don't need so mike is going to be a background of this is going to be a width of 200 pixels eight of 200 pixels um position absolute and we need to be on top of left so move left there okay uh we need to make this like a triangle so actually i want to do border right 100 pixels border right color is uh this and then we'll do border 200 pixels solid transparent go of this background um clearly i'm not quite doing something correct order right oh we probably should shrink down these borders 50 pixels and our width 100 by 100 that appears to be the correct size we'll say margin top 20 pixels 30 pixels 40 pixels 50 pixels 40 pixels needs to be a little bit bigger i think it needs to go further back so width 200 actually let's just up this to 60 pixels now 50 seemed about right but then i need to have my border left on our pixels that change the size no quarter right top 200 pixels bottom 200 pixels oh duh with need to make it expand a little bit further for some reason i can't think of how to do this anyway we are just running out of time so i'm just going to submit this pretty sure i've lost this one but at least we'll get a somewhat decent score hopefully 93 i will take it uh border left is uh border left so let's just say 100 pixels solid transparent i should do border is that um and then oh background background is transparent and then the border right color is this color so i get my triangle but why are they so far apart oh no kevin this is not going to end well uh okay one thing i can do here just to fix up this um overflow hidden zero why do i not are they just super far apart oh my goodness i messed this up big time i only have a minute left oh no kyle's gonna kill me 82 match i'll take it we'll see if i can get better um justify items center our content i didn't think that would do anything where's my body body width zero what if i just do a zero or i don't put a width why are they so far apart what if i delete just for fun if i delete this what happens why are they so far apart oh width 100 pixels height 200 pixels there's that so okay that was there and then i do want this to be a negative negative 50 percent uh like that so you know my sound let's see if it gives me a higher score or not at least i have some waves on there it's lower even though i brought my sound waves in um i mean it's just my positioning on everything is now i'm completely mucked i probably shouldn't have used flex ah man that was a disaster the six i can't save this in 16 seconds i mean i got all the elements there they're all there the height of my my thing is wrong it's just the positioning of everything is is dead right so like here the height here should probably be like 400. it gives me there's the timer time is up i failed it's even worse now all right so timer is on let us go this one looks kind of hard but i'm not actually i don't know i keep messing up the style tag there and actually we don't actually need it i don't think um html i gotta get things right though background background i'm not gonna do the weird stuff with the body just because that's been mucking me up lately i keep copying why does it keep copying like that that's super weird anyway it doesn't matter we have that as our background at least um so i have my main div which is gonna be that one so let's just call that one div i'm gonna go with the class i'm going back to classes i need to redeem myself i'm going to do it with like what i know we're still going to stick with an a this would be my outer one so let's style that first so uh we want a width will be 80 percent height will be uh yeah height will be it looks about 80 right and then we can do a um background so we can see it background always helps margin of uh let's say 30 pixels auto and we'll just play with the the 30 because that needs the height is too much 60. i might do a pixel value instead of a height like this and 60. it's a little bit too small so what if i did that as a height of 80. oh that's the margin i think my margin is actually pretty good uh actually i'm not sure 80. okay let's get the top lined up top is lined up now it's the height that needs to be adjusted this is where i'm going to go with the pixel value uh 350 pixels 250 pixels what oh 100 200 pixels that looks like it's bang on okay that's good and then i want to just automatically start by doing flex justify content center and align items center just so we immediately have everything in the center and then i could just create a bunch of divs we're going to call this circle and uh circle uh one i guess and this will be our inner circle next one next one next we have four circles in total okay so dot circle and each one of our circles is going to have a position absolute they're stacked on top of each other it's going to have a border radius of 100 and then that's gonna be it so circle one this is gonna be our inner circle we're gonna give it a width of let's just say 50 pixels height of 50 pixels background of red just so we can see it and that is the exact right so we'll just give it the correct color okay the reason i'm it's i have to rotate this thing if i'm going to do what i wanted to do because what i want to do is a border radius and i don't know if this is going to work uh border radius of 50 and zero so does this mean my okay let's just do 200 and 200 it gives me more the shape i need and then a transform rotate 0.25 turn 0.125 turn aha oh oh yeah i nailed it circle 2 is going to have a width which looks maybe like 150 and then it's going to have this bright yellow color and did i not oh this would help okay and uh what am i doing wrong this is not quite the right size first of all so it's like 140. that looks correct i think i want circle one to be the bottom one i have these circles in the wrong order unfortunately and then circle three there we go okay so up next circle three circle 3 is just again our background color but for now we're going to make it red so we can see it and maybe like 200 pixels nope that's too big that's actually gonna be circle four so we'll just do circle four right now which is this kind of ugly green color there we go and now we can actually do circle three and circle three is probably going to be like 180 i'm guessing and it's just the color of the background in here right we want to go inside and do a div class is equal to inner oh now i have confidence this is making me super happy close div that that actually worked out okay um so my inner div is going to be this one so on my a i'm also going to do a display of grid that's weird um and then a place items center and that means that my i called it inner my inner inner command kevin we need to redeem ourselves inner has the background color of you and you got i have a habit of doing that a background of that a width width of 20 pixels and a height of 20 pixels and a border border radius uh 50 percent um and this obviously needs to be bigger fifty yep okay now we need these these wing things this is the hard part we're to call them left and right and there's quite a few different ways that we can do this i think probably one of the easiest ways is just going to be to create some rectangles and rotate them um okay there we go left to right and we want the left right to appear behind well i'm not going to worry about that right now we're just going to start styling so we're going to say width is 100 pixels 8 100 pixels and i'm just going to do a rotate trans form rotate 45 degrees background red so we can see it and let's just say margin right is going to be 100 pixels 200 pixels 150 pixels uh still a little bit too far but maybe it's just my thing is too big we do like 90 and 90. i don't think that's quite right but it is really close so i'm gonna stick with it and uh let's give it the correct background color here there we go and i want it to be behind everything except for circle four okay that's not quite right but it's going to be really close so i'm going to do the exact same thing with the right we're going to copy this and instead of having a margin on the right we'll do margin on the left 150 pixels let's just make sure we position app so loot on both of these and make sure i rename this to right and i want the right to be behind everything all right we're going to submit it to how close we are it's obviously not quite there these need to be a little bigger we're going with a box shadow box shadow uh we want the yellow one first that looks pretty thick so we can say zero zero zero 100 pixels and this color 100 is too big 50 pixels a little bit too big 45 or is it too small there we go 45 that's perfect oh i'm almost done oh there's a little see that little hop that's happening there i hope that doesn't penalize me for that um so that's one shadow and then the other shadow is the dark color so then we'd come in with a zero zero zero 20 pixels and that color oh except the 20 45 let me just put this on another line so 45 65 70. um so this like this second shadow is starting underneath 60. i had 16 it was too small 65 then that's really close i'm gonna hit submit for almost five minutes left let's see come on submit that's gonna be like 99.9 again isn't it oh it gave me a hundred yes four minutes over four minutes left hundred percent yeah that feels better after that failure on the last one awesome i need to be a little bigger so i'm gonna say maybe like 95 and 95. that looks really close see what this is 92 okay but it is not at all closer um i mean it looks like it needs to move like in and down a little bit so maybe like 94 pixels make it a little bit smaller i'm not quite right 92 oops looking at the wrong one 94 94. 94 looks dead on oh gosh i i don't see any differences oh wait our inner circle is the wrong size maybe it looks like it's moving a little bit everything's off by like one pixel this is really frustrating i'm gonna change this to position absolute ah that's just gonna mess everything up i need to keep with the flex box okay let's see i need to go up and to the right so up would be like 42 and to the right would be like 92. there we go let's submit it i think it's wrong again how is this a 70 match what the heck is going on well let's just go back we got 20 seconds we're going to go all the way back to the thing that was at 90 something percent and uh we'll just call it there commit is that 74 like i don't know how i got 70 with that all right 92 percent i don't know how to get any closer just ran out of time so hopefully kevin also run into the same problems start my timer and we're ready to go so this one's a bit of an interesting one i think there's a few different ways uh that we could do this right and one thing i've realized is we can choose the html element uh when we want to do stuff in this challengey thing here so if i set that and i say my background should be not html did i copy that i'm slowing myself down already um there we go and the advantage with doing that is you can actually do things without divs when you do this which is kind of interesting um it was jay who'd let me know about this so if you don't know jay he's a bit of a css wizard himself and he has a youtube channel um and then what i can do is on my body i don't know if this is going to work but i want to try it out come in with a background on that um and then we can set a width of like 30 this is probably not actually gonna work but let's see auto auto got to spell things right um and on the top and the bottom i want to add oh no i want to make this pretty small actually um let's just do like 400 px 200 100 150 wow okay that's more than i thought it would be i'm giving myself a much harder time here than i should be um i'm just trying to get the size of this middle one to be the same 35. see this is where i probably should have shouldn't have taken this approach um but that actually looks bang on so i'm going to start with that okay so for this shape we need to design this weird kind of looking hourglass shape and the best way to do this is to have two circles on the side that do the cut in and then we can essentially just have some yellow rectangles in the middle so the very first thing i want to do as always just get my body i want to put the background color here equal to this green color there we go that's pretty much 50 of the thing done already and now this div we're going to give a class of circle left i'm going to copy this and i'm going to do circle right as well i'm just gonna hyphenate these separate classes makes it easier to work with in these type of competitions so circle left and for now i'm gonna do a background color of red just so we can see this a width of 100 pixels weight of 100 pixels and we're going to do border radius of 100 and this is clearly too small let's try like 300 300. that's uh too big i think two hundred two hundred and we need to move this down into the center of our screen so we'll say position absolute top is going to be 50 and we're going to transform translate negative 50 negative 50 percent and this will actually be zero there we go that's in the dead center and actually we do need to translate it off the screen by 50 as well and now we just need to make it bigger let's try 250 that's not quite big enough we'll try 300. that looks to be very close but not quite the right size for now we'll just leave it at 300 and we'll change it later if we need to so let's do circle right and this circle right is going to have a positive 50 um first we want right to be zero there we go that gives us our shape and then what i want to try is some box shadows on this box shadow um i'm going to go in a new line just because i'm going to have multiple so the first box shadow is going to be this um actually i'm going to do pink i think first just so i can see it um so let me think here if i do what do i want to do 20 pixels oh no uh wow i'm really okay zero zero 0 20 pixels and then i'm going to do pink for now we're going to switch the pink color out after just so i can see it but then we do a comma and then 0 0 0 40 px 30 40 40 pixels red so you can see how i can build out from there and actually my sizing looks bang on so i can switch these right away copy that take that one here put a comma and then i can copy those and then paste that and then this one will be 60 and this one will be 80. whoops not 980 80. like that that's not working why oh there we go perfect so now we need to do is get our yellow rectangles in the center so we're just going to call these divs here some lines so let's just copy this down and we'll just say line and we'll say line one i'm actually just going to copy this we have five lines so two three four five there we go so dot line is going to be background color which is this yellow color with we'll just make it a hundred percent it doesn't matter and the height uh let's say like 50 pixels and we'll say margin of 50 pixels as well that's too big we need like 25 and 25. that looks like the right size maybe actually 20 and 20. yeah that's the right size for sure now we just need to offset the uh first one essentially so we can just put them here a div we'll just call it spacer this is really ugly code but it's fine and uh spacer is just going to wrap these different lines like that and we can say spacer and we want to give it a display flex and align items center and flex direction column and justify content center that's not quite what i wanted i'll just need two dibs uh div i always want to emit here uh div and i'll just do an id to make it a bit shorter of b and this one will be an id is equal to hey and i don't need to close whatever i'm not going for a high score right we're just trying to match it so i'll close my div um so then i can say that my id which is the hashtag of a has a position of absolute just so it's breaking outside of the body and i want this um let's just say top or yeah we'll do a top of zero i'm gonna have to adjust this probably bottom of zero left left of 60 maybe um with 100 oh this might be an issue but let's just set the background color now background of that so it shows up and a border radius of 50 so you can sort of get the idea that i'm going with um maybe it's actually going to work left of 50. uh 30 35 maybe uh sorry the other way around 65. 63. my shape is a little bit off um so this is where i was a little worried top and bottom like it should be uh man okay top there and then bottom negative 100 pixels no that's not going to work negative 20 this is not the right way to do this this is going to slow me down a little bit um oh that's so close i think it's just my left value actually 62. 64. maybe 62 was good 62.5 we got it we got it we got it okay so now i want the same thing for my b and this is where we could save lines of code and everything here if i was doing it a little bit differently and if i was trying to like a lot of these are the same for both so i could save lines of code but uh that just means this should be right instead of left look at that look at that i think that looks really good so i don't think i don't know if this is the optimal but let's hit submit i have four and a half minutes left submit come on four and a half minutes left how did i do 99.9 oh come on oh and my margin needs to be smaller now so margin 10 pixels justify content center align item center and uh height 100 there we go now let's just change the color of these circles be the correct color and let's submit it even though i think it's a little bit off but we'll just see for sure to do 99.4 so it looks like this left side is just a little bit off for some reason what if we set our left to zero even though it should be defaulted at zero but maybe that'll be enough that looks pretty perfect to me 99.9 percent that's painful can i improve that i feel like it's just like this little this is why i think it was not like the best approach exactly that i took that actually looks more off maybe it's actually the shape that i did five um because of the way i did like the top here to try and get the circle maybe it's that that's more off come on um like to get the height i probably shouldn't be doing it this way but let's just play around with this a little bit to see if i can get a better score i mean this just doesn't seem right but i don't know what else is wrong with it o2 come on i mean this looks dead-on all right we'll change it back to 20. because i know 20 is like the correct one is there something wrong with our spacing of things what if i just did 15 and 15 just to see there's a bigger jump now i'm doing the one on the left i was looking at the wrong one while i was playing with this 22 22 okay we'll try doing 22 for both we'll see if that gets us a closer score i think i'm gonna be stuck on the 99.9 percent here come on it's having some trouble it's not sure what to do if it doesn't work i'm just going to count this as a way oh 99.9 again really 20 i mean that's just the same size i think think 19 or something i'm not really sure anyway we just ran out of time so we're just gonna go with 99.9 hopefully kevin didn't quite get 99 maybe he got 99.8 we got a bit of time left to play with so we'll try one that that's my last attempt at trying to get perfect here it's still oh well hopefully kyle only got 99.9 as well um but i think it's a fun sort of look at how you can do this with instead of using a bunch of divs but i think a bunch of divs would be easier to get a hundred percent on it so maybe i took the wrong approach but it was fun anyway and i think i got close enough and there we have it kyle won the first battle i won the second battle and the third one was a tie except a tie that that sort of sucks so i think we should get an official ruling on this one and see who got to that infuriating 99.9 faster and it looks like it was kyle uh i definitely i mucked up on that triangle when the first one we did that was a bit of a disaster the spacing on it was that giant space it was just the border the transparent border that was there i just couldn't i think i had the right idea for that one i think i could have beat him on that one but i ran out of time those were the rules so kyle takes the win on this one it was a lot of fun though if you don't already know kyle and his channel webdev simplified he covers css as well as javascript react and a whole bunch of other stuff definitely check him out the link to his channel is down below if you're not already following him that was a ton of fun did we get screwed a little bit by the weird algorithms maybe but as the old saying goes all's fair in love war and css it was a ton of fun kevin and thank you so much for having me i really hope that you enjoyed this video if you have any recommendations for other people that you'd like to see me do css battles with or just collaborations in general please leave a comment down below and let me know who it is i really want to start doing more collaborations in 2021 i hope you liked this video i really hope that you enjoyed it and seeing us go at it and the different approaches that we took because we definitely had some different ways of handling some of that so i thought it was really interesting to see the different ways especially the eyeball one i thought that was really interesting the we sort of took completely different ways of doing that so that was kind of cool if you did enjoy this video and you haven't yet subscribed please do consider subscribing i thank you once again for watching it a really big thank you to my patrons for their support each and every month as well as a special shout out to zach for being my enabler of awesome and of course until next time don't forget to make your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 416,783

Rating: 4.948339 out of 5

Keywords: Kevin Powell, tutorial, html, css

Id: 20QiX8rmHnU

Length: 42min 21sec (2541 seconds)

Published: Thu Feb 25 2021