7 CSS Techniques That I Use the MOST!

[Music] what is up everybody gary simon here so today i have seven css techniques that i commonly use now some of these are things that maybe you've already known some are quite simple some are a little bit more advanced with newer properties when it comes to css but basically these are what i found i in creating a new scrimba course that's releasing in a week or two these things are what i found that i use most often alright so hopefully you enjoy this and you find use out of it if you did make sure to subscribe if you haven't yet and let's get started now wait one moment you're about to watch me talk about css now you might not be a very good front-end developer and if that's the case you should definitely check out the front end developer career path at scrimba.com they've recently launched their fronted development career path which is a collection of courses that cover html css javascript react and much much more as you see it's over 75 hours of awesome content there are hundreds of interactive coding challenges and it's all geared towards helping you go from beginner to someone that's hireable as a front-end developer so check out the first link in the description below to get 50 off all right so these are in no particular order um so let's talk about you know the famous meme about centering a div right very simple now these days so i we want to have this div which could have a bunch of child elements inside of it or not and we want it centered vertically and horizontally so two properties is all it takes and so here's our html we have a class apparent and then a div inside and these divs can have other divs inside or other html elements and then with our css we have the parent right here and all we have to do on the parent is specify display grid place content center and there we go it's as simple as that and in many times if you wanted to you know the parent or the the elements inside it to be you know correctly vertically aligned then put height 100 viewport height if you want to be in relation to the actual size of the viewport or 100 if this parent has its own parent or something like that very very simple but very handy as well um okay so let's talk about this one this doesn't necessarily have to apply to headings but what i'm talking about is this little graphic right here so i back in the day what you would do is in your html you would have an like a development that said like border or something and then you'd have another element like for your h1 right here but now we don't have to do that we just take our pseudo elements i and we can use before or after in order to create extra graphics like this so the way it works here we have our h1 my awesome heading and then for our css we have the actual parent element which is the h1 itself and we want to specify position relative on it and then we take this same element and add the pseudo element of before or after we put an empty content property and then we put position absolute on the pseudo element and the reason you put position relative here is because when you use i the properties like top left bottom and right for anything that's position absolute if you don't have position relative here then this little blue thing will uh if you put top zero it will go all the way to the very top of the browser so position relative makes the positioning of a position absolute element relative to the parent right here so top would be right here in the case of like an h1 like a heading one element or something like that all right so very very handy i use this all the time next up so let's talk about white space all right so let's say for instance we use like an absolute unit for our white space and this could be if we're targeting this right here um this could be like the background of a website um we would use padding for the for the inner white space or if we use margin this would be on the outside to create this white space on the right and left here so if we used absolute values or relative values like pixels or m's units and we had no media queries and we stretched this out it doesn't change it's not fluid so what if we wanted the white space to be fluid uh and adjust automatically like this right here and here well we could do that without the use of media queries and of course this is for any element that you want to apply to and we can use the viewport width very simple i know many many of you know this already but some of you may not um so just take like uh depending on where you want to add this at like the white space on the outside of an element would be margin and on the inside of the element would be uh padding and this works perfectly you can also use viewport height as well so you can create vertical white space that's fluid all right so another one um let's say for instance we want all of our elements in terms of the typography the scale of the type the font size as well as the padding in the margin or the white space to automatically just scale up by changing one property in our media queries well just like this or just like this all you have to do to achieve this is change one property in your media queries so of course this can be any element here in terms of html and then we take our our element that we want to um you know apply this sort of automatic scaling of sorts uh margin and padding you use generally speaking m units and the the m units will be based on the font size of the same element all right so then we take our font size and we can use rem units and so 1.3 would be simply 1.3 times the size of the font size of your html element or the root element or whatever all right so you take 1.3 times 18 and that's what you would get so basically by default when you're starting with your mobile first i you know your css your font size by default for browsers is 16 pixels and then when you have you know your margins and padding set up using m units and your font sizes set up using rem units then all you have to do is wrap this right here this rule set with html or the root element inside of a media query and then you know on like tablet you might bump this font size up from 16 to 18 or something like that and then everything else your m units and your rem units will increase automatically very very cool stuff in that realm all right so let's also talk about fluid topography all right and this is achieved with a relatively new css property so take a look at how it's automatically grown fluid based on the width here this might be tablet and then maybe on desktop you might want it to stop growing so notice it only moved positions but it did not increase so how do we do that again any type elements this could also be applied for other elements not just topography we can use font size we use the clamp property and of course i've covered clamp i think in one or two videos already uh and the way it works it's just a function that we have three parameters a minimum font size the preferred font size which is kind of strange to call preferred i would say it's just the fluid portion of it uh it's in between uh and then the maximum font size and so usually when it comes to the preferred you're using some sort of calculation along with the viewport width in order to create the truly responsive or fluid sizing uh depending on what this clamp property has been or clamp function has been applied to next up let's say we have just this this asset uh this photograph right and we want to use this photograph as like a background uh on some some type of div element it could be the background of the website or whatever or just a development and then we also want to use a tint or we're going to apply like opacity towards it well the newbie might take this into photoshop and just do all this editing and then just export the asset uh you know the jpeg exactly as is here but you can do all this of course in css while using this actual asset here so the way we do it or the way i do it at least is we take a div class we'll say it's an image and then we take the same sort of approach that we use in one of my other tips we where we take the actual element position relativity and then we use a pseudo element of before or after and then use position absolute here and then we take the background image i and then we use like the url property and we specify the actual image and then we just set the opacity to like 0.3 and then you could also optionally use background blend mode and change it to screen or any of the other many type of blend modes out there and then that way you don't have to bake in exactly what you want in a photo in an application like photoshop or whatever uh very very useful so now let's talk about the very last but not least i how do you achieve these really cool reveals and it doesn't have to be just on text i let me show you original here it's kind of real quick but you can do all sorts of really cool clip based animations or transitions and it's it's very simple and basically this works on any element and you take the element and you use the clip path property and those of you who watch this or this channel know i use this a lot i love it um when it comes to the clip path it has a few different options here you can use a polygon uh a circle or ellipse and where i'll show you what stuff here means in a second and then you transition the clip path and then with like javascript or something like that you can attach another class to it where it has a different value here for your clip path property all right so i love using the clippy css i clip path maker and just go to google and type that in the url is right here as well and so in the case of like the little text reveal i just showed you um you take like a trapezoid which is just like a square or you know four points essentially and you hide everything initially so i drug those little points up so everything's hidden and then here's the output and then we drag them down and then everything's revealed here and then that's what you would put in the animate class in the example that i showed and that way when you transition it it'll smoothly reveal whatever that clip path has been applied to awesome awesome stuff all right awesome hopefully you enjoyed that and you learned something new if you want to see more of these types of videos let me know in the comments as always make sure to subscribe and i'll see you soon goodbye bye

Channel: DesignCourse

Views: 43,181

Rating: 4.9546008 out of 5

Keywords: css tips, css techniques, css tips and tricks, css grid, vertical horizontal css, center, centering css, gary simon, designcourse, css 2021, css new properties

Id: l_AUK0Z6D68

Length: 11min 3sec (663 seconds)

Published: Thu Apr 15 2021