Adrian Twarog challenged me to CSS Battle

and we're done look at this quickly put it at the top bottom top there it's beautiful it's perfect now we can click submit and we're done oh there's no way he beat me on this i've got a hundred percent no pressure will you [Music] hey adrian what's up i was just a little bit bored and i thought i'd call you and see if we can do something a little bit fun what do you mean you're bored you make like one video a day how is that possible yeah well um i thought we could do a bit of a challenge what do you think all right game on adrian but first let me get some coffee [Music] all right so here i'm gonna go right into it i'm not gonna wait at all so we've got our body tag and i'm gonna do a background here put that in then after that we're going to do margin 0 and padding 0 display flex justify [Music] content center align items center beautiful so we have that now have a look at the height the height's already perfect so that's good and then for the div here we almost have two divs uh so i'm just going to give this a quick class i'm going to call this ticket so here for our ticket class we've got a background of yellow so let's put that in the height looks fine but i'm not sure off the width maybe you say 400 pixels 300 pixels no 200 pixels yeah it's just about what is that 200 pixels it's hard to tell looks like it's 202 pixels i think maybe 204 pixels 205 pixels quick quick quickly gonna be fast for this oh yeah no way more 210 pixels let's do that no mine's too much oh no maybe it was 200. i'm not going to overcomplicate it let's see leave it at 200. then i'm going to create one section here called uh div class right and that'll be the right hand side let's finish off this div if i can type then i can win then in here we'll do right and this has that background color background paste that in then we'll do for this ticket display flex and justify content flex end this can have a width of 50 pixels uh background come on there we go so that's a little bit more than 50 pixels maybe say 75 pixels is that 75 no it's less it's 60 surely it's 60. i'm gonna stick with 60 for the time being keep it simple now position absolute i'm not relative and then these can be the dots so we'll do div class and then do top left dot top left close that let's get this class here and then we want the background here to the background put this one in border radius 50 i know he's not good at these border radius things so we'll keep doing this with say 25 pixels height 25 pixels position absolute left zero pixels top zero pixels great now we need to make it a little bit bigger so 50 pixels and 50 pixels left negative 25 pixels and top negative 25 pixels boom we've got our our indentation thingy but it's still too big we have to make it smaller uh we have to make it smaller yet so let's do 25 pixels here for the indentation and this can be 12.5 for the negative amount what is that my one here now it's too small maybe say 30 pixels and here we'll do 15 pixels for the negative let's make sure we get this perfect for the first one and then we can do the rest so maybe we'll increase that to 40 and negative 20. come on we need this perfect it's perfect it's perfect all right now we can just copy these across and we win one two three four five ah so this is top right so let's copy this cross top right we'll do it on the right side and top right and top right boom then we need one on the bottom left and bottom right beautiful let's copy these across they're perfect and we'll do one here at the bottom and at the bottom copy this copy that beautiful oh we're missing one uh here i've not spelt it correctly bottom right bottom left now we have only two left here these little indents so we'll call this middle top and middle bottom and then we'll be done come on all right let's copy these are offset just a little bit so this will be something like on the right and maybe at say 50 pixels and let's do middle bottom there it's too big let's make 20 pixels 20 pixels offset 10 pixels i think that's already perfect and then copy one more oh one more one more one more and we're done look at this quickly put it at the top top there it's beautiful it's perfect now we can click submit and we're done oh there's no way he beat me on this i've got a hundred percent no pressure william and this is gonna be our container and we're gonna have rectangle one rectangle now we can use display flex and so i can i maybe i don't need container actually up and justify content center online item align items center looking good so now we have air 102 let me set the background colors so this is r1 this is er2 so the height is correct it's 100 pixels the weaves are the total weave is correct but probably maybe this one is 50 and 150 for r1 looks good so now let's do our little circles so let's try these two bigs two big circles c1 and here maybe i'm gonna use a class big circle and situ is the first time i use a class in css battle but so big circle background color violet we've let's try 25 heights 25 for the outrageous 50 this is too small that might be it i don't know and now let's do position absolute and then do top minus 20. i think yes so can i do position relative minus minus 20 minus 20. so i'm really confused with this position relative question absolute because in reacting it here everything is absolute or relative so i'm not sure how these rules uh work but uh that looks good i think yes but then the bottom one i think that i'm gonna struggle so this one is c1 and now c2 we know that the height is 100 should i do 120 100 okay okay looks good now let's do the the other two big ones on the the other shape so for sure i mean there is a way more elegant way to position these elements but let's add c3c4 in this shape here i'm lucky because i know really the dimensions of the objects and these are quite easy but ok so c3 and should i do right zero 20 minus 20 okay and c4 um no 30 yes that kind of makes sense it's not very elegant but and now let's do the small one which i feel might be tricky because let's see so that would be c5 c6 small circle so is it maybe 20 pixel radius could be and um did i i put it into a one c5 position relative so i have some issues somewhere i forgot to rename this one to small circle c5 let me just do background color red to see it that looks good so left one so 150 minus 10 140 top then i put back the background color it's not correct but let me do c6 first and then try to see how i can fix it c6 and red again so minus 90 minus 100 110 okay so the right circle is so the right circle is bigger and i think this is where i get finished because i laid out things in such a dirty way but now if i change the dimensions it's going to be a nightmare to update but i'm tempted to something like this that looks perfect now i need to reposition left 30 perfect and i guess this is c3c4 40 40. okay that's not that bad it's not 100 but i think it's gonna be good enough for me oh 100 match perfect so then there is a bug because i do see a tiny difference oh well i'll take it round two lady go so first things first we're going to do a body let's do the background here then let's do margin oh don't even worry about that display flex just justify content center align items center then we're gonna do our div here and this can have a class called circle so let's call this circle then we want to do let's see the background here uh border radius another one beautiful radius let's do that it's 50 so we need that to be a little bit bigger so let's bump that up to 150 that's perfect so let's put our background color this is the body and let's do a circle background and let's do wii 150 height 150 border radius 50 percent display flex align item center justify content center looks good so now we have a couple of uh shapes we need to do then we need a couple of things happening here so for this circle i'm gonna do a position of relative and we need a couple of horizontal lines so i'm going to call that div class h1 or h-1 do that since we're trying to save on characters h1 or h-1 sorry that can have this background color uh then its height can be what like 10 pixels and top can be 10 pixels left can be zero pixels and right can be zero pixels and position is app sir loot not high enough so maybe top can be 30. almost right 29 pixels nope 30 pixels one is one pixel too high but if i do 29 it's let's try 29.5 yeah it's 29.5 okay i don't know if half pixels work but obviously in this case they do uh so let's copy a couple of these so we need two more two and three so let's do h dot h2 and dot h3 so we're not using too much classes and here for dot h dash two we'll just do the top as what would that be like i guess uh 60 pixels from the top no it's more like 90 pixels less 17. 68 69 0.5 what's with these half pixels and finally h3 what is that i guess like 19 9.9 oh sorry five little more 110 and zero 0.9.5 all right beautiful uh so let me i'm not gonna try to be fancy i'm just gonna try to get it done but let's see here maybe we can do it using a flex positioning so circle display flex align flex direction column justify complaint space between and so line height five five pixels with 100 background color okay so space space evenly looks good 10 pixels background color perfect so we've got these three lines now we just need these two more ones so this one will be a top line one so let's copy this across and call this t one so that's the line from the top this time we'll do a width we'll center it so we'll do say top is 0 pixels left is 50 and translate we'll do transform translate y fifty percent negative fifty percent so hit save on that transform transform blade y is a y x sure it's y where is it width or height so we'll have to do bottom zero pixels beautiful okay where's the rest of it surely it's bigger than that uh [Music] h1 circle [Music] yeah that's weird border one pixel solid red there it is so maybe we'll do translate x there we go perfect so now let's do the two circles and here the two circles i'm gonna use ah i'm wait i'm tempted to center them outside and then move them let me think quickly i'm gonna do container i'm tempted maybe to do this outside but let's see so container i'm gonna use an absolute position fill to overlay everything again display absolute coming from react native and background color just to check it's not working position absolute yes that's what i was afraid so does it mean that here i need to do position relative perfect so this is good and inside no i'm gonna do sorry so this is gonna be a circle so class okay i'm gonna so idc one i'm just going to repeat the code c1 c2 so this one is let's say c1 no background color border radius is uh can i do 50 75 border is 10 solid and this color and let's say maybe i do left 75. can i move this now so that's why maybe i should have put it outside um [Music] let's see one c2 and they seem to actually modify i'm just gonna do it outside um i'm gonna do a circle so let's do so we can reuse this thing here and here i'm gonna use display flex let me copy paste from here and now i can do c1 which is like this one let me do background red just to check okay and then i can do position relative left 75 pixels 75 35 and let's do the border 10 pixels solid looks good and now we can do and here i want to do 70 no wait [Music] c2 now left 150 minus minus 35 minus 75 ah pretty close and i forgot i forgot the middle line um let me do just here and one and weave 10 no boundary just and this is the background so definitely not perfect but i guess good enough let's submit yeah 99 99.2 yeah good enough for me and then two more now these are going to be the tricky ones how the hell do i do that oh only one way to try and that's to try so maybe skew why 25 don't do a bracket um what are the transform variables we have that we can do i've never done something like that uh i could do a circle maybe maybe i could do a circle that might not be the conventional way to do it but oh i don't have a t2 what is this t1 t2 anyway so let's try this circle way so inner circle and we'll copy this circle we had before we'll just call this an inner circle uh and then for this i guess the width can be 100 pixels let's do position absolute and we'll make it red for now so that we can see it then we'll do a left 50 uh transform translate y maybe 50 x so that's one way to do the circle we'll just i suppose that index it lower so i guess this could have a z index i'll say a hundred and the lines and the lines could have a bit more i guess so here these can have say 50. no sorry they can have 150. and then this here you can have where's our inner circle color red so we apply it like that maybe make it a little bit less so maybe 75 pixels for the width so that's almost there maybe a little bit more say 85 so that's our inner circle one and then we'll just do one more inner circle so this can be inner circle too this one will do red for now and this can be a little bit smaller i suppose maybe say 650 pixels uh its height can be a little bit smaller so say it'll start 40 30. so i'll do top 10 pixels and then almost has to have those little corners at the top and bottom that's annoying not sure how i'll do that so close yet so far that's frustrating that's a fail i think you've beaten me here william because i just can't i can't get these two do what i want at this it's just like where's my t1 line going missing my t1 line so that needs a z index of 200. ah i think that's the best we're gonna do let's submit that and see how badly we did oh that's last 99.92 three two one we're starting let's let's be like so so i've got to make this sort of a box which looks like an end can look which slope like looks like first thing is the color let's fix up the color there probably not the color i'm after let's see see yep that's the one uh then we wanna then what we'll do top left radius fifty percent and maybe we'll copy that on the right side uh then on the bottom uh oh sorry border border left radius we'll do what is that like one em and then let's copy that over to the right side and let's do an over flow hidden beautiful and a position of absolute ah great so that's done and oh no sorry relative we'll do a position relative it's got a little bit more height there so i think the height will have to be something like 200 pixels maybe 100 pixels has to be the height if that's the case that you might have to do a div 8 box underneath so we are doing this sunset so we have a square with the bottom border radius and three circles within the square with an overflow done and then a half circle on top and the whole thing is centered into the body so let's do first the background and we're gonna do display flex justify content center a line item center so this is going to be our main container and let's do the square and we have three circles within c1 c2 c3 let's do the body first so the background color and so let me put some random heights and eights just to check so this is too small 150. um and so maybe i need to do the half circle immediately to push down the square to the bottom so maybe i can do i'm gonna call it head and so i think the weave is correct 150 for the radius 50 and background color and i 75 should move this one into body no wait i need to put a wrap container to center everything and i would like so so it looks like they are overlaid on top of each other is it because i'm using this yes these empty tags perfect yeah i'm really not used to since i'm doing react native so now i need to cut it in half which i could do with absolute positioning so by and position relative to put the circle behind the square but then i'm afraid i'm gonna lose the dynamic centering is there a way i could maybe just with a container and an overflow eden let's try okay don't i guess or let me check okay but the size is wrong so maybe 140 140 70 oh no the weave was correct 145 so the weave might be okay but the height probably is wrong 140 120 looking good i like it it's not it's not perfect 25 okay let's add the bottom border radius above the outrageous i'm not even sure but um can i do this no bottom left left bottom okay okay that was a lucky shot it looks pretty good i think i think that's okay i'll take it right side okay so let's start this again so now we've got this we're going to do display flex justify content center and align connect to my deceptor then in this we're going let's see our top circle or top half circle i don't think this has auto complete so yeah no it doesn't have auto complete so i'm just gonna div class and let's place that in there close that div off and for this circle i'm gonna do let's see uh height 100 pixels with 200 pixels uh copy this light color here so background let's see what we get to get this nice shape here uh the width is almost too much let's do that at 12 em no let's do 10 am too much still nine eight so let's have a look here that's a little bit more a little bit more so let's do 10 a.m uh yeah that's almost it's a little bit too big so if that's not em we'll have to do a pixel so let's do 125 pixels for width that's not enough 150 pixels come on we gotta be quick for this yeah but the 50 pixels seems about right then for the height i'll also do 150 and border radius i'll border top left radius 50 come on there we go there's our top left we'll do top right as well beautiful look at that that's beautiful already and then for the height the height can probably be a bit less so let's do 100 pixels for the height but if we make the height less it's almost it's losing some of the styling there but that's okay we can leave the styling as is um i think that's that's fine we can move on to the next section here so yes this will be probably there's some sort of a circle that's going on at the bottom so uh bottom border curve and my naming conventions here are terrible but that's okay div class never knew that styling can be so hard if you're just using css so let's close that div there ah oh and we're gonna have to put this in a containing diff so it's nice and scented so let's close this off beautiful ah that still looks a little bit wonky and i'm not too sure yet why ah maybe because this needs to be display in line block and for our next one that also has to be a display inline block so you have two now uh let's do here this needs a parent class so let's do class holder simple enough there we go and for this we'll do flex direction so let's do flex direction column and for this bottom item we don't want this border radius at the top at the bottom so let's copy that across uh let's do what was it 15 pixels more or less about 15 pixels i think and let's see oh we've applied it for the wrong styling so uh this should be on here and this should be on here the height is too high as well so i'm just gonna do 50 pixels for the height so that's almost perfect i think it's like one pixel off so i'm just gonna do 49 pixels and there that's perfect all right so we can do the circles inside the body we're gonna center so let me do we're gonna center the first one and overlay the two using absolute position filler so they're gonna use a different layout so here let me do display flex align items center justify content center and so we're gonna do the first circle which is a small one background color weave 40 height 40 border radius 50 it's too small 60 and okay so maybe i do need to position it manually so position relative top minus 10 15. that's not a good sign but but okay let me do situ and so here i really want to have yeah i'm going to do an absolute position field and absolute positioning so c2 it's going to be this one here so background color position absolute and weave i have no idea let me put i don't know 150 height 150 and for the outrageous 50 percent here should i do position relative okay and then here if i do let's say left minus 50. so do i need to do can i do an overflow down here perfect um okay so now that we have that we just need our elements there at the bottom that's going to be tricky one so what i might actually do is i might bump this up to 99 pixels of height and do a negative margin of 50 pixels so we get the same sort of an aspect but now what we can do is an over flow hidden so we've got this overflow hidden we can now apply some styling inside of here so in here i'm going to do bottom left circle i think that should be good yep let's do div class bottom left circle beautiful and this here will need a position of relative and then the item here at the bottom so this one here bottom left circle i'm going to do a position of absolute we'll do left negative 50 percent then uh with a hundred percent height a hundred percent uh bottom negative fifty percent border radius fifty percent and then we'll use this darker background background color beautiful so there's our weird looking circle that doesn't look right at all let's bump this up to 150 pixels and 150 pixels so that looks like it's not enough um something about that is maybe it needs to be with 200 pixels 200 is almost too much okay so what's going on maybe that circle is actually bigger and i don't realize it let's do 300 pixels and the negative amount is 300 pixels so now that's left negative 300 bottom so we have to do 150 so it's half okay let's let's do that that's still it's too big we'll do 150 and 150 and here this can be 75 and 75. let's try that so that's almost all right it still needs to be bigger so i'm going to do 200 200 and 100 pixels here for its offset and there that's that's perfect that is literally perfect all right great so we can copy this we can copy this over to the right and start this off at the right and for the right we've got the darker shade so we'll just apply it in there copy this div over call it right and there's our right one so that's perfect so top 45 40. 35 i mean the radius is wrong obviously my circle is smaller let me put 200 maybe this one is tough i think something oh oh wow okay these are really lucky shots but c1 is really not good could it be the radius also 60 is it smaller i don't know let's do c3 and i guess it's a bigger radius let's put 300 move it top no it's smaller to 200 as well maybe actually wow this is a lucky shot i just put some random values and so the only thing that doesn't work is the circle at the center minus 17.5 i don't know okay looks perfect ah no not really but good enough for me i'm submitting 99.9 and then finally the little middle circle so i'm not sure what you called it you cool so cool but i'm just going to call it middle circle where i'll copy over this class it will center it and we'll offset it a little bit and that should be about it about it it's also a lot smaller i think it's like 75 pixels but let's copy this whole thing here uh oops no sorry let's copy this thing here for the color here we'll get this light color uh for right we'll get rid of that we might just do left 50 uh with 100 pixels height 100 pixels top 100 uh 50 i guess oh maybe even 100 pixels i don't know we'll just start off at zero here and z index 50 so where is that circle it's gone uh left let's start that off at zero we haven't given the class a dot so it's not working so let's put that dot in there there we go so that's way too big we want that maybe 50 pixels and 50 pixels that looks better maybe even 75 pixels uh on top and left left 50 and translate transform translate that's what it is transform translate uh what is it why negative 50 do you think x yeah there we go x and this time we'll do it at the top uh that's not looking right right uh top negative 25 pixels maybe uh maybe a little bit less maybe zero pixels for the time being we'll have to change the z index so i might even just let's move it up here so it has less priority so there we go that has much less priority now yeah that's really tough so close it's so far ah let's see what we can do so first of all i'm gonna do this to 149 because i can see there is on 151 because i can see that one pixel was off uh uh the border radius here on the sides need a little bit of adjusting so they're like what 20 pixels yeah let's do 20 pixels yep that's perfect and then the overflow that i'm doing we almost missed that overflow otherwise how are we gonna do that that's a good question oh i suppose we could do a height which is slightly more maybe uh 109 pixels and to negative 60 here whatever i'm wrong so let's do negative 60 pixels but this will have on one so that has a little bit more height there that we can utilize but it's too high now what happens if i do 70 pixels there we go 70 pixels is good now we can make this circle a little bit bigger bigger let's make it say 100 pixels and 100 pixels so it that's too big it does need to have to be about what's going on here uh even less maybe maybe say at least 50 pixels and then 10 pixels from the top and then it just needs to be a little bit bigger but 60 pixels deep here and there and then maybe a little bit more 62 pixels look at that 64 pixels maybe 65 let's try 65 let's do 70 pixels maybe that's it it's a pixel perfect amount that sometimes feels like it's just bugging me maybe if we do negative eight pixels there that's it so we need to make it smaller so say 65 pixels and then we just need to offset it just a little bit more to the top so maybe five pixels from no let's do 12. 10. it does feel like it's about nine or ten i don't know it's just that one pixel maybe it's wider so let's try wider we'll do this at 70 pixels that's too wide 66. [Music] my one's too wide let's do less wide less wide one more pixel less wide all right i think that's just about right and the height maybe one pixel list yeah there we go i'm happy with that let's submit that hopefully we didn't do it too badly but i'd love to see how william goes with this because this was really hard but i've got a hundred percent match so that must be really i think anyway probably took way too long all right well i think maybe this is a draw i don't know but this was certainly fun thank you william i hope you guys enjoyed it too if you haven't already make sure you hit like and subscribe on william's channel because he's got some amazing content especially with react native and i look forward to doing some more of these in the future maybe you can jump on to my channel and challenge me in some stuff on react native but otherwise thanks all right so that was a fun challenge with adrian i cannot wait to look at his solutions it looks like he went very precise and very fast and what he did things the css way so i cannot wait to study solutions and we're gonna do a rematch on his channel now in the first css battle with jessica chan i really did things react native way there are only a few sets of primitives we have for layouts in react native and then there are also some clear defaults here i try to be a little bit more fancy use classes use border radius 50 but still was pretty dirty and there are clearly things which i don't understand yet how that works in css but i hope that you guys enjoyed this css battle i am looking forward to see you in the next one and until next time happy hacking [Music] you

Channel: William Candillon

Views: 41,904

Keywords: React, React Native, Can it be done in React Native?, JavaScript, TypeScript, gestures, animations, reanimated, Native Apps, Apps, Mobile development, CSS Battle

Id: gncirXGg3PM

Length: 58min 21sec (3501 seconds)

Published: Mon Jan 18 2021

Reddit Comments

[u/sheriffderek]

I'll use SVG and see how fast I can do it! 😉