Write SO MUCH less CSS by using custom properties like this

so we see buttons like this all the time right where you get these button things like this they're different colors and all of that so i've set up a button here and some links that all have classes to make them look like buttons and the normal way to do it is by setting up a button class and then you get these like modifiers where you're setting the different colors you only have to make the button once and then you just modify it as you go and i've seen the same thing but instead of writing keel here and keel healer you'll use a custom property and all of that and that's all fine and dandy but i want to explore an even better way to do it but instead of it looking like this we can do some fun effects with it too with this we're going to be exploring custom properties as well as transforms transform origin and we're going to be having some fun with it hello my friend and friends and welcome back if you are new here my name is kevin and here at my channel we learn how to make the web and how to make it look good with weekly tips tricks and tutorials like this one where you explore the wonders that are css and how we can write better css by simplifying things and taking advantage of modern css to be able to do it so what are we waiting for let's jump right in and here we go i'm in codepen right now and as i said we have our three divs there and what i'm actually going to do is i'm going to delete you i'm going to delete you and i'm going to delete you right here as well you're going to see why in a second and we're going to fix our hovers and all of that um as well so what we're going to do here is i've declared a color and i've declared a border and right now i could inherit just so whatever it doesn't matter why i could have just written black and it would have worked fine but what i'm actually going to do is put a custom property and it's going to be an undefined one if you look through this file you'll see there's no root there's no custom properties declared anywhere and i'm just going to call it vtn color and in my btn color i'm also going to give it a fallback of a black and we're going to do the same thing here and we have a border that's two pixels solid and we then get our btn border our btn color which defaults to black and because these are undefined variables it means that if it can't find it it will use this color instead now instead of having to worry about defining my border color and my color i can just say btn color is teal and that first one will switch over to teal isn't that cool so there you go and so then we can actually take the same thing here where we have our background switching we're gonna do something more fun than having backgrounds in a minute but i could also switch this over to being a var btn color and then that's going to work exactly the same way so we're not really winning too much here but it is working but we have our teal so let's just copy this and then we can have another one there there this one can be purple and then this one over here can be my fire brick red and all my buttons are working and everything is looking great and i think that's such a nice way to do it again if this let's just change this just so you can see so instead of black as my default on these now this could actually default to another custom property that is in your root if you have some so you could do that instead of just putting in a random color here let's just make it a lime green for the moment and i should have done both but there we go lime green so just you see if i don't declare one on the button it's going to turn to the lime green color and now it's switched over same thing here we can make them all lime green so that's the default they'll come in with and if we want to overwrite it we can overwrite it and i think that's really nice and cool so that's a nice first step that we can do when it comes to theming things is setting certain things up like this with these fallback values and you can do this for anything not just for colors and it can be really useful and especially here because my color and my border are both using that value so it makes it really nice so if i update it once it does it for both of them and of course my my hover color here is also being affected by that so again i only have to change it here and so this purple let's just change my teal here to red and we're going to see that by changing this one value the button has changed the border has changed the color has changed and the background is changed so so powerful and so we'll team that turn turn can't speak we'll turn that back to teal and because that's so powerful we can actually get rid of all of this here and you'll see why in a second i could do all of that now just by having it here and this should be my button hover and my [Music] btn focus but that means here we're changing my color and we don't have to do an individual one for all of them then we can just say that my background here is my var btn color and we have one selector or one rule i should say and that one rule is going to work for all of them if i spell color the way i spelled it in my custom property that had me worried there we go so you can see we've just eliminated a whole bunch of css and we can just set it up like that with one rule here instead of having to have one for each color along the way so this here is controlling everything so so nice you know it just cleans things up so much makes things so much more maintainable i love it so very much and we can even take this a step further instead of having these types of hover effects like this let's come in and just say that btn after because you know i love pseudoelements so on my btn after let's give this a content property because we need content on a pseudo element let's give it a position position of absolute and if that's absolute i do think i already have i have a position relative already on my main button so that's good so position absolute and then we can give this a background of actually just copy this right here and actually let's turn this off because we don't want the hover to be there we're going to be sort of taking advantage of this so let's we can actually steal this let's just grab that put it here instead um so my background is there and with the position absolute i can do an inset of zero which is going to set them all there we go so we can see them and now if i hover uh oh we also want a z index of zero uh negative one just to push it backward and now we should see my text be able to show up on these oh you know what i took this whole rule off when i didn't want to take the whole rule off i just want to take this off here there we go that works a little bit better um one thing with this negative z index here when you do that it might push things too far back um and that's why if you do go look at my code uh in the code pen on my button i also have i have my position relative but i also have an isolation of isolate which creates a new stacking context so if i turn that off now those colors are actually disappearing behind this white background so there's different i could just give this a z index too but isolation isolate it creates a new stacking context so the new stacking context means that it can't that pseudo-element which is a child of my button it can't escape outside of this anymore so the negative one is go behind all the content that is inside of this and i guess instead of that i guess i probably could have just used a before maybe instead of an after but whatever i'm not even sure but i'm going to leave it like that because it's working and i'm happy and we learned something new along the way if you didn't know that already so useful lesson so that's good but obviously we need to see our text all the time so what i'm also going to do here is i'm going to do a trans form of scale and we're going to do a 0 comma 0 just like that and i'm going to be transitioning this so we're going to do a transition of trans for transform 300 milliseconds and we'll just do an ease he should be fine and i'm choosing 300 because i used 300 on my color transition too and we could take this background one off um so yeah that's why i'm going to choose the 300 you could even use that as a custom property as well if you wanted to because then you could update both values at once um so we get that now i need that to come in so now we can say that my vtn after a hover first vtn hover after and then we can do a transform scale 1 comma 1 so it's fully sized and now if we go and look look at that that's kind of fun right that's cool i like that a lot and you'll see that the colors are already the right colors because we have the background here as btn color so i don't have to define a different color for each one i just have to define it once here it's looking at this this is looking at the custom properties that i've declared over here and it just works it's magical and so that's already kind of cool but let's take this a step further and this is one area where you would have to you know if you had these different ones uh you just need a new selector for it and i guess you could even uh come up with a way you know what could we we could do this i just thought of this on the fly but this is going to be fun let's do here a trans uh we'll do it under my transform i didn't think of this i was going to do different selectors and we don't have to transform origin is going to be a var um we'll just call it transform t origin let's just do transform origin whatever it doesn't matter again we're just doing this to save a little bit a few lines of code and here we could keep center as the default so if we don't have one declared we could keep our center but then we could come up to each one of these and we could have our button color and we could also have our transform origin which the nice thing with this is custom properties are inherited into their children so even though i'm declaring this on the button itself the before is going to inherit this value so let's just say this is going this one will be left this one is going to be a let's copy it because it's a little long transform origin of right just so we can see the difference so now that's kind of cool there and then that one's in the middle uh now we could take this a little bit further and play with this a little bit more if you wanted to because it's always on right now i have my scale of zero zero so like if i did this as a scale of zero one then it's going to look a little bit different it's gonna do things like this instead and that one goes in the middle uh we could also have this one as a zero and this one is a one and then it would also create a bit of a different effect where it goes up and down uh they're all doing it from the center now so like in that case this would be let's just say top and this one could be bottom and then so there it's from the bottom this one's from the top and then that one's in the middle so you play around with that explore it maybe even build out a bit more of a robust system here uh to set it all up so you can control things even with where each one is transforming from all of that i just wanted to explore this idea have some fun making some buttons but all of these ideas can be taken and explored a lot more than this and if you're just new to custom properties and you want to learn them really from the ground up i have a really good playlist here it starts from ground zero and walks all the way up to manipulating them with javascript and of course a really big thank you to zach randy and stewart who are my supporters of awesome over on patreon as well as all my other patrons for their monthly support and until next time don't forget to make your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 5,222

Rating: 4.9583335 out of 5

Keywords: Kevin Powell, css, front-end, frontend, html, tutorial, custom properties, css custom properties, css variables, locally scoped css, dry css, write better css, css properties, css variables tutorial, css vars

Id: Wyc2hJZ_W8o

Length: 10min 54sec (654 seconds)

Published: Tue Sep 21 2021