How to make shapes with CSS

hi and welcome in this video we're gonna be looking at how we can create different shapes using CSS we're gonna look at how we can make anything from a little simple circle to this section here where we get a little triangle sort of sticking down like that as well as changing the shape of my image here and doing this big different section here when I look at a whole bunch of different ways we can create these types of shapes okay so I'm not gonna focus on the HTML of this one too much but I'm just gonna look in my section one here of my h1 and my one icon so the one icon is what I'm a focusing on there on the section two will be looking at the image as well as doing something with our whole section two in the section three so therefore sort of decoration where we use it so we can actually see the the shape difference going on with those ones so let's get started on this and we're gonna start really nice and simple with my one icon so the one icon that I did this is just really basic stuff on creating shapes so let's do one icon and let's give it a background of our GBA and we'll do zero zero zero 0.3 just so we have something that we can sort of see great then let's give this a width and a height because for this I think that makes sense to do and there we go we got a nice little square there we can do a margin:0 auto and that will put it right in the middle and i can do on this a border radius of 50% so if you're not familiar with the border radius to make circles it works really well just make sure you're working with a complete box because if you're working with other things that makes ovals that sometimes don't look really terrible so just putting a border radius on a perfect square gives me a nice little circle like that now do you actually get my smiley face dead set in the middle here I used to always do a display flex on there and use my justified content and align items I just learned a really nice trick the other day which is display grid and place I Center and oh my goodness it goes in the middle and what place items is doing is it's a shorthand property for justify items and a line item so it's doing a justify item Center and a line items Center and it's putting it right down in the middle and I can use that with my nice little display grid they're so nice now browser support very questionable I don't know if I'd want to be using this in the real world but really nice and cool and just as a little side note you can learn about little things like that in my new newsletter I've just I created one there's more information of that at the in the description below but also I'm gonna talk about it a little bit at the end of this video so let's bring up the font size to like 2m just make it a little bit bigger and this is kind of fun to do also if you have a background that's already like an RGBA and you make the color the same rgba it just be the same thing in a bit darker because here it's just gonna be like 0.6 now right so it's like layered opacity on top of each other so a nice little way to do that so that one's the really basic one and i want to jump down quickly to section 2 because i don't want to spend too much time i think the more interesting thing there was actually the this part of it than anything else and so i want to focus now on my or not not there yet actually let's jump up creating that little arrow shape now there's other ways of doing this this isn't the only way but i'm gonna be looking at using clip path and some other stuff to do some more interesting stuff down in section 2 so here to make that little arrow thing I'm gonna do it with pseudo elements you don't know a lot about pseudo elements please check out my other series where I drove more into those there's should be a card popping up somewhere for that to write about now I have one before so I want to select both my before and after and I want to give them a position:absolute let's give them their content of nothing whoops find the right keys there there we go I give it a width of like 200 maybe 150 pixels and a of 150 pixels and I'm gonna go to background of red just so we can see what we're actually dealing with right now so there's my two boxes that I've just made um so let's move them down bottom of zero and I think that's it for the moment and because what I want to do is come on to each one separately now so one will start with my before and for this one I'm gonna move it to the right by 50% so it should move on over a little bit and then I'm gonna do a nice little transform and we'll do a skew on it now excuse it weird property if you're not sure what it is let's actually hide my after we're just gonna do with one now so we're gonna see what one square is doing when I skew this so I'm gonna ask you of 20 degrees and you can see it just sort of like okay it's gonna take it and just sort of skew it I don't really know in other word so it's pulling the top one way in the bottom the other way and the bigger the number here the more it gets skewed whoops we can't do a 90 degree because it's gonna disappear for say 50 it gets pulled and pulled 90 degrees it's just it's pretty much laying flat and it doesn't really work like say we did 80 degrees it's starting to get like that's a 90 degrees it's it's skewed all the way over and we can't see it so I don't want it to be that extreme though so let's try like 20 but I don't want to just do 20 degrees like that I'm gonna do a 0 comma 20 and you can see what that's doing is it's actually sort of twisting it instead of skewing it which is exactly what I want because I want it sticking out at the bottom now the only problem is I can't see it so I'm also gonna fit is that said index doesn't have tips doesn't have to be that big but let's put 100 and so you can see it's sticking out a little bit here and I move my bottom down maybe just a bit I don't know whoops negative 1 ma I should say I just want to make sure this isn't sticking out here I want it just to be sort of a clean thing like that so that's great now what I'm going to do is I'm going to bring my after back on here one after and now I want to sort of do the same thing with that one so let's copy that and get my after in here but obviously I don't want my right I'm gonna do this on the left so you can see the dirt on this one you know the two sides are touching they're lining up perfectly by doing that and instead of doing 20 we can doing negative 20 and now it's sticking down it's coordinate actually this can be used for other stuff too it's this nice little chevron shape you can use this pretty much anything or not anything but you can use it for other design elements but all I'm gonna do now is just take my background that I have here and change my red to the same one and look at that we just get a nice little sort of arrow pointy thing instead so that's kind of cool again there's other ways of doing this the nice thing with using before and after to do this is browser support will be super super good and you can use it for different stuff does take a bit on markup but you get there now let's move on to looking at some clip paths because clip paths are really cool browser support is it could be better it's not terrible but it could be better now if you're gonna do a clip path on an image like this it's probably decorational so even if it doesn't really work it's you know some graceful degradation which isn't the end of the world um so I'm gonna start by doing the clip path on my image itself so we can come down here and take a look at two image which is the class I put on my image and I'm gonna give it a clip path now clip paths are kind of weird to work with if you're not used to working with them but I'll show you a really cool tool in a second so for my clip path you there's other things you can do I can just write in circle circle just like that and I get a circle and in here I could write in my radius 50 pixels and it's gonna give it a radius of 50 pixels or I could put you know 25% even and it's gonna deal with 25% of the original image obviously if this is bigger than the original then you get something like that so if you know there's kind of useless so clip paths are kind of cool they're nice for just cropping things down and doing some fun stuff with them a hundred percent will give you you know you're not really gonna see it ninety we're gonna start seeing it come in I would think oh there we go you can see that now it's starting to clip in at fifty percent um so that's a nice fun thing you can do you can also there's other options here and there's a link in the description to something else and I'm gonna look at a fun tool that we can use and we're gonna look at how it actually works I'm gonna be right in polygon which lets you come in with a custom one so when you circle it's obviously in me asset circle and stuff like that and there's other shapes you can do but I want to do one that's my own custom shape so I'm gonna put 0 0 here and just to explain actually before I do that and this is my zero zero point so you're dealing with the x axis X Y X and y axis is X YZ m and so this is my zero zero so this is my first point if I come all the way along here I'm staying on my zero for my Y but my ex is becoming one hundred percent because I'm moving all the way to the end of it then down here would be 100 100 and this one would be zero one hundred so let's set that up just so there's no clipping at all to start with so 0 0 is my first point my second point is 100% 0 my third point is 100% 100% and my last point is 0 100% and I give myself a perfect square so that's kind of cool and now I can play with these numbers I can come this is my zero zero so if I make this a 25 pixels it's gonna move over 25 pixels and if I take this one here 100 pixels it will move down 100 pixels and I start getting an interesting shape coming in there now also I don't need to have necessarily this many points let's come in and add another one let's just say 50% 50% and see what happens and you can see it's adding another point in to the end there so it's going in order so it's always it's the same way I'm taking a clock it's going to start in your top left welcome starts in the middle but it's gonna start top left and work its way around so the 50% 50% got added between this one and the one that I have there so you can start to come in and create your own shapes like that so that's kind of cool I'm gonna put the link to this site down in the description below which is a really nice one because it comes with all the shapes that are already there and you can play around with them and if you get a shape and you want to modify it Hey look at that you can come modify it and it gives you a nice code that you can copy down below so custom polygons you can even just click and add some points in and do anything you want I'll create some crazy shapes and stuff like that or you can use some of the ones they already have and modify them like I mentioned so this is really a nice little tool that you can use and again this link will be in the description below for the purpose of this one I'm just going to do nice and simple where I'm gonna change this this one here actually to 75% and let's put this back to a zero zero just to have sort of a cut off angle on that something a bit more interesting nothing too crazy but it's kind of fun and now the last thing I'm going to do is I'm going to change the angle of the between my two different sections here so let's go in number two now I'd sort of set this up ahead of time but um so I gave it a margin bottom of negative ten I'm gonna take that off for the moment just so we can see why I would have done something like that okay so on my two that's going to we're going to add another clip path in here so we're going to clip the path and once again it's in me a polygon so this is for my entire section so this whole thing with this salmony color here and let's just make this bigger so we can actually see what I'm writing and so let's start again with a zero zero because we don't want anything on the top to change so that will stay 100% zero then ideally we'd be going all the way down so let's say we go like 100% actually let's just make it a square and then we'll play with it because it's a little it's nice to be able to see what we're actually doing right 100% 100% and now I can see my my whole section and it I mix these up flips this one here should be 100 100 and then this one should be a zero 100 there we go okay so that's the normal one now the idea here would be to take this corner and move it up so that's the third point so that's this one here and I'm moving the this access the up and down access is always right here on this one now the tricky part is how do I know how much I want to move it up by so say I came on here and I said let's move this up by like I want to move it up 100 pixels well it's not gonna work because it's not moving it up 100 pixels it's moving it from the top down 100 pixels so that's not working at all and then what happens if I want to take this and your re then I could go and like calculate the whole thing go it's actually like 1 or I don't know how tall this actually is but say 865 pixels let's just see you know that's actually we're getting a little closer but it's guesswork and then what happens if the content in this section changes and then the height of the whole thing changes which is bound to happen or your change your thing and well look at that my line already is going kind of weird the angle of it is changing as I'm moving around which is straight-up awkward so what we could do instead of having to worry about something like that is we could do some fun little stuff with this and so what I'm gonna do is instead of having a set number here or even you know I could put this at like 90% obviously and look it's working but once again the angle of it keeps changing as I'm moving around like this it's a very soft angle and then as I do this it gets to a steeper and steeper angle but what if I don't want that angle to change I want that angle always to be the same so what I'm gonna do here is I'm actually gonna use the nice little calc CSS function and I'm gonna do 100% so it's starting always where we originally had but then we're going to subtract destroyed 20 viewport width and I'm purposely using width here and not height because I want this number to change with the size of my screen so now yes the space is getting bigger but you notice the angle is always staying exactly the same isn't that really cool that the angle is just matching the whole time so that's really fun now the problem with that is I think it's a bit too big so let's bring that down to a ten so there we go we can see that the angle always stays the same it just sort of takes a larger truncated larger screen sizes which makes sense so it's just always gonna stay like that so it works really really well but I have the problem of having this empty space here so I'm going to just come on and that's where having the negative so I'm going to do a margin bottom of negative ten viewport width and that's gonna suck the next section up into that empty space and that's super cool because I know this this number here so this space that's underneath is always ten viewport width so my margin bottom ten viewport width and it just sucks it up and it works perfectly so I think that's really nice and handy for these types of sections where you might want to get these you know it's kind of trendy to have sections that are off by a little bit just be careful again clip paths a browser support I'll put a link to the can I use because it's always updating so I don't want to show something on the screen now it might eventually you know if you find this video in six months it might be different but as of the time of this coming out it's not terrible by any means it's just not amazing one thing I guess that could be good is if the clip path didn't work in this case it doesn't break my layout at all right like the site's still working so again it is disgraceful degradation if a website does come on here the padding might be a little off so it might not be perfect but hey it's not too bad so I hope you liked this video if you did please hit the thumbs up if you have any questions please leave a comment down below and if you curious but the newsletter that I mentioned pretty much what I'm gonna be doing is I've already started it the first issue has gone out it's gonna be a weekly newsletter every Sunday delivered to your inbox I'm looking at things like I did with this place items these sort of obscure little things that I fall upon that aren't big in to make actual videos out of you know something that I can't expand long enough for its this is really cool thing that I want to share with people quickly things that I might include in my videos from time to time but I won't actually build a whole video about so it's sort of like these YouTube videos but my idea with them is that you can read them in an early three minutes so really not long but just to keep you up to date on these cool things that I've been finding and I'll probably also be going into some design decision II stuff as well cuz I do get a lot of questions about how to make designs look nicer so on little tidbits and things that you could try to make your designs look better so a little bit of a combination of the two of them once again any information you might want for that is in the description below thank you so much for watching also thank you so much for my patrons for making this all possible and of course until next time don't forget to make your corner the Internet just a little bit more awesome

Channel: Kevin Powell

Views: 266,751

Keywords: Kevin Powell, tutorial, html, css, css shapes, how to make shapes with css, how to create shapes with css, css only shapes, css clip-path, clip-path, css clip path, how to use pseudo elements, css pseudo element, css pseudo, css pseudo elements, css pseudo selectors, css clipping path, css clipping mask, css shapes tutorial

Id: QY7Rj8aZcZk

Length: 18min 35sec (1115 seconds)

Published: Fri Mar 23 2018