5 More Must Know CSS Tricks That Almost Nobody Knows

and i've seen some crazy javascript solutions to try to do this when it's really just one single line of css [Music] welcome back to web dev simplified my name is kyle and my job is to simplify the web for you so you can start building your dream project sooner so that sounds interesting make sure you subscribe to the channel for more videos just like this now in this really simple example i have a button class up here that just defines all the styles for the button so you can see on the right here we have it minimized because it's not important at all and in this button style right here we have a transform that scales the button up slightly and rotates it slightly and then down here we have four instances of that button but you'll notice that some of them have this class big some have the class tilted and finally the last one has the class big and tilted applied to it and all these classes are going to do is change our scaling to be larger or make our rotation to be the opposite so big will make it larger and tilted will make it an opposite rotation but the problem is with transform this is pretty difficult to do so i'm going to show you how you would by default do this and i'm going to show you one trick that changed how i use transform completely so let's just come in here we'll say dot big and we know that we want the scale to be larger on this one so we're going to say transform scale of two and this is essentially going to be two times as big and now when we say this you're going to notice that these items are twice as big but you'll notice they lost their rotation and that's because when you define transform we're overwriting the entire transform so this entire transform appears being overwritten by this one right here so we need to copy down this rotation to keep it saved and now you can see they're properly rotated if we try to do a similar thing with tilted we know that in this we want to essentially reverse our rotation so we'll say transform and we want our rotation to be negative 10 degrees and again if i say this you'll notice they're rotated but the one with the class of big which is our final one no longer is big and that's because we need to make sure that we keep our original scale of 1.2 inside of here that's going to make these slightly bigger but they're still not as big as they should be this final one should be as big as the second one so we need to do is have another class here for big and dot tilted and inside of here we essentially want to have both these transforms combined so our scale is going to be 2 and our rotation is negative 10. and now this one is properly built and tilted the opposite way this one's tilted and default this one's big and not tilted and this one up here is just the default one but this is a lot of code what happens if we have you know five different classes then we are going to have so many different permutations of all of this code and it's becoming so difficult to work with and this is where css variables come in because they take all of this and make it dead simple to work with so we're going to start up here with our button class our scale we know by default is going to be 1.2 but we're going to store this in a variable this variable we're just going to call here something along the lines of scale and then we're going to default it to 1.2 if you're unfamiliar with how css variables or custom properties work i have an entire video on it i'll link it in the cards and description for you but essentially all we're doing is defining a variable called scale with a default of 1.2 inside of here we're going to find a variable called rotation we're going to give it the default value of 10 degrees and there we go and we can even put this on a different line make it a little bit easier to read so we have our scale which is the scale variable and rotate which is our rotate variable then in our big class we don't redefine our transform we're never going to redefine our transform we're just going to come in here and change our scale to b2 make sure that's our scale variable in tilted we're just going to come in here and we're going to change our rotation and our rotation if i spell that properly is going to be set to negative 10 degrees and we can get rid of this class down here completely so now you can see this is so much easier to work with we have just single transform defined up here which has all of our default values and then we define all of our overwrites and the nice thing is since these are css variables we don't have to worry about combining big and tilted together because we're not ever overwriting anything and when i save you'll notice the result on the right is exactly the same nothing actually changed but this code is way easier to read and i can extend this as far as i want if my transform has 50 different variables inside of it i would just need 50 classes and that's it well in the other example your class list would explode so large you would never be able to keep track of any of it another really great thing about this approach is if for some reason you know we want to change our big scale to be three well we change it in one place and it updates everywhere but in the other code we had to change it in every single class that had this big reference so we had to change it in big then we had to change it in big and tilted and if we had another one we'd have to change it in big tilted and whatever that other one is and it would just become you know a snowball effect of things that you don't want to deal with while with css variables this is just dead simple to work with this next concept really blew my mind because i always thought it was something you needed javascript for and that is the ability to resize elements you can actually do this entirely 100 with just css think about a text area component you know that when you have a text area component you can actually resize that inside the browser but you can actually add that resizability to any component you want i have this simple resizable class that i've added to these two cards over here and if i just come in here and use the resize css property and i set it to for example both well this will let me resize these horizontally and vertically you can see i get the little grabber down here i can drag them side to side i can drag them up and down as you can see i can resize them all over the place also i could change this to resize only in the horizontal direction which is generally probably something you'd want to do and now i can resize these horizontally as you can see so i can you know make them really small i can make them really big and i can make it you know kind of push into the other one it's a super cool thing that you can do one important thing to note though when you're doing resizing is you probably want to set your overflow to hidden just to make sure none of the content expands outside the area that you're expanding and collapsing and that'll just make it a little bit of an easier experience to work with another really cool thing you can do is actually set up restrictions so i could say you know what i want a minimum width on this to be 400 pixels i want the default width to be 500 pixels which is what i already have set up right here essentially and i want the max width for this to be 600 pixels so if i save you can see that we have this and if i shrink this down it only lets me shrink it down to 400 pixels and it only makes me grow it up to 600 pixels and if i tweak these a little bit we'll just maybe say 300 400 and 500 make it a little bit easier to fit on the screen actually let's just go all the way down to 200 300 and 400 now as you can see i can shrink this down to 200 pixels all the way up to 400 pixels but it won't let me go beyond those points so it's a really cool way to make like dynamically resizable components and all i'm doing is using css no javascript nothing else just css this next property seriously is going to change css and that is the idea of being able to maintain an aspect ratio but not having to do a hack to get around to it a lot of times when you're dealing with aspect ratios you would use the hack of padding top and you would set it to some percentage based on your aspect ratio so if you want like two by one aspect ratio you'd do padding top as fifty percent that's going to give you know two by one aspect ratio it's a huge pain to do it's kind of a hack it doesn't make much sense so css said you know what why don't we just add our own aspect ratio property so if you want a 16 by nine aspect ratio for like a video for example just use the aspect ratio property put in 16 9 save and now you have a 16 by 9 square and you can see as i increase my browser size the aspect ratio is perfectly being maintained no matter what size my browser is at same thing down here i want a one by one aspect ratio i'm just gonna set my aspect ratio to one by one and now you can see as i change my browser size this box is perfectly being resized to the exact size to always be one by one and if i specify you know a width in here of like 100 pixels you can now see this is essentially rendering a 100 by 100 square having this aspect ratio is great because it makes dealing with images and videos and other things where you care about aspect ratio so much easier especially when dealing with like flexible grid sizes where you don't know what the width is going to be in our case this 16 by 9 is full width so we don't know you know is it going to be this wide is it going to be this wide we can't set a manual width and height because it's dynamic so aspect ratio just takes care all that automatically for us there is one slight downside though and that is if we look at can i use for aspect ratio it's not the greatest support as you can see we get this out of here chrome and edge have pretty good support for this it's entirely supported there but firefox doesn't have any support and pretty much no other browser really has main support for this so as you can see up here the percentage is only about 65 percent of users this is going to get better as time goes on but it's one thing to be noted of for aspect ratio you can't really use it quite yet but i'm so excited for this finally lands in the browsers this next tip is super simple but really useful especially if you're using javascript with css variables so we have this simple div on our screen just blue div and you can imagine that this is like a progress bar of sorts and you want to be able to change this based on percentage well in your javascript code you're getting information about what percentage this is and in javascript you're setting this css variable called percentage to the exact percentage of where you are in your download or upload whatever is going on and then we're setting our width to that percentage you'll notice something interesting our bar is still 100 full that's because this percentage variable is just the number 20 so we don't know is this 20 pixels 20 percent 20 rem we don't actually know so what we could do is you know have 20 right here and now you can see our progress bar has changed but generally when you're working with javascript and setting it css variables you're just going to be setting it to the value of 20 because you're doing some type of math and you're figuring out what the percentage is and the percentage is 20. so you set the variable to 20. and you want to convert this number 20 to an actual value that you can use inside your code so a percentage in our case well to do that with css really easily you just take a calculation and you take your variable you want to convert and then you multiply it times one of the actual thing you want so we multiply it by one percent and now when we save you're going to see this 20 has been converted to a percentage value and it's properly showing up as a 20 on our screen even though our percentage variable is only set to 20. if we wanted to convert to pixels we'd multiply by one pixel and it now converts this number 20 to one pixel and this is going to work for any value that you want let's say we want to do rems now we convert this to rem so you can see we have this really long bar because 20 ram is pretty long now you're not going to use this tip all the time but knowing that you can convert between different values and two different values using the calculation is super handy and something i use a lot when i'm dealing with javascript this final topic is something that literally everyone has run into and it's such a pain to fix and that's what happens when you try to scroll to an anchor tag on your page so you can see we have this anchor tag that goes to heading two and if we scroll down we have this heading two right here and if we click on this link to go to heading two you're gonna notice something interesting our heading shows up behind our actual header our nav bar up here that's because this is stuck to the top of our page we're using position sticky to have it at the top very similar to position fixed and when we click this it's covering up the thing that we're scrolling to terrible user experience and it's something that's kind of a pain to fix unless you use the property scroll padding top so let me show you how you can fix this let's just come in here we're going to select the root of our document it's the same thing as like the html we're going to create a variable called a header height in our case our header is 50 pixels wide right up here so we're going to go with a var here and we're going to use our header height this just makes it easier to repeat and use this header height in other places so we set our height to 50 pixels nothing has changed at all then what we want to do is take our scroll padding on the top so we'll say scroll padding top what we want to do is we want to come in here and we're going to say that is equal to our header height so we'll use a var for that and now immediately if we save and we click this you're going to notice it gives us enough room above to see this actual header you can see it scrolls right to the header instead of covering it and we can go a step further and just say that our scroll behavior is going to be smooth so it smoothly scrolls and now if we click this you can see it smoothly scrolls down there right to where a header is it doesn't cover it it shows exactly where it is and if you want a little bit extra space we could just throw in a calc here and let's just say you know we want 10 extra pixels of space on the top so we save that now we click and you can see there's 10 extra pixels of padding above our heading where it's going to scroll to this is something i guarantee you're going to run into if you have any type of navigation bar on your site and you're going to be navigating to different headers links comments whatever it is having this simple trick of just adding scroll padding top solves all those problems and i've seen some crazy javascript solutions to try to do this when it's really just one single line of css if you enjoyed those crazy css tricks then you're going to definitely love my full css selector cheat sheet which is linked down in the description below it gives you a cheat sheet of all the different css selectors what they do how they work and how you can use them in your own projects so i highly recommend you check that out thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 59,745

Keywords: webdevsimplified, css features, complex css, new css features, future css, css, css tutorial, css new, new css, css project, css project tutorial, css top 10, css top 5, wds, css aspect ratio, css resize, css advanced, expert css, new css properties, important css, css4, css 4, css four, css3, css 3, css three, modern css, modern css features, modern css properties, cascading style sheets, modern html, cool css features, cool css, fancy css, how to write css, html, js

Id: pKO1ktPQByk

Length: 12min 10sec (730 seconds)

Published: Tue Apr 13 2021