Pushing the limits of HTML & CSS

hi there and welcome if you're new here my name is kevin and here at my channel we learned how to make the web and how to make it look good with weekly tips tricks and tutorials and i'm very excited for this video it's a video that i am taking from a live stream i did over on twitch but sort of edited it and condensed parts of it down a little bit so we can just get to the good parts and what i do in this one is i'm taking a look at cssbattle.dev which is a really cool site that lets you push the limits of html and css a little bit as you're going to see now this isn't necessarily the types of things you'd want to bring to a production site because we're doing things that maybe aren't best practice and there's a few things that just wouldn't work in the real world but that doesn't mean you can't learn a lot by doing things like this from how to use margins in creative ways how to come up with more condensed selectors how to just come up with sort of neat tips and tricks that could be really actually useful sometimes in edge cases yeah a lot of what i do here is definitely not for production it's more about just exploring what you can really do with css and having some fun along with it along the way so let's go and jump right into it um so yeah let's just jump into battle number one which is a nice and simple battle and what i'm gonna do in this battle is not only look at how i'm gonna show you how i approach these things anyway so uh they always start you off with like this you see of the orange square there and then this is my target this is what i want it to look like um and you can hover your mouse over to get a before and after to see how close you are and then when you're happy you can submit it gives you a score based on how accurate you are and then if you match it 100 you can improve your score by using less characters so always take off the comments because that's a lot of characters you don't want um and i'll start with this so if i up if i update anything here let's just do 100 a thousand um you can see it got bigger so not too bad now you can also just click to copy a character which is nice uh the colors i mean so it's really easy to get your colors um so i think the first thing i'm gonna do is body and just do a background of that and my div here should be this one right here uh so the div is coming in now on my body i also need a margin of zero and then here i'm hoping that i can do a 50 and a height of 50 oh it needs to be so this is where the mouse is useful so i can see that my width is actually perfect but my height is way off uh so we can come in and fix my height i'll do with 80 too much 70. and it is a lot of just playing around with numbers and trying to get things especially at one point you start going into like pixel values and your um your pixel values you're like modifying them by one and see here i can't actually get it perfect it's like a 66.5 percent maybe there we go so it looks like it's perfectly matched so now what i can do is hit submit and it checks and it's going to give me a score hopefully there we go oh i got confetti too nice um so i got my high score now if i go and look at the leaderboard though uh all players this guy has a lot higher of a score and you can see that he did it with 54 characters and actually all of these people are tied because they found the most optimal solution if you go to the older challenges for sure you're not like they're all tied um but they did it with 54 characters and i did it with 153 characters i have a 100 99 more characters than the top of the leaderboard which might seem crazy but now we can look at ways we can optimize this [Music] there should be confetti whenever a new person enters the chat that would be really cool i see a whole bunch of followers coming in thank you for following jeff welcome don't worry about being late i just got started thanks for the follow gabriel gz the the amazing smile nice name and another jeff we got jeff no 1212. yeah ragnar's got the right idea we can we can now start cheating up here um so the first thing i'm gonna optimize actually the first thing i'm gonna do is take off my closing div because i don't need a closing div um so i'm gonna take that off and the reason i don't need to have a closing div is because when i get to my style tag here it knows that i can't have a style tag inside my div so the browser is closing it automatically for me hey that means i can also take off my closing style don't need that either so if i do that and i submit i should be able to get a higher score because i eliminated a bunch of characters already there we go so now i'm down to 138. um you can also minify your css by taking out all your white spaces this part if you get into the more complex complicated ones is a bit annoying um i think you can just like have a css minifier after but taking off your white spaces i think is making a difference where's my character count don't we have one oh there we go yeah you can see i'm down to 123. um and also always remember the last css um you don't need to have a semicolon on your last rule so i can take that off of there or not it's not really a rule it's my last declaration um so here i don't need that one and i also don't need this closing um semicolon or semicolon i don't need this closing curly brace because it's not doing anything because it's the last one so you can take anything that's the last doesn't actually need to be there um and i'm not gonna i'm not gonna go too crazy on this one to to maximize but just to show you i can no i'm already down to 101 characters now and i should get more confetti i'm guessing and push my score up a little bit so this is where you go from it being like super um you're trying to really be good to um starting now i don't know if i can do an i because i have a height on it see my eye is not working uh there are ways you can come in with custom elements and do some interesting things with it um but i think what's happening is with the eye if i wanted to bring that in i'd have to do a display block to give it a height because uh this is an inline element by default and you could even do like uh i don't know a g which well i mean that's part of svg but you can put in anything you want and just make up your own element as well um and it should work but i don't i think we'll have to stick with the dip for now i think it's the shortest block club or i can do a paragraph i guess that would make sense do a p instead that would work there we go so p is a block level element so i can use a p there and are we down we're below 100 characters so i'm happy with that yeah at one point it definitely becomes minimizing for the sake of minimizing um but the idea and that's why i'm not going to try and beat the high scores because we'd just be here like going a little crazy um trying to and even i have extra spaces here we can take off a few more um but i'm not going to go like too insane trying to beat the high scores because to get this down to 50 characters it could be interesting actually i don't know how um any people get the high scores on this thing um i did open this and i think it's new but they do talk a lot about what i'm doing i just skimmed it really fast so like take off the last thing skip your closing tags remove double quotes you don't need double quotes i don't have any anyway so let's go into number two because things are going to get more interesting um anyway so number two okay we're on number two oh i kept my css from the last one that's interesting um so let's change my body's background and i'm gonna write my css in a more readable way and again i'm not gonna i'm gonna try and get a good score but i'm not gonna go insane um that's not the right one oh it is i didn't have a hashtag and then my divs i guess i'll do paragraphs now for this i'm wondering if i want four paragraphs or if i want something else um i also don't need my margin of zero anymore [Music] because again it's about optimizing so say actually i'll show you something interesting if i do div if i have a div i have to close my div you don't have a choice um because then i could have another dip here div closed div so let's just give our divs so we can see them and this is where this is why i wanted to do this because this is where you start learning some stuff about how html and css work uh this should be a closing div um so if i just do i'll do a margin alright let's just do width i don't know it looks like 25 pixels or so height 25 pixels and we'll give it a background background of this one um and then are there a bit bigger than that 50. that looks about 50. um so we do that and then just for now so we can see it a little better i'll give him a margin um so here i can't actually remove this closing div tag because if i do that this div is now inside of that one because we always do that right we nest divs inside of dibs inside of divs but an interesting thing here is if i make these paragraphs i could put four paragraphs i was writing emmett there he may not do it no you have to actually write it p um if i do it with paragraphs i think yeah there we go you don't need closing tags on paragraphs um and the reason you don't need i can't shift tab this that's annoying um the reason you don't need a closing tag on a paragraph is because the browser's smart and it knows that if it has a you can't put a paragraph inside a paragraph so if it sees a paragraph coming inside a paragraph it's automatically going to close it after this one before it opens a new paragraph up this is the same with list items if you have a list with a whole bunch of list items in it you don't actually need to put your closing tag there and if we look i don't know can i i don't think i can inspect here but if you did this on your own and you looked in the dom uh you do inspect element you look that it will be there you'll see closing paragraph tags because when the browser renders it it's putting them for you same with list items and there must be other ones too um maybe in the chat somebody could help out and remind me of some of the other ones that do it [Music] the chat overlay doesn't like html snippets oh i think it's because i can actually customize the chat overlay a little bit with um html and css it's a little bit like pug i mean this is this isn't actually let's just i'm going to copy this let's go over to codepen just really fast just to show you this would work here so it's working here even though i haven't closed anything and if i do an inspect element you can see that it's p and then there's a closing p it's closing them for me because it the browser again when the browser renders it it's going oh they made a mistake i'm going to fix that mistake while i render the page because you're not allowed putting paragraphs inside paragraphs and even oh this last one has the style tag inside of it because that one i didn't close and i guess style's probably an inline element i guess i don't know or it's a display none so it just it put that inside my paragraph which is fine um and then you can see that that's all coming in and then there's some scripts and stuff but um so that does work you can do something like that so and it's the same with list items and there must be other some other elements too that do the same thing that will automate the browser will close them if you don't close them um so now i the tricky part here isn't getting them to be the right to make the squares it's to get them positioned properly um because i need to select them all individually to be able to do that so obviously like the simple ways class or i wouldn't do a class i guess you'd want to do an id because that's a lot less characters idaho i forgot a space um so ids are shorter than classes and since they need to be separate anyway i would do that um margin i don't need those i all need so then i should be able to do something like a or actually should we do position position absolute and then a is top 50 left 50. oh i forgot something i can do to optimize that's too much 40 40. i'll show you the next thing you can do and i think the next one is only a is mine too low or too high too high no mine's too low whoops when they're all the same color it's hard to tell mine is so it's like this is where it's a little annoying when you're trying to match things exactly 34. was i right it 35 no 34 looks right and then i guess this would be the same no the left is bigger okay i'll do that in a second i can't see what i'm doing so let's just do c uh b i guess b would be top 34 pixels and then the right would be i don't know we'll try 50. and put this at 50 just for now um then the next one that's b c would be bottom 34 pixels left 50 pixels and maybe i could optimize this with my selectors as well d bottom 34 but this is like right right 50 pixels and this is where you start like oh we nailed it i think we nailed it um this is where you start learning like a lot you know here i'm playing with positioning a lot but you only have to do like a top left because that's where i want that one and then top right because i'm worried about the right side of the page and so on and so forth um so i nailed it so let's hit submit and see hopefully i get 100 match i did now 353 characters is a lot they 77. wow he's the only one who's got 77 characters bravo um and this is where honestly don't like get friends on here i don't have any but if you have your friends and then you're just competing against them it might be a little bit more fun bite lin what happens if you style the style element you can do it uh one second style display block and you can see the content inside of it i found out this because i did a um [Music] star so select everything and it was um all onset so it removes the all the styling on everything and it but it me it puts everything to their default display value but the default display value for everything is um inline so everything becomes inline including your um your style tag if you have an inline style um so let's optimize this one a little bit now one thing i'm not sure if i could do or not um and actually i mean the easiest thing if you just want to minify is to like i don't think i'm going to minify things i'll run it through a minifier after so i don't have to uh here does this take a character off it does so i could do this right i could even minify it even more than i did i'm not again i'm not going to go too crazy um position i'm wondering if there's anything else i could do here to shorten it but i don't think so because what i was thinking is if i had like a a comma b and i put like they both have the same top but i don't is that less characters so if i did a comma b i ended top 34 pixels so that's only one time that it's in there is that shorter so that's one two three do you need to put a space here can i stick them together okay let's just take this off i'm gonna do a cut how many characters am i at three okay let's just say we're at 346. so if i put this here and i delete this and i delete this oh it is shorter so then could i do a c comma d and then i could do a bottom of 34 pixels right and then we could say that uh a a and c have a a and c have a left of 50 pixels and then my b and d have a right of 50 pixels that's a lot shorter cool i'm also doing it on one line but yeah that that's you know that's good i guess oh i need a space there though do i no why is the coloring off it looks okay do i need a space oh it's just because the line was selected um and again i could put everything there let's just you know but i think that's a nice little optimization that we could make that's not like over the top going crazy with it um i'm gonna do this one and then i think i'll jump into the newest challenges because this one looks interesting uh so let's just start with one paragraph if we need to have a style tag right we can't get rid of that um and then if i said body background is that i think i need two divs for this right i need a i need a yellow div like this yellow one will be one div which can then have a and then no i can't do a round outline or because i'm gonna have one that's like a square for sure and i don't know if i can do with this with one or two because there's no con i was going to say padding but padding won't work i might need two divs or two paragraphs uh actually because these are nested inside each other i might have to use dibs for this whole thing because i don't want to use positioning i think that's going to be longer um i know there is a way to no i think an id is faster because i did see in their tips here one thing that they did recommend um you can shorten selectors with made up oh that would be shorter a okay i mean that's we could do that that's saving from having an id so if you did that so if i did a i just want to see if this even works so i could do div a is that shorter though if it's a div a it's shorter if it's paragraphs for sure but on a div it's not shorter because you have to do one two three four or four five six right one two three four five six which becomes so then to select it we have seven you need that and then an a and i probably need to have if i did div it's like that's getting longer than just doing an id selector i wouldn't be yeah sorry i would just have it like this then one two three four five six this ends up being the same length so if it's a div i don't think i'm actually saving if you don't know about the brackets bra if you put brackets like that it's a um attribute selector like just for fun here let's just put two dibs uh div close div and then div close div and then here we'll do div is height 50 pixels width 50 background is red so we can see it and a margin of 100 pixels uh 25 pixels um so if you have a div and then say here i do class is equal to a obviously i can select this class like i can do dot a and say that the background is yellow and it will switch i could also come on this and actually just say class and it's going to select it because if it's in the square brackets it's going i'm looking for an attribute of whatever i put in here so here i'm looking for an attribute of class and you can even be more specific i can do class is equal to and then put a but we never need to do that right that's a waste of time because we have a class selector um and you can do kind of cool stuff like this like if i do a b c and then i come on this i could do i think it's this i always figure if it's before or after the equal sign there we go um so even though the class is abc this is looking for a class that starts with a um so if i do a c here it breaks it because that's not starting with an a or i could even do like an a d and it's still going to select it whereas if i put here class equals ac so it's selecting one that starts with a b and not one that starts with ac if i switch that down to just a it selects both of them because they're both starting with an a so this could be useful if depending on situations i've used it um a bit and yeah especially if you don't have access to the html if you're working on wordpress stuff or whatever like any cms this could be really useful or even you know you're doing something in squarespace or shopify or something um things like this can help you get more specific if you need to um but that's a little bit off topic whoops i went back all right let's see if anybody has any ideas for me in the chat ragnar use a border and add padding and a bg limited to the content box i'm just thinking like wouldn't i need something for this a border for uh sorry something for this then another div for this and then a border for this one no border for the border for the yellow outer circle a few a few new follows thank you guys rush ram m mim and blade kodami as well as how to fps um wouldn't you make a rectangle box with a circle inside with a circle inside with a circle inside yeah i just the less elements i can have my higher my score so that's why i'm thinking of using same with jonah joe's suggesting a clip path so we'll see if i can do it rootdish did it with 446 characters let's see if we can beat that the three circle how can three circles be an element border image maybe i'm scared of border images yellow bg padding and border oh that's right oh guys if i just have to give it a whip no no no no no no that doesn't work i can't have a different background color and padding color oh i can do multiple borders thank you silver mango i told you i'm tired this morning i need more coffee okay no wait you can't do multiple borders you can do multiple shadows i can do this with shadows can i do it with shadows white lint saying shadows i just thought we all thought of it at the same time we can do this with shadows i'll go rhythmics i probably said your name wrong sorry about that good for your train ride good happy you can spend it with me i'm looking forward to css demystified too i'm really looking forward to it now that i've been doing so much work on it i'm excited for it to be out so i can relax a little bit i'm also excited for it i love this with the chat going guys this is so much fun all the different ideas blade commandy is saying that i could use two divs i i could definitely do this with if i was doing this i would use a pseudo element if on my own but again i'm just trying to cut down the code let's i'm just going to do i'm going to do a div i uh i'm so used to emmit div with a paragraph inside of it and what i'm going to do is let's select my paragraph whoops um i'm just using paragraph because it's shorter right um paragraph is going to have this color on it whoops you need to say background background of that width i don't know 30 pixels height 30 pixels and a border radius of 50 uh 50 yeah oh i forgot to do this on my last one too there is a thing here where you don't actually have to put pixels um if you're just write 30 and 30 it calculates it as pixels so that's one way you can optimize in here too i found it out by accident just because i wrote a number and it worked before i was able to put pixels this would not work i don't think i've never tried but i'm pretty sure if you don't put pixels normal browsers won't render it but you can try it if you want it sounds a little dangerous to me um i need to get in the middle and i'm wondering if the easiest thing is to display grid and place items center but then i also need a min height or just a height i guess height of a hundred percent oh it's not even in the middle i don't think this is the best way but if ever you're doing these challenges the best thing to do is get it like actually get us find a solution first even if it's far from optimized and then worry about optimizing it later mine's too high 95. that looks pretty close i think my circles i'm off by like one pixel now i'm off the other way there we go that looks pretty good to me okay so like i don't think this is the least like the best way to a position absolute might be a better way to actually get in the middle i'm not sure but then what i can do on this is i can do a box shadow of zero offset zero offset zero uh it looks pretty big 75 pixels i'm gonna put 75 pixels zero oh wait 0.75 0 75 pixels boom uh except that's way too big 50. and we need it to be this color and then i can just do a comma and put another shadow on it uh so my second shadow will be that but it's going to come with this color i'm going to do a different color for now because i can't see it if not we'll do red um except i did them in the wrong order so this one 150 no is there no comma with shadows it has to be a comma why is that not oh hashtag red uh oh i did them in the right order okay so then it's this one here we go um so that looks is that the right size i think that's actually the right size cool so the only thing obviously i don't want that to be red i want that to be this color and then i want to select my div width uh we'll try naya eighty percent margin zero auto hmm background oh no okay i know why uh well maybe background is this color this isn't gonna work is it text aligned center no darn okay that just broke everything i was trying to do i should have started with this div before i started worrying about what's inside of it uh what if i just did margin zero auto okay there we go um height ah this is gonna screw everything up again that's okay height oh wait no instead of height i'm gonna use padding padding of 50 pixels i might even be able to just use padding period and not use this no i need that i need that this you can take that off right because if i have padding i'm gonna have to play with my width then padding okay let's do 40 pixels top and bottom and like 20 pixels left and right or is it the other way around that i want or do i not i was hoping my padding on the left would just push that circle over okay we'll put my margin back here margin zero auto um that's just not good okay that's mine that's theirs you can hear my little one in the background sorry about that he's home with me today um hmm [Music] oh i could just make this smaller then right okay good the reason i wanted to do this with padding instead of giving it an actual height there's this taller i was going the wrong way um the reason i didn't want to use an actual height is just because it's more characters actually there the height is good it's just the width is wrong now that's mine that's theirs no yeah mine there's so it's too wide so now i can just bring this number down 90 1988 oh was that wrong 92 ah there we go look at that let's go for 100 doesn't want to give me a score oh here we go nice good um but anyway let's go and try out the latest battle um because there's some fun there's three or six anyway this one looks like fun so i want to try this one so this is the latest battle um i don't know how good i'm gonna do on it akshay welcome hi thanks for coming chin chang four five seven we have the creator krishna hope i said your name right css battle creator here that's amazing thank you for joining me that's so much fun got a posture check thank you silverman thank you for coming in here thank you for creating this it's such a fun project i'm sorry that i'm shaking so much it's such a fun project and i appreciate you putting everything you did here to put it together um so yeah thank you for that and thank you for coming to join us that's super fun that you're here hopefully i'm not doing too bad of a job with it you might you're probably watching me do some of this stuff and being like oh if only he knew if only he knew thank you for the follow blowy though all right so let's see what we can do with this one and what can we do with this one looking at it quickly we need to have two elements right we need to have the yellow box and we need to have a blue box and there's that we have four colors here so they're giving us the color that's gonna be this one now might we could do this with a gr what's the type of gradient i think you can do this with a conic gradient so one one way we could do it is have a div that's a circle or maybe a paragraph a paragraph or a div a div because anyway we can have a circle we can have an element that's a circle and then have a conic gradient i think that would give us this i haven't done a lot of work with conic gradients but i think we could do that type of thing but again gradients seem to be a lot of work are not a lot of work they end up resulting in lots of lines of code so i'm wondering if oh we have the dimensions there that i never saw before that makes it easier oh you can also turn off the slide to compare cool i should have explored this a little bit more so if i look at this the other thing i'm thinking is we might be able to do it with a blend mode if i just have two things that are overlapping each other if i did it with the blend mode i think it'd be easier to have a div with another element inside of it so if i did it did with a paragraph inside and then i wouldn't need this closing div here either um but i think it'd be easier because then this i could position within the circle a lot easier than if it was two separate elements that i was then trying to get to overlap each other [Music] so we don't need this closing style let's start with the easy wins which is a body and set the background you have to write background to set a background color um and then we'll take that div and the advantage here of using a given a paragraph is if i put a background color on it it's only going to do the div and it's not going to touch the paragraph so we have a win there too i guess um we need a border radius of 50 now what i don't know with all of this is if it's easier like to get something in the middle i don't know what the way would do with the least amount of code is like okay i you know what i think i'm gonna do that uh but then just change my margin top i think i was wasting code before by trying to get like how do it the without like say margin top is like i don't know 100 oh 40. i am too high still [Music] so like i think this like i wouldn't want to do this on an actual production site am i just i should i just go 50. um i wouldn't want to do this on a production site of using a margin like this but for a challenge like this it makes more sense so like right away my circle's perfect um instead of going on my body and having to do display grid like i did last time just so i could try and center something and then it wasn't centered vertically anyway so i was probably wasting a lot of lines of code to do that [Music] um and then if i did my paragraph and then did width of 50 height of and this is where we also take advantage of overflow right uh 150 pixels background of this one i'm gonna try it first i see that there's some suggestions coming in the chat but i'm gonna try it on my own um why not oh no okay this is annoying i was gonna do with a margin top um but i can't do with a margin top right now because there's a way that maybe i could do it but i can't use margin top because it's collapsing margins now um because yeah this margin is collapsing into the margin of my div because that's the parent um and then this happens i'm not going to go deep into collapsing margins right now i have a youtube video that talks about them if you're interested in that because it's it's a nightmare to explain it um actually i have like a full multiple lessons on css demystified where i'm talking about it too just to really hammer home how it works so here height instead of height if i did padding maybe i could do width like padding for the whole thing too um but padding of maybe 75 and then i have no width on it doesn't work oh because the width is going to 100 uh so if i leave that and my padding is 75 top and bottom 0 left and right because it's uh that doesn't work at all i need to have a height i don't want to declare box sizing though okay wait i mean there's no way this is the optimized way to do it but it's still not even in the right spot margin oh that's annoying paragraphs come with margins on them there is a downside of using paragraphs after all so would that be better if it was a div then maybe at least it's positioned properly height this is where again go for your easy wins try and just like get it to be where you like match your thing as much as possible and then see if you can optimize it and start finding some of the ways that you can optimize it so okay we're positioned exactly right now like it's right where we need it to be you take the px off um so it's positioned exactly where i want it to be the only issue is now getting that color and i'm pretty sure i just don't know which one to use mode it's not going to be multiply darkens so it's not going to multiply it's also not going to be screen because screen lightens uh i'm hoping it's overlay cause if it's not overlay [Music] is that it it looks it's not the same color let's see if it gives it to me if i submit this it's definitely not the same color [Music] but it gave me a hundred percent match so i'm happy what if i tick off this i just want to see if it still gives me a 100 match no okay it didn't give it to me then it makes sense so i think my colors are whoops don't want to save that um i think my wondering if another like color wouldn't work i don't screen overlay lighten no uh what am i thinking of then there's an overlay blend modes [Music] overlay hard light defon no i just want a list of my blend modes soft light that's the one i'm thinking of i don't know if it's gonna be the same soft is it like this soft light how do you do soft light no it's not the right color either it's because it has to be one of these contrast ones it's like did i just not notice that it changed before when i did that it's like again if you want to really like css mini fire you could always just take your stuff and bring it into something like this copy if you're after a high score right so then i can paste that and then we were at 277 i'm now down to 196 so like you know if you're really after optimizing as much as possible that's one way you can do it all right let's go black lives matter i don't know if this one looks hard i'm just thinking we need one two three four five six seven elements to do it and then a lot of it's about positioning and playing with border radiuses for the bottom part right and when they all have to be i don't want to use divs in this case do i see now where i'm what i'm not sure about with something like this is the easiest way to do it i'm just wondering positioning on this one because like i almost feel like this div here like the one that would be this one could be the parent and everything's position absolute inside of it so just for fun if i only have one div and i do background of that and i give it a width of 30 and a height of 100 i'm not i don't have a selector div uh 50. so if i did something like that and then order radius so where to radius you can do the shorthand starts i think top left so 0 0 10 10 can i do it with no i have to do pixels here there you go that doesn't look bad right is like the base part of my hand there um and again like i don't know is the easiest way and this is where i wouldn't do this if it was margin 200 or 400 pixels 300 pixels tall 150 space auto 138 and the height is way too much this is probably the best thing to do is leave your mouse over it so you can see what's happening and just make your updates it's too wide too oh i can't center it perfectly i don't think i don't think is it centered on the screen i'm not sure 25 oh maybe that's not bad i'm gonna leave it there for now this is one uh see i don't think i can i don't think it's perfectly centered okay i'm gonna leave it like that for now um and my idea here is that i should be able i should be able do you guys find the colors are different they look the same for me so this is where i might take advantage of one two three four five six so if i do p a p b and this is again this is where we're doing things that you wouldn't actually see in production p d p [Music] a b c d e one two three four five and e f p f um and then what we could do is something with an attribute of a actually i want do i need them to be paragraphs or could they just all be dibs well that would be more characters so if i just do p background is do i have it still yeah if i do a height 100 pixels so all my paragraphs are also going to be a position absolute which means this one i will want position relative on and then a height of 100 [Music] width of 50. okay so it's working uh width of 20 pixels sure height of 30 and then bottom is going to be bottom is going to be oh what's my actual height my actual height is 40. so 45 40. ah it's these damn margins again on the so whatever margin of zero bottom 45. so i'm just doing like if i look here i see my gap here so i know my height is 40 pixels so i'm saying my bottom should be up by 40 and then i want that gap that's here so i'm saying 40 and a little bit more um 45 and i need a border radius of 150 it has to like 10 it doesn't matter then 99 viewport width it's if you want something to be pill shaped um i got this trick from csspoo.com css trick csspooh.com it's a weird name but it's full of really cool uh css tricks so you can check it out this is by jens tornell so yeah i've talked about it a bit on on twitter as well but if ever you want some cool tricks and stuff he explains it a bit more why it works there if you're curious i usually do 100 viewport width but i'm trying to save a character um height 40. not sure i guess 40 45 or 50 45 looks bang on so that's not bad so then i mean a lot this is my a my b my c [Music] and my d are gonna all have super similar stuff there um so then if i just take my b i could say that the left is and now i'm looking at this is a width of 20. so my left would be 25 i guess i broke this why'd that break do i need space oh i put a period there we go so by doing left 25 i know my gap between them right so like here's 20 so i'm just moving it over by five more pixels in that and then obviously the height i guess height would be i did 45 55. we'll stick with that for now i'm just going to copy this paste paste this one the height actually is probably the same so this is my c and this will be my d do i have do i need f oh yeah i do okay so 25 so this one the left will be 45 50. and then the last one d will be 50 60 5 70. oh maybe my sizes are off 75 oh no maybe i'm okay or maybe i have to play with the overall i think i think it's just the bottom part that's not big enough um and then the height obviously is changed to height 55 height 45 35. ah awesome that's pretty good let me check the chat i haven't been here for a little while now bitelin why don't we just make an svg yeah if this is a real thing i'm definitely making an svg oh that's a good point uh walton's saying i could save some stuff here because i know the width is 20 i could do a border radius of 10 it's 10 pixels ah i need the px then i can't it's funny how some things will accept no unit and some you need a unit on it what if i did 10 no because then 100 messes it up percentages don't work on border radius so before i had 10 well i could do 10 viewport width then that's the same as what i had before i guess i can't save it's a good idea but for some for whatever reason i can't remove the pixels screen cap and add the image tag bytes already tried bitlin already tried that that's looking pretty good though um i do need to my width here 25 but again now it's gonna actually does that i feel like i'm off by like a hair maybe i'm okay though i'm gonna leave it like that and we'll hope for the best uh d so now my e will do the thumb so the thumb actually i'm gonna do my e here too e but the reason i'm doing like normally i need to have the same border radius and i need actually the border i need the border radius i need the width and i don't feel like like if not i'm repeating these anyway down here or i'd have to make another new selector so just by overwriting them i'm saving on characters let me just do one thing here just so it's higher up for you guys um so now my thumb left negative 10. bottom 10. this is transform i might transform rotate i don't think there's a better way to do this right 60 degree height 100 70 60. we'll try that and this one's easy just put a border three picks uh can i do three probably not i probably need to have i probably need that then it's gonna be more like five probably um normally if i was actually doing something like this i would change the transform origin just to make it a lot easier to get it positioned where i want but because i'm trying to save characters the bottom would be zero [Music] actually it looks pretty good actually maybe my 60 was okay [Music] it's definitely not the same though you can see the whole thing is shifting a little bit i have a feeling my overall size is wrong theirs is longer 65 maybe and my degree maybe no i think if i fix the size of my hand i might solve some of my issues here that looks pretty good now it's more like the positioning whoops uh negative five okay let's get the bottom thing and then i'll i'll try to refine this a little bit so the bottom one e f uh with actually f so now i don't want it to be position i'm wondering if i should use something other than a paragraph it's just i want this background on it oh no maybe i'm okay and i didn't include it in here okay i think i'm okay uh width of 50 background red height 150 percent does this work margin zero auto whoops margin zero auto no because it's positioned absolute um normally if i was doing this i would do a left 50 and then a transform translate x negative 50 and then i know it's right in the middle um which would be perfect but i think just because i'm trying to save on the amount of code i'm writing i'm because actually because i know the exact size of this uh camera width is 100 80 90. mine let me just turn the red box off for a second that's mine that's theirs mine's too narrow now that's oh look my widths actually it's perfect with 100 is exactly what i want now i have to fix the positioning of all my fingers but that's good i got the bottom part good so let's fix this part now with the red box um so because i know the width of this is 50 so the width of it is 50 pixels so actually i can save by just doing 50 it's going to be the same thing then so it's 50 pixels wide so my left should be 25 pixels and that will be dead right in the center um we want to take u background should be that color now i'm wondering would it be better to switch my e and my f f and e uh screwing things up because the reason i'm i just i'm thinking if i switch or even what if i just move this around then like that there we go um that way i don't have to try and get it underneath the thumb just like the natural positioning and layering of things um is putting the f underneath my e so i don't have to try and pull it forward if that makes sense um so the height here because then here too i don't need like a margin top i can just play with my height to try and get the right height on it needs to be a little bit more i can also like i'm doing this but it's probably percent is going to be longer because i have to put that so what if i just did 200 pixels 100 pixels 75 pixels and let's leave it there and now i can just play with my numbers 80 85 right on and then i need my border radius border radius of 10 10 px that looks right on perfect i just need most fingers to be positioned a little bit better that's mine that's theirs mine there's mine there's why is my first finger off is that the only thing in that playlist let's try this um left okay my first one a oh okay left zero do i need to do a left shouldn't it be lining up right with that wait zero that's mine that's oh theirs is moved over a little bit that's why there we go okay that's why the first one's already at a five okay that makes more sense so i just have to modify my numbers a little bit here i just have to move everything over by five extra left 30 80 55. there we go now we just need look at that we're almost there i just need to get my thumb so my thumb my thumb width uh my thumb is this one i think this is probably it's just this is so frustrating silver mango i don't know when to use this i'm gonna use it now but your mom is asking you to sleep all right awesome no problem but i'll see you next time thanks for for hanging out let me just check the chat now that that caught my attention people really trying to get those images in there thank you for the follow fola from me we're over 80 viewers this is a all-time high by a long shot thank you guys so much for for all coming and hanging out with me this is crazy thank you all very much for coming and spending some time don't be shy in the chat if you have any suggestions or or anything um what time is it 10 40. i think this is the last one we do i might look at another one but i want to be off i want to get my kid off the tv i need to go spend some time with him um now what's wrong with the position the size is perfect it's just like off by a pixel is it just here like left 20 would work no that's the wrong one height is okay bottom like if i did a bottom zero is that just now it's even worse but like why do i need something like negative that's good and then my left is gonna be two seriously can i do an 8.5 mine is higher than theirs mine theirs now it's mine is higher now like this is ridiculous i must have done something here that's like i can't get it right on yeah mine theirs okay whatever let's submit this and see what it gives me i didn't have the confetti of course i did get a hundred oh there we go awesome super 100 match how many characters what's the leaderboard on this one this is going to depress me 250 265 and i had 826. and just for fun what if i just took this and minimized it just to see copy css minify whoops css minifi minify just for fun to see like how many charac 585 what's my score on that so like if i go to my the leaderboard they have half as many characters less than half as many characters as i do right oh no yeah five yeah less than half actually this is one that can definitely be like people could target this though look like 10th place is almost 100 characters more than first so like you could this is one of those ones then that like maybe the leaderboard is actually achievable um i mean here maybe there's a way i could optimize something here a little bit i think position relative like actually here did i i didn't do a position absolute on this f did i do it on all my divs all my paragraphs i mean paragraph all of them have it i wanted like here i did this one as a div on purpose because i wanted all of these to be nested inside of it maybe there's a way that you can do it without doing that how can you do that with 256 lines blade you can't see how other people did it yeah because then everybody on the leaderboard would all have the same score because you'd just be copying other people so let's go see at the tips and tricks really fast oh i used position fixed beats position absolute mostly i can see that just because fixed is shorter than absolute um by a little bit but i have a feeling it wouldn't oh you know what you could do on a lot of these guys instead of incl like here if i didn't have a div is this gonna work if i did that but then i made this my body and then i made this my html cool so you could do it without actually having the dip so you're using your body as your main container and then you're giving the background color through the html element so that's another way you could optimize stuff cool that's super happy don't do that on an actual site oh and you also could do this apparently bg color equals red text equals green so could i optimize through that then vg color instead of writing background here whatever it's a few little things you can do along the way all right so yeah let's try this ice cream because i don't think it's gonna be too complicated um so let's start with so i guess here let's do my html we'll see if we can cheat a little with that background is there and then my body will give that this one uh background is that one and okay that one's gonna have to have multiple lines code so um with or like here instead of width could i just do margin to get the right size margin 100 100 space 50. the other way around 50 100 150 right like i could sort of cheat a little bit here the top is perfect the side is a little bit off i think 52 oh wait 52 stop and bottom 50 is okay 50 55 is that too narrow now maybe that's perfect that's it's too small anyway you could like i'm not actually setting a width i'm just using my margins to get it right in the middle of the page mine's too big still i think this is hard to know if it's like lining up perfectly maybe i'm okay i'll try 52 and we'll go from there um and now the fun one is the border radius on this so border radius top left is going to be 100 i can do 99 99 viewport width 99 oh yeah uh i have to do all four if i do this because you can do two i can do 10 pixels let's say you get cool shapes like this so it's doing top left and bottom right are at 99 and the top right and the bottom left are at 10 pixels so you can you can come up with some fun shape support already different border radii but for something like this i think i need to do it like that then i need say 25 pixels 25 px 25 px that's way too small 100 px is way too big what oh no that's that's better maybe 150 even and so my margin top is good my margin bottom is gonna have to be a lot bigger there we go so it looks maybe it was actually better at 150. wider smaller i was right 150 i think yeah i was my border radius on the bottom looks like it's a little bit off border radius one needs to be a little bit more how does that look it's still a little bit off eh 160 i guess [Music] that looks better okay um now for the stick and this is the fun part do i do it so i can do this that's my body so i haven't even used anything yet now [Music] i have a few ideas on how i can do everything else i need a stick though and i'm worried now that i did that on my body let's just try this for a second then div um background is that because i did it on my body maybe that was about idiot width is i don't know let's just try 50 pixels the height is 100 pixels just so i have something to work with um margin top darn can i overflow outside the body this is where you start learning stuff about css can i can i overflow outside my body um [Music] yes you can okay uh so i think i'm gonna do it like this then i'll just position absolute on it or they said position fixed you save you save yourself some line right fixed it's shorter than writing absolute so top 200 is perfect because my height it just happens to be perfect i got lucky that's why that works uh left is okay oh okay my left my middle would be so it's 400 so the middle is 200 my width is 25 so i want to do 200 divided by 2 is 100 but no i want 200. 200 minus 25 minus one so 175 wouldn't be right 185.5 yeah i guess but my width i think is off by a little so that's gonna have to be adjusted the height is obviously way off uh height is like 25 50. um so now i have two [Music] i don't want to do a border radius on all four sides i'm gonna do that for now and we'll see if we can optimize this i'm going a lot longer on this stream than i was planning let's just do this um so put that there except then it's gonna be zero zero and then like 10 pixels 10 pixels something like that that's even too much not enough maybe that's good is it theirs is a little bit wider than mine isn't it so maybe it was 30 but then i need to adjust this there we go okay but my number was way off before then maybe um and then i think we're the easiest thing here instead of adding another element to do a box shadow and i can do an inset 0 10 pixels and make it this color ten pixels zero zero zero zero zero why doesn't that work what that works inside zero there i want no blur no red i chose the wrong color that's why cool that was fun i like that one and again i could optimize that and stuff but that was just fun to put together um and maybe there's a better way to do that but i do think the box shadow's probably the best way to get that instead of adding a new div and then trying to get the div in the right place and then giving it its own color and all of that um so i think that's probably a right the right way to attack that i'm wondering if i could so that works oh instead of a box shadow yeah would that be shorter that's a good point i'm doing the box shadow but we could just do border that's 354 border top thank you for the suggestion morpheus morphe-ish uh border top of 10 pixels solid and the color box top order uh the height here now is going to have to be height 40. that's a little bit shorter okay that may that works better than the box shadow then and i don't need this either and i don't need this and then i can optimize everything i don't need that okay a few little a few little things along the way to improve my score just a little bit thank you for that suggestion more fish thank you for the follow dead mechanics let me just see the chat here for a minute a few other follows thanks px0 and james coyle95 [Music] i don't think i could use the head to do this one could i instead of a div would that work no why not oh and then i'd have to do display block right did that save me anything what was my other one that ends up being longer or well we can save that but i guess because i had to add this line it ends up being longer because this is just even here i don't need the closing div i can just do it like that we're down even even more translate instead of top and left would be shorter too would it because tran if i did a translate trans form how what am i transforming the same what what numbers did i have translate transform uh 200 [Music] comma 185 [Music] translate huh i mucked something up that's interesting maybe we could do it shorter then 40 and what would this one become oh yeah we saved we saved quite a lot on that one and then you don't even need the position to fix cool so if you like that i hope maybe you learned a couple things along the way there and saw some kind of interesting things that we can do with html and css and if you did like this i'd encourage you to go and follow me over on twitch where i live stream twice a week so if you like that type of thing where i'm diving into just exploring css having fun with it and all of that it's a little bit more relaxed than the type of stuff i do here that's more focused on single topics uh they're usually between one and three hours long each stream so it's you know and i get to interact with the chat a lot more and stuff like that so the link to my twitch is down below you can check that out give me a follow over there a lot of what i'm going to be doing over on the twitch channel is sort of bigger projects and other things like that but every now and then it's fun to take a detour and do something like this so thank you very much for watching a really big thank you to all my patrons for their support every single month you guys are absolutely amazing 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: 186,590

Keywords: Kevin Powell, tutorial, html, css

Id: ECsvqHoFZm8

Length: 78min 36sec (4716 seconds)

Published: Wed Oct 21 2020