0:00:00
What is up my friends? Welcome back. Listen, today’s training is going to put a lot of really valuable tools in your toolbox. We’re going to talk about pseudo elements, but as always in the videos that I create, we’re talking about so much more. We’re going to cover locally scoped variables. We’re going to cover some best practices. We’re going to cover some stuff that honestly I haven’t seen anybody else doing or talking about. It’s a technique that I came up with to solve this kind of unique situation where you have these pseudo accent elements, but you want to be able to use them in different contexts on the site without recreating them over and over and over again or using a bunch of different classes or anything like that. So you’re definitely, this is one of those videos. It doesn’t matter if you’re a beginner or you’re intermediate or you’re very advanced. There is something for everybody in this tutorial and we’re going to go nice and slow. Let me take a look at what we’re going to be creating first. This is my new site, Gary.co. I did a two hour deep dive on how every part of this website basically was built last week. I’m sorry. I’m still my voice is still affected by being sick for the last couple of weeks. But we’re going to work through it. It’s going to be okay. I did a two hour deep dive on this entire website last week. I’m going to link to it down below. If you have not watched that deep dive, I would highly recommend you take the time and watch it. Everybody that’s commented as basically said it’s packed with value. The entire two hours should be watched. There isn’t any fluff in it whatsoever. So definitely take the time go and watch that. But if you see behind me are these little pseudo accent blob type elements. And then actually if we go way down the page, you’re going to see them again. There’s one right there and there’s one right here. And this is what I mean where we want to use the same accent element in different contexts. But we don’t want to have to use all these different classes and it would just be nice. If we could apply one class to an element and we get those accent design whatever you want to call them. We get these accents, but we’re able to manipulate the accents on a one off basis. For example, can we change their width? Can we change their angle? Can we animate them differently? Because these can also be animated with G-SAP if you build them properly.
0:02:29
So the tutorial today is going to cover kind of all of this. First of all, how do we create these pseudo accent elements? Secondly, how do we make them dynamic to where we can use one class, but still somehow control them differently depending on where they happen to be located? Because that is a big thing with pseudo accent elements like this. So if you guys are ready, I’m ready. Let’s go ahead and dive right in. What I want to show you is that the accent blurs as they were called here are created with one single class called accent blur. And you’re notice that there’s two of them. We’re going to talk about pseudo elements in a minute. But if we scroll all the way down on this page, the exact same class accent blur was used on this entire section here to create the same effect. But then obviously I had to change their behavior because they’re used in a different context. And that’s exactly what we’re going to be covering. So what I’m going to do is take off this class of accent blur and you’re going to see that now I’m just left with my image and the two accent elements behind the image are gone. And now we have to create them from scratch. So what I’m going to do is just create a new class called blur. That’s just a brand new class that we’re going to use. I’m going to delete this after we’re done because this is my life site. But you see nothing has happened when I add the class of blur. So the first thing we need to talk about is how do we just get pseudo accent elements to appear? How do we create them? How do we style them? How does this all work? And I’m going to go nice and slow. So any of the beginners can keep up with this. And then we’ll quickly after that get into a lot of the advanced stuff with the locally sculpted variables last step that we’re going to be talking about in this tutorial, the whole purpose of this tutorial. All right. So let’s talk about accent elements. There is something called a before and something called an after. These are pseudo elements. Okay. And in bricks, you can manage pseudo elements up here at this little arrow and it says select or create pseudo class. And you can see that there is a before. Actually, I don’t think I think this before is only here because I’ve used it on the website before. I think that they may not even be here by default. You actually have to type them in and create them. But here’s the thing in bricks and really in most builders. I would say do not use whatever.
0:04:54
Panel or organization method they have for pseudo elements. I would completely ignore these areas in the builder. Just you’re going to you’re just going to want to write CSS for this. Okay. You’re going to have to trust me here. You don’t want all this stuff spread out all over the place. Okay. We’re going to put it all in one spot. It can be in a WP code box style sheet. It can be inside the builder style sheet. It doesn’t really matter. You just want it all in one place. And it’s a really good idea for you to learn how to create pseudo elements by hand. Okay. This is one of those things if you don’t know how to do it. If you’re scared of it, just push through it. Just get yourself. You’re going to get a lot of confidence by doing this by hand. All right. So let’s go do it by hand. So we’re going to go down to the style tab CSS tab and this is where the magic is going to happen. Now normally we want to attach these pseudo elements to the class so that when we apply the class, the pseudo elements appear makes sense. So normally you would write blur and then you would write before something like that. So this is how you create a pseudo element. However, in bricks, it’s a little bit differently. A little bit different. Sorry. This whole class right here is actually replaced by the word root. Anything that you have selected, it doesn’t matter what class it is, you use the word root to reference that item to reference that class. Okay. So we’re going to do root before it’s exactly the same as if I was writing blur before. So if you’re in WP code box, you’re going to have to write blur before. All right. But if you’re in bricks, you can just write root, which is the placeholder for the active class. So we’re going to do root before and we’re going to open our curly brackets. Now here’s the first thing you need to know about pseudo elements. I’m going to show you what happens in the actual HTML on the page in just a minute, but they will not appear unless you define a content for them. All right. Now content is often blank, but you still have to define a content instruction. Okay. So a content could just be a letter, though. So I’m going to hit save on this and we’re going to go to the front end and we’re going to see that there is an a right there. You guys see that? That is the pseudo element. And in fact, if we inspect this and I’m going to move my inspector window off to the side over here. All right. Can we make that a little smaller? Yes, we can. We bring this down a little bit. Yes, we can. Okay. So I’m going to make sure that we have this image selected. It’s actually the figure tags. There’s a figure tag up here. Here is the before element. And one thing is important to note is pseudo elements, even though it appears like it’s outside, it gets put inside the element. That’s really important to know the pseudo elements are put inside the parent element. They are not outside of the parent element. Now there’s another pseudo element that we have access to called after. So if I just duplicate that and I change the before to after and I change this a to a b and then I hit save and we go to the front end, we can take a look at this. We do have a b down here. So it makes sense, right? The a is before and the b is after. They’re both inside the figure tag, but one comes after the element and one comes before the element. Now other thing to notice, it is pushing my element out of position. It is influencing the content around it just like a block level item on the page would do for the little accent pseudo elements that we’re going to be creating. We’re not going to want that to happen. We actually need these accent elements to behave independently of everything around them. So we’re going to talk about that as well, but I want you to see that we can just put an a and a b on here just using pseudo elements. You can put any kind of content, right? You can put a lot of different stuff with the content tag or we can have blank content.
0:08:57
Now just because we have blank content doesn’t mean nothing is going to show up. We can still make things show up. Now for the ease of use here, I’m going to remove the after. We’re just going to work on the before right now. So the first thing I need to know is that if I want something to show up, it’s probably going to need a width and a height. It’s going to need some sort of dimensions because right now blank content is not. It’s just doesn’t exist. There’s nothing there. So I can just pop a width on here. Now what what should my width be? I really don’t know. I’m going to put a height on here as well. And this is the thing. I think a lot of people struggle with writing CSS or even approaching a task like this because in their mind, they’re like, I don’t know all the answers ahead of time. So I’m not even going to try. And I’ll let you in on the secret when we, you know, advanced web designers, developers, we’re trying to work our way to a solution. We don’t know all of the things ahead of time. I can’t tell you what all of the values are going to be right off the top of my head before I even get started. You have to work your way there progressively. You’re going to have to try things move backwards then move forwards right to set forward once that back to set forward once that back. You’re going to run into issues and hurdles and you got to solve for them. We all do this. So you just have to say, all right, we’re going to approach this. I’m going to get started and I’m going to progressively work my way towards a solution. Perfectly fine. Okay, we all do that. So don’t think to yourself, I don’t know all the answers ahead of time. So I’m not even going to try. None of us know all the answers ahead of time. We’re all working towards the solution. Okay, so I’m putting a width and a height of 40 rim. Why 40 rim? Don’t know. Don’t care. Just threw it out there. Doesn’t matter. None of this matters yet. Now why can’t I see anything? Well, my A’s and B’s are gone. That’s good. But I can’t see anything because there’s still nothing to see. Imagine a 40 rim by 40 rim box that has no color, no border, no nothing. Obviously, we’re not going to be able to see it. So let’s give it a way to see it. Maybe a border of five pixel solid red. And then we’re going to save and we are going to refresh on the page. Now what is going on here? I have no idea. We see just a little, a little red strip. So it’s important. It’s supposed to be 40 rim by 40 rim. But I’m really not seeing it at all. So what I’m going to do is I’m going to give it a display of flex. And we’re going to see if that changes anything. So I’m going to refresh. And now, oh, look, I’m seeing it. OK, wow. I am seeing it now. But it’s way not where I, where I need it to be. So the first thing remember I said that if you just display a pseudo element, it’s actually going to impact other elements around it. And we don’t want it to impact other elements around it. So one thing we can do is make it position absolute, which removes it from the stacking context of the page and basically allows us to put it wherever we want. And it won’t have any impact on the position of other elements. So let’s go ahead and give that a shot. So I’m going to say position absolute. And I’m going to save. See, I’m just progressively working my way towards where I want to be, where I want to go.
0:12:13
So this is what it looks like when it is position absolute. Now, I don’t actually want it to be a bordered box. I want it to be a blob. Right. I want it to be a solid color. So I’m going to take off that border, but at least that border allowed me to identify what I’m working with. Right. It allows me to see something on the page. So this is a perfect example of how you can try something two steps forward and then take one step back. So now I’m taking my one step back and I’m switching to a background color. And I can just say red is my background color. Do I use the color red on this website? No, I don’t use the color red on this website. So why am I choosing red? Because it doesn’t matter. I just need to see something. I just need to see what I’m working with here. Okay. So now let’s go and refresh and I see. Okay. There it is. I got a red box on the page. Boom. Check box. Right. But now I got to keep going. What is the next thing that I need to figure out? Well, for me, obviously we have a box that we can make it maybe into a blob. But it covers up the image. It’s not behind the image. So now we need to talk about our axes. Right. You have your x axis that goes left to right. You have your y axis that goes top to bottom. You also have a z axis that goes straight through the screen. And now you think in layers. Okay. So instead of things being left to right or top to bottom, they’re now on top or on bottom of themselves on the z axis. This is controlled with z index. Okay. And we just give things numbers. So I’m going to come over here and say this z index. If it’s a positive number, it’s going to be more prioritized on top. If it’s a negative number, it’s going to be prioritized on the bottom. And this is kind of like in Photoshop where you right click a layer and you’re like send to back. Right. And it sends it to the back. That’s what we’re doing here with a z index of minus one. However, this is going to cause yet another problem. The pseudo element has disappeared. And this will happen from time to time. And sometimes it’s unexplainable. But I will give you a master tip. Okay. Any time you’re working with negative z index. And it’s causing a problem. I don’t particularly care what the problem is. In this case, the problem is that the pseudo element completely disappeared. Is that a problem? Yes, it’s a problem. So I said anytime you’re using negative z index. And there’s a problem. Doesn’t matter what the problem is. Then you’re going to write these words right here. You’re going to come down and actually this needs to happen on your parent element. Okay. Now on the pseudo element. So we’re going to go to the parent level. So I’m just selecting the root which if we remember moments ago, what did I say that equals? It’s a reference for blur. It’s a token for the class that you have active. Okay.
0:15:06
So we are it’s it’s just like writing blur. Okay. So I’m on the parent. Wow. Be nice. Have a good time. We’re on the parent class. All right. So I’m just saying root. That’s my token. And now I’m going to say isolation. Isolate. And then I’m going to save. And now our square comes back and our negative z index is working. What does that do? It basically reissues the stacking context for this specific element versus looking at the stacking context of the entire page. All right. So next step. What do we need to do now? Well, it would be nice. If we can make it more blob like I guess first let’s just change its color now that now we’ve kind of got things going like they’re they’re getting really close to where we want to be. Let’s actually get a real brand color in there. So I’m going to change from red to a variable called action. And that is my website action color very, very good idea to use variables for everything that you do you would not because you don’t do you know even if even if you knew what my action color was answer this question. Would you know the hex code off the top of your head would you be able to just let me just type in my hex code. No, you got to go look it up and then you got to put it in and then I never need to change you got to go find all the places you use the hex code you got to change it and yada yada yada don’t do all of that nonsense. Create variables for your colors and if you this is you know a different tutorial if you use automatic CSS these variables are automatically created for you so they’re already ready to go that’s the case right here that’s what’s happening now. So I can easily just say I want this to be my action color and bam it’s my action color so take a look at that. Sorry we got the the old cough coming back. Alright so guys we’re getting very close on this we’re getting very close if I wanted to be more blob like let’s go back and take a look at this. What can I do how do we get this effect well I tell you it’s very easy it’s probably easier than it looks number one we have to rotate the blob a little bit I don’t want it to be a perfect square back there because a perfect square just starts to look like too perfect to perfect. Okay so we want to rotate it a little bit so what we’re going to do is come in with a transform of rotate and rotate is express more as a function in CSS where you’re going to use open and close parentheses but it’s very easy to do it’s just based on degrees and you can say like I want to rotate it minus five degrees we’ll take a look at that on the front end so there’s my slight rotation. Okay the next thing I want to do is I want to blur it alright now what a lot of people I think would do is they would say I need a blurred box and a blurred pseudo element back there and it needs to be a certain opacity and a certain amount of blur and it needs to be a transparent PNG image that we’re then going to have to you know turn into a WebP to really optimize the file size and they go off into Photoshop land. I’m telling you the truth this is what a lot of people do they go off into photo and if you if you do this I’m calling you out right now because you’re going to see how ridiculous this is how absurd this is they go off into Photoshop land and they create a box and they blurred and they angle it and then they they make it a certain transparency and then they make sure there’s no background and they export it as a PNG and then they upload it and then they switch it to a WebP and they do all this other stuff and then only to have yes the effect that they wanted but zero can’t be a good thing. Zero control over that element ever again without going through that entire process yet again and you’ll see them do this because they’ll put it on the website and then they’ll be like ooh that opacity I chose it needs to be a little less back in a Photoshop change the opacity export again bring it upload again swap out the file oh my gosh what an absolute nightmare nightmare okay don’t do this so look I can do all of this without Photoshop do it if you can do it with CSS do it with the CSS don’t be in Photoshop lands you want to avoid I my goal is to get through every website without opening Photoshop how about that let’s just make that the general rule get through every website without opening Photoshop all right here we go so we’re going to go with another kind of function right so we’re going to do a filter blur all right and then blur just takes a number and this is typically expressed in like pixels so a five pixel blur gives me this now does that look good no no that’s not enough blur we need to blur a lot more how much do we need to blur I don’t really know let’s just add a zero so let’s go save and let’s look at it on the front end I think that’s more or less where we need to be the problem now is that it’s just way too bright it’s too in your face so do we have a solution for that in CSS yes we can just change the objects opacity so I’m going to come down here and put an opacity instruction of point two and then I’m going to resave and guys look how close we are getting now so there is the original and there is what we are working on you see it’s still a little bit too bright so I can bring it down a little bit more maybe we’ll do point one to which is 12% instead of 20% and then we will refresh now I’m not trying to make it exactly perfect but guys that is really really really close it’s almost exact okay so now that I’ve got my before pseudo element created and we can test this out guys I’m going to take off the blur it goes away all right let’s look at this on the front end and now you can start to see how easy this is to add to an element you’re like I want this element to have blurred accident elements and I’m going to put that on I’m going to hit save and then I’m going to refresh and there it is what we need to do now is create the second object and this is going to be using the after the after pseudo element so I’m going to copy everything that I have here and I’m going to paste it and then I’m going to just change this to after now if I save and refresh I see that it doesn’t really look like I have two of them where is the other one well we actually forgot a step let me let me actually back up here okay because this will make more sense if we just do this on the before before we move into afterland so whenever you position something absolute it’s a really good idea to give it coordinates okay so we can use a top coordinate we can use a left coordinate you want to do one on the y axis and at least one on the x axis that’s a good practice okay so I have top no left no I’m going to do top of zero and left of wow left of zero which is going to put this box in the top left corner okay so it’s a go zero from the top which means stick it to the top go zero from the left that means stick it to the left and it’s now in the top left corner so we can look at this will save will refresh and basically it hasn’t moved you know why because that’s the default position now I’m going to go it changed the tops of bottom and change the left to right and hit save and then refresh and now you see it’s down here okay so I’m able to really control the position the exact position anywhere around this image now it’s going to stick to the image itself and to make sure that it’s really attaching itself to the image it would be a good idea to come up here to the root and do position relative and if you haven’t watched my my whole video on like all things positioning definitely go watch that so you understand why we’re doing position relative on the parent element and how that influences the position absolute on children remember I said it was very important we understand that these are child elements they’re not outside of the parent they’re inside the parent that lets you know how to use positioning properly for these elements okay but now I have a bottom and a right okay so now what we’re going to do now that we have coordinates and we’re going to switch this back to top and left all right now you’ll see why this makes more sense I’m going to switch this to after and then I’m just going to change this to bottom and to right and then we’re going to hit save and we are going to refresh and now you see I have them in both places so here’s one and here’s the other one down here now what I can do is I can change the color of the second one and I’m just going to use my other variable secondary all right so we’re going to hit save and now we’re going to refresh and it’s immediately adopting the secondary color same opacity same size same blur same angle actually I want to change the angle so what I’m going to do is use the opposite angle so instead of a minus 5 degree rotate I’m doing a positive 5 degree rotate okay so now we’re going to refresh and it’s hard to see because it’s blurred and in opacity is lowered and all of that good stuff but what we can do is we can now move on we’ve got our two elements to thinking more advanced because as you’re seeing I want independent control over these two elements that’s number one number two is I want to be able to reuse this class on other elements and have independent control over both items independent from where they were used previously but I want to use this one class I don’t want any additional classes it’s kind of like a game right where someone’s like all right here is your mission you have to be able to display two pseudo elements you need independent control over those pseudo elements but you have to assign them to a single class and you have to be able to use that class on any other element on the website while still having independent control over the position of those elements without affecting the other uses that you already used throughout the website how many times can I say the word use it seems like because we’re using a class the whole point of a class is that we have global control like if I change the two elements here they’ll change everywhere the class was used that’s how a class works so how are we going to accomplish this good question my friend that’s where we get into these advanced techniques and like I said yes we’re talking about pseudo elements but what I’m teaching you right now is going to come in so tremendously handy and many many many other use cases so you really want to pay attention to this you really want to understand the concepts all right so let’s get cracking we are going to use something called a locally scoped variable the variable action the variable secondary these are globally scoped variables which means I can use them anywhere on my website and I’m going to get the outcome that I wanted a locally scope variable is a variable that is defined on a single class or even an ID and then it’s only available within that class or the children that you’re working with okay so these are children right so they’ll be able to use the locally scoped variable so I’m going to define the locally scope variable at the parent level all right so we’re going to come up to this route which remember is the parent and we’re going to create our first locally scope variable now if you don’t even know what a variable is I have a whole video on it but and I’m going to do an actual video on globally scoped or locally scope variable I’ll do a dedicated video on this topic but for now all you need to know is a variable is just a token it’s a placeholder for a value within a specific context like action is a placeholder for a hex code or an HSL string or whatever and so I don’t need to memorize the hex code I don’t need to memorize the HSL string I just need to know the name of my color and then I can reference my color perfectly anywhere that I want to that’s how a variable works now we’re going to create a locally scope variable we’re going to pick any of these items that need to be manipulated potentially change or altered in the future and we are going to create a variable for it so for example I am going to do one for the blur that’s probably going to be the easiest one to see exactly what we’re trying to accomplish here so the blur now keep in mind there’s a before and there’s an after so when we name these variables we need to name them in the first place we need to name them in such a way that they make perfect sense even if we leave this project alone for three months I talk about the three month rule all the time can you leave it alone for three months come back to it look at the code look at what you’ve done and understand what’s going on without a bunch of analysis without a bunch of trial and error without a bunch of headaches all right you don’t want to trigger my grains when you’re working on an existing project so here we go we’re going to come up here and say before and then what are we doing blur right so the before blur is this value right here 50 pixels and then so this is the way we create a variable it’s a double dash then the name of the variable whatever you want to call it and then the value of that item the like what does this token represent this token represents 50 pixels but in a specific context of its name the before blur so the before pseudo elements blur all right so what we’re going to do to use this variable is we’re going to come down here and we’re going to replace this with a variable function of var function and this is how we call that token so we write before blur just like that so we take exactly what we wrote and we just wrap it in a var function just like that and now you can imagine that this whole string right here that I’ve highlighted in your mind all this does is say 50 pixels that’s all it does so it’s a word but it represents this value right here of 50 pixels now what we can do is we can create an after blur okay and the after blur is going to be 50 pixels and we’re going to come down here and we’re going to put in var blur sorry after blur okay also represents 50 pixels now what we’re going to do is save we’re going to go to the front end and the first thing we want to verify is are they still blurred because if this variable was not working they would not be blurred anymore right because that blur string would be invalid but they are working so everything that we’ve done is good up to this point what does this give us the ability to do watch this I can quickly say my before blur is 10 pixels my after blur is 20 pixels I’ll save I’ll go to the front end and there you go so this one is what what I say the values were 10 and 20 so this one is 10 and this one is 20 I can easily say this one is one and this one is 10 and then we’ll hit save and then we’ll refresh there you go so you can see that I’m able to manipulate now that part of my pseudo elements using these locally scope variables now what we have to do is we have to continue using variables for anything that we would want to potentially change the next one we’re going to do is this display which you’re like Kevin why would you do a very variable for the display you want it to display you wanted to display flex well actually when we use this class there is a use case where I put on this blur class two elements show up by only want one of them I want to hide one and show one so what we need what we need is a variable for the display so that I can set one of them to display none if I want to all right so what we’re going to do is say before display and then I’m going to say flex and I’m going to say after let me just copy this whole line right here and paste it down here and change this to after and then what I am going to do here is I’m going to come in and just kind of organize this a little bit so I’m going to use a CSS comment which allows me to write text that I want to give me a little note which is not going to get output in this is not going to affect the CSS output basically all right so we’re going to say that this is the after element and then I’m going to grab this and say that this is our before element and now you see I’ve got them kind of organized a little bit all right so I’ve got before blur before display after blur after display and this is going to be set to flex and I’m going to take my variable and I’m going to come in and I’m going to insert them so this is a variable function here for my before display I can just copy this line I’m going to come down here paste it in this is my after display I’m going to go ahead and save did our object disappear no they did not disappear so we’re good to go all right the next thing I’m going to do is make the width and height so that I can actually change the dimensions of this object OK so I’m going to do a before width and we’re going to say 40 rim was our value. I’m going to do a before height of 40 rim. The other thing I can do if I always wanted to be square or if I just want to play with aspect ratios. Instead of doing a width and height I can just say what is the aspect ratio of this object and what is its width and then it’ll it’ll have that width and it’ll have that aspect ratio. That’s up to you. Something that you can do is whatever. Whatever comes to your brain you’re like I want to do that. You can do it. You now know the techniques. So now I’m going to copy these two things and we’re going to do after after. Okay perfect.
0:33:22
Now what we are going to do is put those variables in. So and then if you’re using automatic CSS you have variable expansion. So you can do before width and then when you put the semicolon it’s going to write the var function for you. And now I can come in and say before height it’s going to write the var function for me. And then I can just copy these and we’ll bring it down here. Bam, bam. So we’re going to do after and after and then this is going to be width. Alright so we’ve got those variables put in. The position being absolute can just stay like this. We need coordinates guys. Alright so we’re going to do a before. Now here’s the thing with coordinates. Right now I’ve written this with top and left and this one with bottom and right. Which does give me the positioning I wanted on this particular image. However this is not going to work open-ended right. It’s not going to give me every possible point of control that I need for both of these elements. So there’s two things you can do. One is better than the other. One is objectively better than the other. And a lot of people don’t know this. So it’s another little golden nugget that you’re going to want to jot down. Okay. You could come in here and say it’s top right of auto and then put a bottom in a bottom of auto. That’s how we go. We started the top of a box and we go around. Right. So top right bottom left.
0:34:49
So you have top right bottom left. Top is zero. Write is auto. Bottom is auto. Left is zero. But that is a lot of writing. Four variables now. I need a variable for top. A variable for right. A variable for bottom. A variable for left. That is not super efficient. Not super efficient. So what I’m going to do is delete all of this and replace it with one line and one variable. And that’s going to be called in-set. So this is a shorthand property for top right bottom and left on this positioning. So our top is going to be zero. Our right is going to be auto. Our bottom is going to be auto. Our left is going to be zero. There is our line right there. And so now what we need to do is come up here before in-set and then write that string right there. And then I’m going to copy it. Come down here and do our after-inset. So our top is going to be auto. Our right is going to be zero. Our bottom is going to be zero. Our left is going to be auto. And now what we have to do is test this out by putting in our variable. So I’m going to say before-inset and then I’m going to come down here and I’m going to say after we got to get rid of these, write the word in-set after-inset variable and there we go.
0:36:10
So now I’m going to hit save. We’re going to come up here and we still have both of our boxes, both still in the correct position. Now we do need to test this out. So what happens if I say before-inset top of actually the left will probably be top, right, bottom left. So let’s do a top of 5m and a left of 5m. And let’s see where it puts this box. So I save, refresh. Look at that. It moved the box over there and down a bit. So our in-set control is absolutely working. I’m going to set this back to zero and I’m going to set this back to zero. Do you guys see how, when I said a little bit ago, did I know all of these things that were going to be needed before I built this thing? No. We’re figuring it out. You got to go step by step, piece by piece, progressively work to where you want to end up. All right. So we’ve got our before-inset and we’ve got our after-inset. We’re going to come down here. What else is left? My gosh, our background color. So we’re going to say before-bg 3 and this is going to be var action. Okay. Now this is a little trippy, a little inception-y. You’re like, whoa, you created a variable that references another variable. Yes, absolutely. You’re going to see this all the time. So I’m giving this variable additional context for where it is used, right? So this is for the before-background color and it’s using var action as a value.
0:37:46
It could use anything as a value. Okay. Well, I’ll show you. Let’s go down here. Background color. We’re going to replace with the variable before-bg. Now watch this. I come up here. I can change this from action to red and it changes to red. I can change this to secondary using another variable and it’s going to change it to the secondary color. I can say it’s going to be purple. All right. And now it’s a purple box. So give me the ability to quickly change the color on the fly. I want it to be var action and then what I want to do is grab that, bring it down and say that this is the after-bg which is secondary. Come down here. Here’s before-bg and then background color is going to be after-bg. We still have not gotten to the magic yet, guys. All right. Stick with me. I know we’re doing it. We’re just checking boxes, right? But we’re about to get to the magic of locally-scoped variables. Okay. So opacity. Of course, opacity. Very important. Before opacity. And I’m going to say that this is 0.12. Okay. That is the value for before opacity. I’m going to bring after opacity down and that’s also B.12. It could be anything. It could be different. And now what I’m going to do is replace the value with the token. So this is going to be before opacity. If I could type, wow, if I could type correctly. And then I’m going to come down here. Actually, I need that whole line. Oh, yeah. No, I didn’t. But whatever. After opacity, it’s safe. Now we’re good.
0:39:26
What about our Z index? This is a decision. A business decision. Do you need to be able to change the Z index? I personally don’t right now. If we ever need to in the future, we can add the ability to. The rotate. Oh, big one. Big one. Gotta do that. Okay. So I’m going to say before rotate. And this is going to be minus five degrees. This is our value. And then I’m going to copy that. Bring this down. The after rotate is going to be a positive five degrees. And then I can replace this with my token. So this is going to be before rotate. And then after rotate down here, where’s my, where’s my rotate? Rotate rotate rotate. Oh, there it is. Wow. All right. After rotate, safe. So I’m really, I have variables for everything. It looks like everything that was important. I’m good to go. Okay. So let’s just say, can we still see our boxes? Yes, we can. Okay. Now let’s actually set our blurs back to the way that they were supposed to be. So before blur needs to be 50 pixels after blur, needs to be 50 pixels. And now guys, we are ready to talk about the magic. Now you might be like, wow, this is a lot of work. And but remember what I said is I need to use these blurs elsewhere. I’m not just doing this for this one image. I’m doing this so that I can use these blurs anywhere that I want. And they can be any size. They can be any blur. They can be any opacity. They can be any color. They can be anything. Any of these things that I’ve made tokens for, they can be different on an individual basis, but they can be created from this one class. Really, really, really important technique. Okay.
0:41:14
All right. So we’re going to save our work and we’re going to take a look at what we’ve got. And that is almost a direct replica of what was going on here. I think our box down here is rotated a little bit differently, but you get the point, right? We basically recreated what you see there. So now what I’m going to do is I’m going to create some additional sections. And you can do this on a section. You can do this on another element. It doesn’t really matter. I’m going to do it on the bottom section down here. And what I’m going to do is pop in that class of blur. And I’m going to hit save and we’re going to go refresh the page. There it is. So you can see the red box right here. And what I’m going to do so that you can see, well, this will make it easy. This will make it easy. And you can see our in set is a little something’s a little backwards, a little different here. All right. We got to figure out what’s going on exactly. So I’m going to come down and take a look at this section. So here’s the class of blur. And I can see all of these things here. Now what I’m going to do, you don’t have to use all of them again. You really only use the ones you want to change. All right. But I’m just going to copy them all. I’m going to copy this whole root function right here. And what I’m going to do is I’m going to click off of the class. And now because this is a one off instance of how I’m wanting to change these things, I’m going to change them at the ID level.
0:42:38
And here’s the magic of locally scoped variables. I can take this out right here. And I’m just now looking at my variables. Any changes that I make here will only occur to this one off instance of these blurs. It will not affect my other blurs up here. Okay. And this is why I said, you should write all the CSS in one place because anytime you add this class, even three months from now, like you’re not going to remember all these variables, what they are three months from now. But the minute you add a class to an element, like a new element, like this section down here, the class of blur, all you have to do is look, they’re right there. It’s just telling you, here are all the variables that are available to you. You copy them, you take off the class, you paste them at the ID level, and now you can change them. And you can manipulate and create new accent blurs or accent blobs or whatever they are for this one specific context without interrupting any other context that was ever created before this time. Okay. So let’s prove this. So our blurs are going to go to zero. Okay. So we’re going to say blur zero zero. Our after we don’t even want to see it. So we’re going to change the display to none. And that’s going to go away. Are then really none of these other variables matter here. Once we do the after of none, we can just take away everything else. So now I come in and I’m just messing with my before. So I actually want to change the rotation to minus 15 degrees. And then our before opacity, I want it to be 22%. And then I want the inset to be from the top.
0:44:17
Let’s do two M and then two M from the left as well. So I’m changing that. I want it to be a little smaller. In fact, I want it to be a percentage of this container. So we’re going to do percent 30 and 30. That’s fine. Actually, let’s do let’s do a VW and VH here. Perfect. And then I want to let’s blur it again, but just a little bit. Okay. So 20. I’m just let’s change its color. I’m just trying to show you that we can do anything that we want here. Okay. There’s red. And I’m noticing the only thing that’s not working is the rotation. So before rotate a minus 15 degrees. So I’m just going to come in and inspect what we’ve done with the class here. So transform. Ah, there’s there’s what’s going on. I got rid of my rotate function. So my variable needs to be inside of that rotate function. Did I do that down here? Transform. I did that down here as well. So rotate, open, and then put my variable. And so you’re going to run into little problems. You got to be able to kind of diagnose real quick and see what’s going wrong. And now let’s refresh. Look at this. I added a class. Okay. And you can see the blur is here or added with that same class, but this looks completely different. And the after is gone. I have independent control. I can put these blurers anywhere that I want, manipulate them any way that I want using these locally scoped variables at the ID level. Why does this work? Because ID styling always overrides class styling. And this is just how variables work in general. Basically you’re redefining the token at a on an element, the ID that has greater priority over where they were defined at the class level. They still have access to each other. And even though these are child elements, they still have access to the parent’s variables.
0:46:18
And because these are locally scoped, you don’t even have to worry about the names. You don’t have to give them super unique names. Because it’s like, what if I use these again on a different class? Doesn’t matter. Because they only apply to the class that’s active. Okay. They’re not going to manipulate. They can’t reach into other classes and change the values of those classes. Because they’re scoped at those other classes. Right? So it just works perfectly. It gives you tremendous control versus having to recreate new classes, copy all this existing code, repeating yourself over and over and over again. And then manipulating these on a class by class by class by class basis, I don’t think that’s a good solution at all. I want one class to add these elements. And then I want to use locally scoped variables to manipulate their display, their behavior, their style, all of that. Okay. So this is the technique that I use, Gary.co. Again, I haven’t seen anybody else doing this. It doesn’t mean that nobody else is doing this. I just ran into the problem of, I want to use these blurs everywhere. But I want to change how they behave. I want to change their position. And by the way, let me say this again, I mentioned it briefly in the beginning. If you want to use G-SAP to animate objects like this, you can absolutely animate objects like this with G-SAP. You’re going to need to use locally scoped variables to change the variable value with G-SAP.
0:47:42
So this is not a situation where you can animate these just with classes. Okay. If for the most part, the variables are going to make G-SAP life way better, way easier, if not like being the only effective way to do it. So this is, like I said, critical technique. Okay. We’re going to close this up. Let me go back to camera here. Hopefully you guys got a ton out of this. Hit the like button if you did. If you’ve got a tremendous value out of this, hit the like button, drop a comment below. This is something that needs to be in your toolbox. Yes, we applied the concept of locally scoped variables and ID overrides and things like that to this one task. But this is something that will come in handy over and over and over again. Once you understand it, once you know it, when we’re building frames, for example, in our product called frames, it get frames.io, we’re using locally scoped variables all the time. In fact, you should think about using variables anytime you find yourself repeating yourself in CSS, which happens a lot. You should be using probably locally scope variables instead. Or of course, global variables help as well. Anyway, hope you guys love this. Again, drop a comment. Let me know you liked it. And don’t forget every single Wednesday 11 a.m. Eastern right here on this channel is my web design for Dommy’s live series. We do live in depth website critiques covering everything from UX UI to SEO to dev best practices to copy writing and conversion. Everything that is important on a website, we provide unprecedented value. There’s nobody else providing this level of value that we give on web design for Dommy’s free every single Wednesday at 11 a.m. So make sure you join and watch that series. I hope you guys have a fantastic week. I love you. Thank you for the support. I’ll be back very soon. Peace.
