0:00:00
What is up my inner circle friends and family? Welcome back to another advanced tutorial. I want to give you the background on why we’re recording this tutorial. But before I do that, I want to say this very, very important. You can do this tutorial in bricks. You can do it in oxygen. You can hand code it. You can probably do it in any builder. It is going to be a advanced tutorial, a really valuable tutorial. But I also want to say this, if you feel like you’re more toward the beginner side of things, do not be afraid of this tutorial.
0:00:33
Do not shy away from tutorials like this. Follow along. I’m going to go slow. I’m going to explain every step so that we’re all learning. There’s going to be a lot of things that even intermediate and advanced users have not encountered before. And I think this is going to be just pure value for everyone. And let me tell you why we’re here. Okay. I’m going to share my screen. I’m going to open this website right here. I do something called web design for dummies every single week live on Wednesdays at 11am where we deep dive critique various websites. And this is one of the websites we were looking at last Wednesday and we came across this, this like image concept where it’s like a cutout image, but it’s got this like blob in the background.
0:01:17
It’s got this accent blob over here and over here. And if you scroll down, they do it again, but it’s different. And if you scroll down, they do it again, but it’s different. Very cool. Right? The problem with it is look, it’s a single image. All of this is done in Photoshop. And as I was explaining in web design for dummies, you know, it’s great that they achieved the, you know, visual outcome that they were trying to achieve, but they did it in a non-scalable, non-maintainable, non-flexible way. And the general principle that I repeat over and over and over again is stay out of Photoshop, stay out of Illustrator, like as much as you possibly can, make things in CSS if it can be achieved with CSS.
0:02:00
Because here’s the thing, you cannot edit this blob color on the fly, you can’t access these blob colors on the fly, you cannot change the blob structure on the fly, you cannot animate these. There’s a lot of things you just simply cannot do when these are static images, not to mention, if the brand colors ever change, if the client ever decides, hey, you know, as I mentioned, Bev in accounting is like, hey, I don’t really like the yellow we want to change that but you’ve already created 40 of these guess what you have to do open all 40 in Photoshop again change the color individually on all 40 of those export all 40 of them re-import all 40 of them into WordPress go to each specific one and swap out the file okay unless you name them all perfectly again which is another excuse me and it was choking me up.
0:02:49
Did you see that? Like, even just explaining it, my brain was like, stay away, just don’t even talk about this, okay? It’s terrible, it’s absolutely terrible. So we need to do it with CSS. And I’m gonna teach you how to do it with CSS in this tutorial. And we’re gonna do it two different ways because it turns out there’s some pros and cons to the different methods, you know?
0:03:12
As with many things in CSS and HTML and web design, you can achieve the desired effect more than one way. But also as is true in CSS and web design, each side has different pros and cons. It’s your job as the expert to kind of weigh those pros and cons and figure out, okay, for this situation we can get by doing this, but for this situation, we really need to go this route because we need this thing to happen as well. And so we’re going to cover the pros and cons as we do this. We’re going to go slow. We’re going to make sure that everybody can follow along. And, um, you know, as I mentioned, this is going to be pure value for everyone.
0:03:50
We’re going to do these two techniques side by side. Okay. All right. So I’m going to go into the builder. I’m going to add a section. We’re going to make this a two column grid. That’s just for our side to side, you know, image. This is not part of the tutorial. OK, and then we’re going to do a gap of M and we’re going to do a grid of L1 to make sure it’s nice and responsive. OK, and then I’m going to put two blocks in here, so we’re going to do a block on the left and a block on the right.
0:04:16
This is going to be a cut out image. Alright, and then in parentheses I’m going to say no mask and then this is going to be a cut out image. Cut out image and this is going to be with a mask. And those are the two techniques that we’re going to do. So the masking technique is going to be a little bit more complex. And so we’re going to do it second. We’re going to start out easy, start out basic, and then we’re going to move our way up to the, you know, more advanced stuff. But this no mask technique, you know, when, when I, when I was looking at it initially, I was like, well, you can easily do this most likely with a mask.
0:04:50
But you know, then I got to thinking about it and I was like, can we do it without a mask because that would be, you know, a mask is, you know, obviously more complex and there’s some cons to a mask like it’s not easily changeable. Okay. And the technique that we’re going to do, which doesn’t require a mask is kind of easily changeable except you are kind of limited on how much you can change it. So we’re, again, we’re going to go over the pros and cons, but I think if you can get by without a mask, it’s really good to get by without a mask. Okay. It’s just like unnecessary complexity. All right.
0:05:27
So we’re going to do a no mask version and we’re going to do a mask version. All right. So I’m going to add an image to each one of these. We’re going to grab this, grab this, and I’m going to use the exact same image for each one. And I’m gonna throw this image over here as well. And you are gonna see that the necessary DOM slash HTML structure is gonna be different depending on the technique that you are doing. And we’re gonna be able to see these nice and easy side by side.
0:05:54
The other thing I’m gonna do, because we don’t need a container that’s quite this wide. So I’m gonna do a width of L and bring this in and these. That’s about a perfect size right there. I do think actually let’s do a width of Excel and I want a much bigger gap between these just so we have plenty of space to work with. So let’s do a gap of XXL. All right, and then maybe a width of, I’ve already doing, okay.
0:06:22
Let’s just put a normal width on here, just a layout width and let’s do 80 rim. That’s pretty good. All right, let’s go with that. Okay, let’s just look at this on the front end, make sure that we’ve got a nice clean starting point. There you go. So this is going to be the no mask version. This is going to be the mask version. Remember this, something like this is what we are trying to achieve. Now, it’s always going to be dependent on the cutout image you are using, which also brings up the good point of we need to be able to adjust these things per use. We cannot design something here or build something here that can only be used one specific way. We have to make it editable. And editable, I like to make it editable and editable, not edible, ooh no, not editable.
0:07:09
Editable in three ways. One is globally. I can change all of them at the same time if I want to. Second is contextually, which means I can give them each maybe a modifier class and that modifier class can control groups of them. That would be cool. Like all my blob cutouts on the service page, it has a green background. All my blob cutouts on the testimonial page have a purple background. I can control them individually, which means I can also change the individual styles on a one off instance of this thing.
0:07:46
And so that’s the three ways that I always want to maintain control over stuff like this. And I’m going to show you exactly how we do that. Okay. All right. So what we are going to do first, we’re going to tackle the cutout image, no mask side. So I’m gonna do cutout image, and I’m just gonna use that as our class, okay? And then this is gonna be cutout image double underscore image, because this is the actual image that goes in our cutout image, okay?
0:08:17
And we’re going to put that class on there. Of course, we’re always using BIM to keep everything nice and organized. And then what I’m gonna do for simplicity, but also I would recommend you do this, is I’m gonna style everything in the custom CSS panel. When you do a technique like this, it’s already kind of advanced. It’s already, you’re gonna be spreading styles out across multiple elements.
0:08:44
And you’re gonna see over here, we’re gonna get even more elements going on here that are gonna be necessary. So I love to have all of my styling in one place. So either use an external style sheet like code box or do what I’m doing here in bricks and, and putting my, all my CSS in one place, which I’m going to put this at the parent class level because I can control the children from the parent. I don’t want to be going element to element panel to panel doing all this stuff. It just, everything gets scattered. It’s an absolute nightmare You can’t see what’s going on at a glance So I do not I would highly recommend do not scatter these styles across these panels It’s much much much better easier faster Everything less headaches to just write the CSS yourself if that scares you good Let it scare you into getting better. Okay? And just type along with me. All right. So here we go. The first thing we’re going to do, take both images and make sure that they have figure tags.
0:09:47
What happens when you add a figure tag is that it actually wraps the image in the figure tag. So I’m going to refresh this. I’m going to go ahead and inspect. And then I want you to see there’s my image, but it’s wrapped in a figure tag. Now we’re going to have to use pseudo elements to accomplish what we are trying to do. However, image tags like this one right here don’t support pseudo elements. But the minute you wrap it in a figure tag, guess what? The figure tag is just like a div, it does support pseudo elements. So we’re gonna get basically two sets of pseudo elements.
0:10:24
And this is kind of why I’m wrapping this in a container called cutout image and then putting an image inside of it. Could I achieve the cutout effect without the wrapper? Yes, however if we look at the example what about these two things? These two things are a problem because they need to be pseudo elements as well. You only have two pseudo elements per element available to you. You have a before and you have an after. You can’t do a before before or an after after or anything like that, at least not yet in CSS. So we need this blob back here to be one pseudo element. And guess what?
0:11:01
That leaves another one attached to the image, but we actually need two more. So what we need is a wrapper that’s gonna give us two extra pseudo elements, okay? All right, so here we go. We’ve got our classes set. We’ve got our figure tag set. Did I set this one as a figure? I did. I don’t want to end up forgetting that. Then I’m going to go to cut out image right here.
0:11:21
The first thing I’m going to do is I’m going to come down and I’m going to write root which basically just references the class that I have active. I’m going to say, hey, everything inside the root, you get width 100 percent. I don’t want any messing around with like the widths aren’t right or anything like that. I just want to make sure that everything is kind of forced to being 100% width. Right now it appears that was already the case, but an image, especially a tall one like this, may not take up the full width of the container you’re working in. This will always make sure, and by the way, if you don’t know what’s going on here with this bracket star thing or this caret, it’s telling you to select all, this means all, okay?
0:12:01
The star selector means everything basically. And this means direct. So all direct children of the root. So the cutout image is right here. There’s only one direct child right now, which is an image. So that is all of them. And it’s gonna be setting the image to 100%, okay? It’s just another way to target child elements. Could I do this? Could I say cutout image, double underscore image?
0:12:27
Absolutely I could, but I feel like it’s cleaner to just do this because if I add anything else in there then it’s all it’s going to make that 100% width as well. Okay so just rock and roll with me here we’re going to keep going. Now I’ve got everything to 100%. The first thing I want to do is let’s try to get the first pseudo element on the page. Just get it. I don’t care what shape it is, just get a pseudo element on the page. So I’m gonna do root and I’m gonna do before. So we’re gonna use a before pseudo element and I’m gonna say content is blank. Anytime you do a pseudo element, you have to use the content instruction.
0:13:04
And if you don’t actually want content, like see there’s an A up there now because I put A, you can just leave it blank. If you’re doing like a shape or something like that, you don’t need anything in the content field. The content field has to be there, but you don’t have to put anything in it, okay? Let’s keep rocking and rolling. I need to give this thing dimensions. So we’re gonna go width of 100%, if I could type, okay?
0:13:25
So width 100%, height of, now this, imagine a box, we’re just gonna put a square, okay? So imagine the square goes all the way across, but now how high is it? Well, I want it about yay high, right here, okay? I can’t put yay high. I wish I could. I wish I could put yay high, but I can’t do that. But I can put something like 60% which is, it doesn’t matter how tall this image is. It’s always going to be like, all right, I see you. I’m going to be about 60% of you. Um, so it’s, it’s kind of a good idea to use a percentage value in this type of situation because you don’t know what the dimensions of the image that you’re going to be using are.
0:14:05
The next thing we’re going to do is give it a background color, because you can’t see it if it doesn’t have a color. Right now, it’s like a transparent box. We’re going to do a background color of var, and then we’re just going to use a automatic CSS utility here. Then we actually have to position this thing before we can see it as well. We’re going to position it absolute. And then we’re going to give it some coordinates. And so I actually want this to be at the bottom of the container like that.
0:14:35
And that’s it for right now. Now, you’re probably wondering, like, Kevin, that’s looking weird. It’s like it’s going all the way across the screen. You’re right. 100% it is because it’s set to width 100%. And it’s not anchored to a parent. So it’s actually anchoring itself to like this inner container or the section right here. Actually, yes, it’s the section or even the browser window that it is. Whatever the next positioned element is, is what it’s going to anchor itself to. I want it to anchor to this cutout image little block right here, right?
0:15:08
That is our root, our cutout image. So I’m going to come down here, I’m going to say root, and we are going to position that root relative. And now look, we have a box. And guys, we are, we’re well on our way. If I do say so myself, we’re well on our way to having a little blob effect thing going on here. Okay. So the next thing that we’re going to do is we are going to blobify it. Let’s blobify it. Now, how do we blobify it?
0:15:36
This was the question I kind of proposed to myself. How do we blobify it without an SVG, without a mask, without any other shenanigans? Like pure CSS, how do we blobify it? And what I thought of is let’s just use a border radius. Okay? And so border radius is an interesting thing because you may know border radius as, you know, top left, top right, bottom right, bottom left kind of thing. So if I do let’s say like 1M, 1M, 1M, 1M, 1M, like that, obviously we get rounded corners on our box here. Now that’s not very blobified, is it? Not very blobified, okay? So what we need to do is figure out how else we can blobify it.
0:16:20
Well, if you did something like this, where it’s like uneven border radius. Oh, it’s getting a little bit more interesting, but it’s still not going to work. That’s not blobified nearly enough for my taste. Now let’s get into the cons of this method. Con, biggest con of this method is the aggressiveness of the blob is limited. You’re going to be able to blobify this, but not a ton. Okay. Um, but again, this is still going to give you a really, really clean look and it may just be perfectly fine for you. You’re like, I don’t need an aggressive blog. I just want, by the way, if I say blog or if I write blog, my brain is, I’ve been blogging since like 2005, okay?
0:17:05
It’s very difficult for me to say and type blog without saying blog sometimes or typing blog sometimes. You might see that happen, okay? But again, we’re gonna create a really clean look here and you’re going to be like you know what I like that clean look. I don’t want an aggressive blob. But if you do want an aggressive blob you’re going to have to do this technique over here okay. So this left side is for the non-aggressive blobs and the right side is for the very aggressive blobs okay. All right so let’s keep going. So there’s a secret okay well actually before we get to the secret, let’s talk about Ms versus rims versus anything else versus percentage here.
0:17:45
When you’re creating this blob effect with border radius, I’m a big fan of using percentages, okay? And so look what happens if I turn these into percentages. And I’m just gonna, guys, I’m just making up numbers, okay? 42%, just absolutely making up numbers. I’m going to hit save refresh again, not very blobby. Okay. But look how percentages work and they start to get very aggressive. And now if it was like, if we could just kick it up one notch, we might be close enough to where we need to be. Well, guess what?
0:18:22
With border radius, you can kick it up one, exactly one notch. You can’t kick it up two notches or three. You can kick it up one notch. And that’s why I said you can’t get too aggressive here. Okay? All right, so the way you do this by kicking it up a notch is you put a forward slash and then you define another set of variables. And we’re gonna go like, I’m just guys, I’m making up numbers here.
0:18:44
All right, 22%, 32%, 18% and 37% I don’t know. All right, now let’s save and let’s see what we’ve got going. Okay, suddenly we’re getting a little bit more blobby. Okay, now I can go 24 on this. Let’s bring this up to 35. You see that’s on the right side over there. It’s still top left, top right, bottom right, bottom left. So like this one would control that bottom left. I want that bottom left to be more aggressive. I can just start tailoring my numbers to the blobby shape that I’m going for.
0:19:22
So this would be another top left coordinate. Again, if I bring this into 42 suddenly it’s, it’s rounding more over there, but I don’t know if I want it to round that much. Let me go to the other side, maybe the other side. I want it to be a little bit more aggressive like that. And then this bottom right side, let’s be, can we be more aggressive over there? How much more aggressive can we be? Let’s do 28. And then where are we at here? Oh, that needs to be like, super aggressive, like that. Okay. And you know, you’ve got to play around with these, you got to get to the exact shape that you want to get to. Um, and this is not probably where you can look at a blob like this. You can’t look at a blob like this and be like, I’m going to make that with border border radius does not have, it’s got, I said, it’s got some limitations. This is an aggressive blob structure. Okay.
0:20:17
This is just going to give us some, something that’s very clean. All right. So we’re just going to rock and roll with this again. You, if you don’t like my blob, it’s perfectly fine. You don’t have to write me. You don’t have to comment about my blob shape, you don’t have to do any of this. Just make your own, just tailor these numbers to whatever you like, okay? I’m just throwing out random shit to teach you guys a technique, okay? I’m not trying to make the best blob in town that’s ever been made with the border radius property, okay?
0:20:45
All right, so what we’re gonna do is now we’re gonna figure out our problem. Our problem is, let me refresh this, our problem is, I’m sticking out of the blob, okay? The blob is not cutting me out of anything. And that’s, that’s, that is kind of a problem because, you know, the cleanliness of this is because, you know, if, if this guy was over, like coming out, he was like spilling out of the blob, this wouldn’t look so sharp, right? It only looks sharp because the blob is like cutting him out. And then he appears to be sticking out of the top of the blob. So how do we achieve that?
0:21:21
Okay, really, really good question. So I’m gonna come back up here to this root level right here. And I’m just gonna ask myself, actually, hold on, let’s think about this for a second. Okay, here’s the image right here. All right, we’ve got our blob as our pseudo element in the background. What if we took this exact border radius and we put it like as the border radius of this image right here? Let’s just, hold on, and Bricks is breaking on me here.
0:21:54
All right, let’s go down here. So let’s just take this and let’s bring it up here and say, bam. And then, you know what, we have basically the same what what amounts to get very similar. It’s not exact Okay, because this border radius actually stretches way up here But this is gonna also help kind of our blob of our blob enos a little bit And then you’re seeing the outline the question is why isn’t it doing anything? Why isn’t it like I put a border radius on this guy right here? Why am I still seeing the parts of me down here that I should not be seeing? Well, we need to put an overflow and we’re going to say hide our overflow. Now let’s hit save. Let’s see what we’ve got. Bam. Look at that.
0:22:37
Now we’ve got our cut out effect right away. The challenge here is sometimes you run into this problem where it doesn’t match up exactly. It looks a little sharp and this is another limitation on using this border radius property But again, if I can get this rounded out a little bit I mean, this is still a very clean look and I still have two other pseudo elements that I that I need to add Okay. All right. So here we go let’s do this first of all, we have violated a classic Principle which is don’t repeat yourself. D R Y dry. You want to stay dry. Don’t repeat yourself. We repeated ourself with the exact same border radius instruction here. We don’t want to do that.
0:23:23
So what we’re going to do is at the root level, we’re going to create a locally scoped variable. We’re going to actually end up creating a lot of locally scoped variables for this, but this is going to be our very first one. And this one is going to be called blob radius. Okay. And so I’m going to do a blob radius of this right here. And then I’m going to take, I’m going to bring these instructions. I actually want these, uh, these locally scope variables to just come first so I can keep them nice and organized. And then what I’m going to do is paste those instructions that I had before down here. And then I’m going to remove this and I’m going to just going to reference my blob radius. Okay. See, I typed blog.
0:24:04
We’ve got to be careful and not do it. Cause that will break things. Now I’m going to copy this, bring this down here and I’m going to do this. Now what has this done for me? Well, let’s look on the front end. Notice nothing disappeared, nothing changed. It’s all still there. It’s all still working, but I can now adjust my blob from one central location. Okay. So now I’m looking at this top left. I’m saying hey that needs to can we round that out a little bit more How do we do that? Okay? It’s actually the bottom left one So this is top left top right bottom left, so let’s go 30. Oh, that’s bottom right sorry This is bottom left 32 so now if I round that out a little bit more we can get a little less sharp up here And I also need to do this one as well, so there’s a 47 30 so now now we’re getting less sharp Okay, let’s check it out. Ah Now we’re looking much smoother, right? Okay now could we potentially?
0:24:57
Well, let’s not let’s not go into that detail yet Let’s take care of our other pseudo elements because there’s something that we also have to do here. We’ve run into an issue. We have put a pseudo element on our cutout image right here. And I actually need this cutout image wrapper for our other pseudo elements. So what I actually wanna do is put the pseudo element on this image right here, cutout image image. And I can only do that, remember, I can only do that because I set this as a figure. I put it in a figure tag, okay?
0:25:38
I went to the content area, I uploaded the image and I put the HTML tag to figure. So what I can actually do is I can move this pseudo element. So I can say, hey, instead of putting it on this wrapper right here, why don’t we put it on the cutout image, double underscore image before, and there it is. It’s just attached in a different place. And because I’m attaching it to the image, I now need to just change its layer that it’s on.
0:26:07
So right now it’s on the top layer. That’s why you see it on top of me. I need to force it to the bottom and we’re gonna do that with Z index. So Z index of minus one. And then to make sure that there’s no shenanigans here, I need to come to the parent item right here. And I need to say, this is going to be an isolation of isolate, which reconfigures the stacking order to begin at this image, okay, and go from there up.
0:26:34
So now I’m gonna be able to put any other background colors or anything like that, because a Z index of negative one really forces that item behind everything. So if I added like a background color to this section, sometimes your pseudo element that is Z index negative one will just disappear, it’ll be gone. It’s actually behind the canvas. So we have to change the stacking order of the element that we’re working on to say, hey, instead of the Z index starting from the canvas and going up, it should actually start from me and go up from there.
0:27:06
And so a Z index of minus one on an isolated element will only put it behind that element, it won’t put it behind the canvas. All right, if any of that made sense, if you need to rewind and play that three times to get it, do that, all right? Because it’s a very important thing to understand. All right, so you can see that, let’s go ahead and save. I moved my pseudo element, but guys, it still looks like it’s in exactly the same place.
0:27:30
But what this has done is it’s freed up my wrapper to be able to put two additional pseudo elements. So what we’re gonna do here is we’re gonna put a comment and this is gonna say main blob, just like that. There’s our main blob. Then I’m gonna come down here and I’m gonna say accent blob one, all right? Just like that. And then I’m also gonna say accent blob two. Now, could I say accent blob top, accent blob bottom?
0:28:00
I could, but that’s not really scalable because I actually don’t know where these things are gonna be positioned. Remember, we’re gonna have global control, contextual control, individual control. Three different points of control. The number one could end up on the bottom and the number two could end up somewhere on the top. Like we don’t know, so it’s better to just say, hey, this is number one, this is number two, and then rock and roll with that.
0:28:22
So we can put them anywhere we want. They can be any, you know, any shape they want. Actually, we may not even want to call them blobs, but I’m just gonna, for this, we’re doing blobs. I’m gonna go ahead and keep it consistent like that. Okay, so for accent blob one, what we’re gonna do is again, we’re gonna say root, not in all caps though, root before, all right? Remember, I put this before on the cutout image, so I’m free to just, my root level has two pseudo elements still available.
0:28:51
Okay. And same thing. Let’s just get things on the screen. So I’m going to do content is blank. I’m going to do width of let’s do 30 rim. I’m going to do height of 30 rim. I have no idea how big these are supposed to be. I’m going to do a position of relative. Um, and I also, by the way, need to do position relative here. Bam, just like that. Okay.
0:29:12
Uh, because remember when I moved my pseudo element right here, it’s position absolute. I still want it to attach to its parent, which is this. So that needs position relative there. I still need this position relative up here as well for the new pseudo elements I’m adding. So you’re not going to go wrong really when you position something relative, it’s perfectly fine. So width, height, position, no, this is going to be absolute.
0:29:37
It’s another floating thing. Then we’re going to give it a background color of, let’s just do red for right now. Hey, there it is. Then we are going to do, so we’ve got width, we’ve got height. How about we position it top, zero. We’re seeing something else. Look at the problem. This is why we need to troubleshoot.
0:30:01
Let’s just go here. And I already see, even if I can make this a circle, or whatever I wanna do with it, make it a blob, whatever, doesn’t really matter. I wanna do circles for this, because I think the circles juxtaposed with the blob, it’s gonna be a kind of a cool effect. But the overflow hidden is gonna cut off my circles. Let me just show you here. Let me drop this down to 10 rem, 10 rem.
0:30:25
So we got a suitable size circle. We’re gonna go with a border radius of 50%. This is gonna make it a circle. There’s my circle right there. I’m gonna hit save, refresh. Oh my gosh, but it’s being cut off by our blob radius, which is set to overflow hidden on that image. So actually, yeah, it’s set to overflow hidden on the root, which is this wrapper. This does, it can get a little confusing from time to time, especially if you have to start troubleshooting.
0:30:58
Okay, so I’m going to take this off. Now if I take the overflow hidden off, look what we get. We get our circle back, but look what we lose. We lose me. Now I’m spilling out of the container here. Well remember, I moved that pseudo before to the cutout image itself. Okay. So the cutout image right here just needs the overflow of hidden. And I also, by the way, need to take our blob radius and move that so that the, again, remember the parent was the blob radius and the child had the same blob radius, but the parent was set to overflow hidden, which cuts me out and then it just perfectly matches the blot.
0:31:38
Well, it doesn’t perfectly match. You saw we had to make a couple adjustments. Almost perfectly matches the blob that’s behind it, and so nobody can tell that there are two things using the same exact border radius, but what we ran into was that overflow hidden was cutting off my pseudo elements. So now, let me just show you over here in the structure panel. The pseudo, not the pseudo elements, the blob radius and the blob are both happening here.
0:32:07
And the overflow hidden is happening here. But the circles are happening up here. So they’re above or outside of the overflow hidden. The overflow hidden has no influence on them whatsoever. And that’s why how you structure the DOM here is very important. Remember I said we’re not going to be able to get these little pseudo accent elements without an additional wrapper. That wrapper right here gives us these circles. Again, if we didn’t need the circles, we didn’t need the accents, then we could do this all with just this image right here.
0:32:41
But because I need the accents, I need those floating out here on a wrapper. And then the overflow hidden and the blob radius and all of that action happens only with the actual image, which again is wrapped in a figure tag, which gives us a lot more flexibility for what we’re trying to achieve. Okay, so now what I’m gonna do is I need blob number two, accent blob number two. I’m gonna pull this out a little bit. So accent blob number one is right there and I’m gonna come down here and this is gonna give me, oh it’s it’s messing up again with where I’m able to click. Okay, let’s come down here, accident blob two, and what just happened? Okay, let’s try that.
0:33:21
Did I not copy this correctly? I guess I didn’t copy it correctly. All right, accident blob two. This is gonna be an after, and then we just need to position it differently. So how about we do bottom of zero, there it is down there, and we can do a right of zero, which is gonna tack it to the right corner over there. And we’re just going to hit save and then see what we’ve got. Perfect. All right. We’re I know it looks terrible. I know we’re getting there. Okay.
0:33:47
We’re getting there. All right. Next thing I want to do is I want to start adding to our locally scope variables because I’m doing a lot of repeating myself. I am not very dry right now. Look, I’ve got width and height of 10 rem here, width and height of 10 rem here. I’ve got a background color of red, a background color of red. I’ve got coordinates. And here’s the thing too, is when I come to edit these things, it’s not just about not repeating yourself.
0:34:14
It’s also about editability. So I can quickly move very fast. I can change blob colors, change blob shapes, do a lot of different things on the fly. And it’s the locally scoped variables that give us those three levels of control. So global control, contextual control, individual control, not possible without locally scoped variables. So I want to locally scope as much stuff as I possibly can. All right. So what we’re going to locally scope here, we’ve already done the blob radius. How about we do a accent blob one Accent Blob 1, width and Accent Blob 1 height.
0:34:55
Let’s do, I’m wondering if, see for my example, a circle is always the same width and height. If you need something different, you’re going to need to do this on your own. For my purposes, what I’m going to do is create a Blob Accent 1. Is that what I called it? Oh, I called it Accent Blob 1. it accent blob one okay accent blob one height uh sorry size i’m gonna do size we’re gonna do 10 rim just like this okay now what i’m gonna do is i’m gonna take that locally scope variable and i’m gonna come down here to wherever 10 rim is i’m gonna replace it with accent blob one size okay and there is my accent one blob still working perfectly fine i’m actually going to copy this instruction, bring it down here, but this is accent blob 2.
0:35:41
So I’m going to do 2, 2, and then up here I’m going to duplicate this and change it to 2. And now I can control my blobs independently. Check this out 20. 5 look at that save again. I know this looks absolutely terrible, but look at the control that I have and look at how quickly I’m able to just make changes on the fly. Okay. 10 REM. Let’s put this back.
0:36:08
Let’s actually make this 16 and 16. I think we’re going to do something like that. Uh, maybe 14 and 14. Okay. Now I don’t want these to be read obviously. Okay. So what I need to do background color, I need a accent blob one color. I’m trying to keep all the naming conventions exactly the same. This is going to be var accent and I’m going to do number two while I’m here. OK, blob2color is going to be accent as well. And then I’m going to come down here and let’s just grab this variable accent blob2color and we’re going to go down to accent blob1.
0:36:49
And this is why I like to label them if you notice, because it’s easy to find the stuff that you’re working on. So this background color is, oh dear. I hit command Z. Okay, background color primary. Okay, here’s our blob one background color red. We want it to be this right here. And this is going to be blob one color. All I’m doing guys, this is not really complicated. I’m just mapping locally scoped variables to wherever they are supposed to live in the CSS down below.
0:37:22
And so you see I’m missing blob number one. So let’s go analyze blob number one’s background color, accent blob one color, accent blob one color, var accent, var accent. Okay, that should be good. What else is wrong with it that it’s not showing up its content looks good Ah bar size right there. Okay when I did that command Z it messed up this variable Okay, there we go. Save and Refresh. Oh, okay. I’m liking it. I’m liking it. So now what we’re gonna need is Accent I’m gonna say I like to do this a lot to put comments inside my locally scope variables.
0:38:04
So this is accent blob one controls, and then this is accent blob two. Okay. So now my styles are separated and they don’t merge together. It’s very, it’s just a lot easier to keep track of them. Okay. All right. So accent blob one top. So this is going to be my position from the, or actually, okay, we can’t even do that because again, I don’t know, do I want it to be from the top? Do I want it to be from the left? Do I want it to be, so what do we do?
0:38:35
We call it inset, accent blob one inset, and then what we actually have to do is position it with inset coordinates, okay? Again, it’s just like the border radius, it’s going to, we’re going to give four coordinates here. Okay, so we’re going to say from the top of zero and then from the right of auto from the bottom of auto from the left of zero. Okay. And that’s going to position that that’s blob one inset. And then we’re going to do accent blob two inset. And this is going to be again, top auto right is zero for now. Okay.
0:39:09
We’re just trying to get them in the exact same positions that they’re currently in. Bottom of zero, left of auto. All right, save. Now, the question is, if we take these insets and we remove accident blob one, we want to get rid of this top and we want to give this an inset and then give it the variable that we just created and make sure that this is blob one inset not blob two inset. Copy this bring it down to blob number two bottom and right go away drop in the inset make sure it’s referencing number two because this is blob two. I hit save I hit refresh same exact outcome that is amazing because now I can come up here and I can use this these coordinates right here to actually position my blob. So from the top, I want it to be 15%, but it’s actually perfect.
0:40:06
And then from the bottom, I want this one, accent blob two. So remember this is top right, this is the bottom value right here. Actually I think it’s fine from the bottom. It actually needs to go from the right, negative 5%. How about negative 15%? Let’s do negative, ooh, negative 20. Let’s do negative 20%. Kind of pull it over there.
0:40:29
Okay, perfect. And then I actually need accent blob one Z index. This is gonna be a minus one. And then I’m gonna do accent blob Z index of minus one as well. This is gonna be number two though. Okay, let’s grab this. Let’s go down to our blob one, give it a Z index, a var, and then drop in our variable.
0:40:57
Make sure we’re referencing number one for number one. Grab this, accent blob two. Look at that. Now it went behind our blob over here. That’s actually fantastic. Exactly what I was looking for. And we can actually move it down a little bit. So let’s go back up to those bottom coordinates right here and say minus 5%. And then we don’t have to be so aggressive with how much we’re moving it over. Let’s do that. Save, refresh.
0:41:25
Look at that. Woo! We are making progress, my friends. Okay. Now, I made another mistake, which was defining these backgrounds as background colors. Because what if we don’t want a solid color? What if we want an image? What if we want a gradient? Okay, if we use background color, we’re stuck with colors. If we use background, we can put anything that goes in the background property.
0:41:53
So yes, these can be images themselves. This main blob can be an image. These can be gradients. In fact, let’s make this main blob a gradient right now. So I’m going to go up here to our blob radius and we’re going to do our blob background. And then we are going to say that this is a var primary because that’s what we already have. We just want to make sure that we don’t break anything. So I’m going to take blob background. We’re going to come down here and this is our main blob background.
0:42:24
So the background is now var of blob background. Hit save, refresh, nothing is broken. Now I can go play around with it. So what I’m gonna do is my blob background, remove all this, and I’m gonna say linear gradient, and this is like a function, so you put it in parentheses. And then let’s just say red and blue, and look at that. We have red and blue. But what I really want are my color palettes from ACSS. So I’m going to do a secondary medium and I’m going to do a var secondary dark.
0:43:03
Hey, this is getting pretty sexy now. Now check out these little circles right here. Those are our accent color. I’m going to come up here and do BG. Yeah, accent. Let’s do ultra light, as our background for this whole container. Save, refresh. Oh boy. Now look what happened with our background color made our pseudo elements disappear.
0:43:28
That means we have a negative Z-index issue, which means we need to isolate something. We’re going to go problem solve this back to the CSS tab. We do have isolation isolate on our cutout image. Let’s take, no that’s good, oh dear, you know the the command Z in Brics is a little dangerous. Okay so isolation isolate there. What do we have it on our main root? Root? Let’s isolation isolate our root. Hey and we’re back and we’re fixed. Okay, so we just need to isolate our, remember we isolated the image because we have this main blob attached to the image and it’s behind, so we don’t want it to disappear, but we also need to isolate our wrapper because our wrapper has these circles and those are gonna disappear if they’re negative Z index unless we isolate our wrapper.
0:44:26
Okay. So this isolation isolate comes in really, really, really handy. So let’s refresh. Hey, look at what we’ve got. And again, is this an aggressive blob? No. I said, if you need an aggressive blob, we’re going to need a different technique, but look how clean this is. I mean, this is much better than just popping an image on a page, right? It’s still got a lot more life to it.
0:44:46
So I would say, you know, this is probably perfectly fine for a lot of different use cases. But if you need to get crazy, then we need to move on to this technique over here. So I’ve really shown you the main technique. All we’d be doing at this point is really just embellishing. I will show you, you know, another form, another step of embellishment, because it is really good when we’re talking about a component that we’re going to be using over and over and over again on the website. It’s good to have a lot of options, you know So the more options you have the better you don’t have to use them But if they’re there you don’t have to go, you know, you don’t have to finagle stuff so much Okay, so what we’re gonna do is add like an outline. Alright, so we’re gonna do accent blob one outline Size, okay, and I’m just gonna put null for a second. There’s gonna be a few properties we need for this.
0:45:40
Blob one, outline style, we’re going to do solid. Okay, accent, I’m just going to, let me, let me just copy this so we can paste. We don’t have to do so much typing. All right, outline color is going to be var accent light. Perfect. So we have the, oh, we need one more. That would be the offset okay, and that’s going to be five pixels just for now Okay, I think let’s just do the size Let’s do three pixels on the size with an offset of five pixels. Let’s just see how that looks okay So what we need to do is now take these variables right here and bring them down to blob one and We need to define our outline So we’re going to do an outline and then an outline is kind of like a border, right?
0:46:28
So you do three pixel solid color, right? So it needs the size first, not in all caps, okay? So there’s the size and then it needs the style. So we’re going to do this and then just change this to style. And this is why you’d use the same naming convention for everything. So it’s very easy to make these changes on the fly. And then we need outline color. Okay, perfect. And then you use an outline offset instruction. And then you put in your var for outline offset. Bam. Now look at that. Save. And we’ve got another little layer to what we are accomplishing here, which is absolutely fantastic. And now all we want to do is extend these to blob number two so just change all these two and then come down here and Grab our outline instructions and extend them to number two and then we just have to change all of these two Two and I missed the Z index one there. So I’m gonna go ahead and fix that while we’re here So we’re gonna do two two two two two. Okay, two This one needs to be a two.
0:47:40
Perfect, now let’s check out down here. Bam, look, we got the same exact style going on down there. You could add a drop shadow to all this. In fact, I’ll show you that because you don’t wanna try a box shadow. In fact, let me show you what’ll happen if we do like the main blob or really the image right here, okay? So let me go back to the CSS tab here So that would be like in my root right here if I wanted to do Or this cutout image right here, so let’s do a box shadow of two pixel two pixel 50 pixel minus five pixel and then you can you can I mean you can already see it right minus five pixel black oh my gosh, what a tragedy a tragedy, absolute tragedy.
0:48:28
So watch what we switch this to. We switch this to filter, and then this is like a function, drop shadow, and then you open the function, and then it just takes less properties, okay? There you go, and we don’t want this to be black. We want this to be, lost a parentheses there. Let’s do like base. Actually, let’s do secondary ultra dark trans 10 or even trans 20, something like that.
0:48:56
And then let’s drop our radius down here to like 20 pixels and then let’s refresh. Hey, look at that super clean little drop shadow action that’s going on here. Now, do you like that? Do you not like that? That’s completely up to you if you want to do something like that I would recommend you know setting it up here creating a locally scope variable for it so I’m gonna go ahead and I’m just gonna delete that I actually like it the way that it was where it was this nice and flat we’ve already kind of got enough going on with it but I mean look at this look at this outcome that we have achieved with no SVGs no masking no clip paths, no nothing, no craziness.
0:49:40
Okay. Now what we did was crazy enough. I get it. For those of you who are like, I’m a beginner, dog. This is, this is super crazy. It’s not as crazy as it’s going to get. It’s about to get a little bit more crazy. All right. So let’s move on away from this maskless version and let’s move on to the mask version. All right.
0:49:58
So we need to call this something new. Let’s call it cut out. So this was cut out image. Let’s do mask image. Whoo. Nope, we’ve already done that on this site. Darn. Let’s do cut out mask, cut out mask, just like that. We’ll do cut out mask. Perfect. So this guys, what is this going to be cut out mask, double underscore image, and it’s already a figure. Okay, perfect. Now are we going to do some of the techniques that we did over here? Absolutely. But we got to do some different stuff as well, and we actually need a different HTML structure as well.
0:50:39
The first thing I’m going to do is wrap in a div, but I actually need this to be a block. You can actually convert these over to a block. There you go. So I’m going to convert that to a block and this is going to be our mask, our cutout mask. Is that what we, is that what we called it? Cutout, yeah, cutout mask. I got to get that in my head. All right. Cutout mask, double underscore mask.
0:51:06
So this is going to be our mask and I’m going to label these in the structure panel as well. Okay. And then, so I’ve got a parent. I’ve got the mask, this is gonna have our pseudo elements on it again, this is gonna have our mask on it, this is gonna have, I think we’re good enough. We might have to do some troubleshooting, but I think we’re good enough with this, okay? All right, so the first thing I need to do is I can’t use a box and just change the border radius and all that. I actually need a blob and because we need to be aggressive now, right? So what I’m going to do is I’m going to go up to blob maker dot app and I am going to just play around with these settings. If you click this little thing, it’ll shuffle between them and I’m just going to actually that one. I like that one. It’s more aggressive than what we had.
0:51:58
I mean, maybe I can make it a little bit more pointy. I don’t know. How, ah, this makes it more pointy right here. Okay, oh, oh, oh, darn, I can’t get back to them. Okay, let’s keep shuffling till I get one that I want. I just passed, oh, there we go. That’s the one I want right there. Okay, so obviously a bit more aggressive, right? A lot sharper, a lot, you know, there’s more stuff going on here.
0:52:25
Let’s just go ahead and rock and roll with this. I’m gonna go ahead and download it. And we’ve got Blob1SVG right here. I’m gonna show this in the finder. Okay, and let’s move this onto our desktop. So I’m gonna go to desktop right here. All right, and then I’m going to name this our BlobSVG. And then what I’m gonna do is open up Figma, okay? And I’m gonna bring Figma onto our main screen right here. Let me check our recording and just make sure we’re still, we’re still rocking and rolling and looking good. Okay. We are, we’re, we’re a little, it’s a little longer than I wanted to take, but we’re going to keep making it happen. All right.
0:53:01
I’m going to do new design file and I am going to drag in that blob that I just created and notice it’s got like a big box around it. I just want this blob. So I’m going to take the vector and I’m gonna I’m gonna bring it out of let me grab the vector and bring it out of that little wrapper that it was in and now I just have the vector check that out right here now I want to make kind of a container kind of situation okay so if we look at our container right here let’s let’s inspect this one let’s get our dimensions 353 by 674. It’s really 354. We round up 354 by 675. 354 by 675. So I’m going to actually add a frame in Figma. 354 on the width by 675 on the height. And that’s going to give us kind of the ratio that we’re looking for. Now I’m going to drop my blob into here and I’m going to position it at the bottom and then I’m going to drag it up to where it touches the edges of my frame. Okay and then what I’m going to do is I’m going to set this to zero percent because I just want it to be like a wrapper. Okay and I actually don’t need all of this I can export it straight from here.
0:54:29
I’m going to go down to export and I’m going to do SVG. Again, I have the vector selected, only the SVG, not the entire frame that I just made. That’s just for the next step. Before I can do this export, I need to put it in the right contextual situation that it’s going to be in eventually. That’s why I created this frame and did what I just did. But I can export the actual SVG by itself.
0:54:53
And I’m just going to go ahead and use a black color. All right. So we’re just going to say black. And so when I export, I’m exporting a black blob and I’m going to go to desktop and I’m going to export it as blob SVG. So that has now replaced the blob that we downloaded. Now before I do anything else, I’m going to stay here in Figma and do the second step. That way my blob and my mask are both available and ready to upload and ready to start using. Okay so what I’m gonna do is I’m gonna grab this little rectangle tool and I’m gonna bring this rectangle into my frame that I made and align it with the top corner and I’m gonna bring it down and I’m just gonna line it somewhere in here and I don’t really know where I want it to go yet.
0:55:40
We’re just going to play around with this. Maybe we nail it right from the jump, which that’s always would be nice. I’m going to make it the same color of black. It looks really odd right now. I’m going to grab both of them and I need to make one shape out of two different objects. I basically need to join them together. And so if you click this little button right up here, you can do a union selection and now this is this is one thing right this union right here is one thing and I can actually grab my union and I can export it so I’m gonna go to export SVG export and I’m gonna go to my desktop and then this is going to be the blob mask okay so basically the black area everything around black is gonna get cut out right so we’re gonna so all of this white area down here, and that’s where, you know, any of this, this line that basically goes over my legs and stuff like that, that’s where it’s going to cut. Okay. So we should have a nice, I don’t know for sure about this corner over here, but we’re gonna, we’re gonna check it out. All right.
0:56:40
So the next thing I’m going to do is go back into the builder here and I need to drop in my first blob SVG and I’m going to do that with a code block. OK, so I’m going to add a code block right here. There it is. I’m going to call this. What were we calling this cut out mask? OK, so this is going to be cut out mass double underscore SVG. This would be blob. How about that blob? There you go. I’m going to delete the code that is here. And then what I’m going to do is I’m going to go to Finder right here. Okay, I’m sorry, you guys couldn’t see this. This is on my other screen. Sorry.
0:57:19
So I was just putting these on the desktop because I don’t have anything else on the desktop. So we get to see the files that we’re working with. So what I’m going to do is open with TextEdit. Basically, you can open with anything that’s going to give you the SVG code. And I’m going to put that into the code block. Okay. And then of course, you have to execute the code block just like that. Perfect. Okay. Next thing I want to do is take this width and height out of here. So it’s going to be a hundred percent, a hundred percent, and this is going to allow my blob to be free flowing and not stuck inside of this view box right here. They give you these view boxes with SVGs. They’re a real pain in the ass. Okay. So just set your width and height to a hundred percent and then you should be able to manipulate this blob fairly easily.
0:57:59
And I’ll show you exactly how we’re going to manipulate it. So again, I wanna do everything at my cutout mask level. Look how we haven’t written any CSS yet, right? We’re just doing like SVGs and Figma stuff and we haven’t even started to write any CSS. All right, so what I’m going to do is on my parent, I wanna do all of this at my parent. I’m going to do a root of position relative. So position relative, and the reason I’m doing that is because I need to position my blob absolute and I need a relative parent to attach it to.
0:58:36
So root is position relative, and then we’re going to do root of, what was this? Cutout mask. So cutout mask double underscore blob. That’s our SVG down there, right? So I do position of absolute. We’re positioning our blob now. See it? And then I’m going to do bottom of zero. And then I am going to do a display of flex. Okay, perfect. And then I’m going to z-index it, because obviously being on top is not going to help us. Oh dear, it disappeared. What shall I do?
0:59:16
We’re going to isolation isolate it. And we actually need to do that at the parent level just like that. So look at this. We’re making progress. OK, so we’ve got a little blob going on down there. So now what we need to do is add our mask. So what I’m going to do is root cut out mass double underscore mask perfect.
0:59:37
And then I’m going to do a mask image and then this accepts a URL. This is where we need to actually upload our mask to the database, which will do in just a second. But there’s some other properties here that we have to set, so we’re going to a mask size of cover. This is kind of like behaving like a background image at this point.
0:59:57
Mask position is going to be bottom and I’m trying to think if there’s anything else we need. That might be it. Let’s go ahead and upload our actual photo. So I’m gonna click on this photo and I am going to go back to our desktop and take my blog mask and just upload it. And then I’m just gonna grab our URL. And I only need the relative path for this. You don’t need the full path.
1:00:21
And I’m gonna go back to our instructions here and I’m gonna find my URL and I’m going to pop this in. Bam! Just like that. And then you’re not going to see anything happen because in Chrome, which I’m in Chrome right now, none of this works without the WebKit prefix. Okay, so we’re going to do WebKit mask image and I just have to, it’s really annoying to do this, but you have to still. And I’m going to go ahead and hit save. out of the freaking gate, we are perfect. Look at this, absolutely perfect. You see, it’s not that, I mean, I was just guessing stuff, right? Like where I drag that box and all that, we’re just absolutely perfect, okay?
1:01:00
So man, I mean, this is absolutely fantastic. Now, the one thing you need to know, we’ve put our mask here and I needed this mask layer because remember over here when we did overflow hidden and then we had a problem with our our circle pseudo elements being cut off by the overflow. Well a mask works just like overflow hidden and so if you try to put pseudo elements on here it will cut them off with the mask just like overflow hidden was cutting them off. So really what we need to do is have this extra wrapper really put the mask inside of the original wrapper. Remember we had a wrapper here, then the image. Now we have a wrapper, then the mask, then the image. And then we just have an extra code block. So there’s definitely more stuff going on in the DOM here, but same principles, right?
1:01:52
So now up here, I am free to add my pseudo elements. So this is our main blob. Just like on the other side, our box that we use border radius on was our main blob. We have an SVG, oh sorry that is the mask not the main blob. So this is our mask. This is our main blob right here. So we have our main blob, we have our mask, now we have our accent one and I’m actually gonna go steal this from here. Okay so I’m just gonna, because I don’t want to do all this again by hand. So I’m going to grab all of this. Let me just grab it all actually. Let’s go from accident blob 1 to the bottom of accident blob 2. Bring it over to here and we are going to drop it down there.
1:02:40
We’re not going to see it because of all of these local. I just want to make sure that I was structuring it correctly. That’s what’s great about Bricks is that I just stole code from somewhere else and put it in here and I don’t have to change anything because it’s using these root references instead of using actual class names which is really really fantastic. So now what I can do is I can go back and you know what I can do is I can steal I can steal all the local ESCO variables that we made. Some of them we don’t need obviously but those aren’t going to matter or shouldn’t matter anyway. So I’m going to look at that oh my god we just stole we just stole our pseudo elements.
1:03:17
OK, so let’s go ahead and hit save there. Amazing OK, last step that I’m going to show you guys on this is. Uh, notice we had a gradient here. OK, the gradient here and what are we going to do for the color here? That’s that’s the real question. So we do have to change two things. See I had. Where’s my main blob color?
1:03:39
There you go, blob background right here. What we actually need is to decide. This is the hard part, this is the limitation. So remember we were gonna talk about pros and cons. So, and I’m gonna write out the pros and cons with this training as well, because I’m probably gonna miss some when I’m just talking about them. I told you about a big con of the border radius thing is that you can’t do aggressive blobs.
1:04:03
Another con of the border radius situation that we’ve got going on here is that you can’t animate these two items separately because of how we had to do the cutouts. Um, they, they can’t be animated separately. These items can be because a code block is controlling the blob and then we have an image that’s separate. These can be actually be animated separately. So you can like you hover, it looks like I’m coming out of the blob and things like that that is doable with the Mask side not doable really with the border radius side Okay, now the downsides of the mass side number one is the mass shape It’s kind of fixed like over here I can adjust this blob shape all day with my border radius even though I can’t get very aggressive with it I can still adjust it to whatever I want and change it well with this because it’s using a fixed SVG shape for the mask.
1:04:54
I’m not free to just willy nilly change these without going back into Figma, creating a new blob, creating a new mask, coming back in, changing the code out like that’s a nightmare, right? So that’s one of the downsides of the mask side is that you’re kind of stuck with whatever initial blob shape that you choose. And then the other downside is you kind of need to decide if you’re going to go with a solid color or if you’re going to go with a gradient. Because SVGs make gradients kind of a pain in the ass. And I’m about to show you what I mean. But first I want to show you how to get a solid color.
1:05:29
If you don’t want a gradient, how do you get a solid color into the SVG? So remember, we have a locally scoped variable called blob backgrounds. Okay now it cannot be a linear gradient on our cutout mask so our blob background needs to be a color so we’re just going to do secondary. Okay as long as it’s a single color we’re good to go. So I’m going to take blob background I’m going to go to my code block and if you scroll down in the code you’re going to see that there’s a fill right here at the bottom and so what I’m going to do is I’m going to fill that with a blob background but I actually need to wrap that in a var okay blob background and there you go. So now I’m free to have my SVG blob back there really be any shape that I want it to be. I’m sorry any color that I want it to be but I cannot just make it a gradient. If I tried to do a gradient so I come back up here and I try to put a gradient value in this blob background it ain’t gonna do jack it’s gonna go back to being black okay so we obviously don’t want that to happen so what we needed to do let’s just say hey I know I want to do gradients now actually actually let me back up on the fly we’re just thinking in the brain okay you should just always do a gradient.
1:06:50
You should just always do a two-color gradient. It’s probably going to get you by in most situations. You should just stick with that by default. Don’t do this blob background thing. Do blob color 1 and blob color 2. Then if you don’t want a gradient, I’m going to show you how to handle this. Blob color 1 is going to be var secondary dark Okay, perfect. Okay. So now Get ready. All right, because this is gonna get into the advanced land We’re get we’re get we’re definitely getting in like now whatever your comfort zone level was we’re probably about to leave it Okay, we are about to leave it. This is they do not make this friendly. So just prepare, mentally prepare yourself.
1:07:42
If you’ve got coffee next to you, take a sip of the coffee, whatever you need to do to mentally prepare for what is about to happen. Because if you, if you felt like, hey, everything you’ve done so far is already advanced, right? It is about to get a little outlandish. Now, not too bad. It’s really not too bad. But, but it’s not easy. All right, so I’m going to go into my code block. I need to get back over to the content tab. And then I am going to be editing this SVG code with a linear gradient instruction in it, okay? And so what we’re going to do first is we’re going to take out our fill right here.
1:08:18
Our fill is gone. We ain’t doing no fill. And you can see right here on the right-hand side, we lose our blob altogether. Now I’m going to come up here and you have to define a linear gradient inside a tag called DEFS. So I’m going to make an opening defs tag and a closing defs tag. The next thing I’m going to do is define a linear gradient in a linear gradient tag which also needs a closing tag. We got to make sure that we spell everything properly. We’re also going to define stops for our linear gradient. Okay these are the you know when you use a gradient generator it’s like where do you place your stops okay?
1:09:03
So we’re gonna have stops in our linear gradient and then the first thing you need to know is the linear gradient has to have an ID and our ID actually sorry I am so sorry. You do not wanna just remove the, you wanna remove the value of the fill. You don’t wanna remove the actual fill instruction because the ID is gonna go here in just a minute. So the ID is going to be, you know, something unique to this. So we’re gonna say a blob gradient.
1:09:28
How about that? Just blob gradient. Perfect. Now, what we have to do is give this coordinates, okay? There’s gonna be an X one coordinate, which equals nothing right now Y1 coordinate, okay, we’re gonna give it an x2 Coordinate and we’re gonna give it a y2 Coordinate and then watch what I’m gonna do. I’m gonna go 0% x1 0% y1 X2 is 0% This is the direction that your gradient goes in. Okay, and I’m going to do y2 equals 100% and I believe this is going to give us a top to bottom gradient. Okay, so now what we have to do is we have to define the stops and we define this with stop color equals and then we need a color and for right now I’m just I’m just going to go with with red. We also need a stop opacity equals a value which the default would just be one, that’s like 100%, okay?
1:10:29
So we have a stop, oh, we also need an offset. There’s a stop offset equals, and I’m just gonna go ahead and put this at 0% as well. So we have the stop offset with the stop color, we have the stop opacity, and then I’m just gonna copy this and just put it right there as well. And then this stop offset is going to be a hundred percent. And then this is going to be a blue color. And then our stop opacity is going to stay at a hundred percent on this stop right here.
1:10:57
And then what I’m going to go do is now put my linear gradient into my fill. And that’s going to be with a URL and then the pound. And we just referenced blob gradient like that. And guys look over here at what we have got. Man, oh man, oh man. That was like, woo, that will break your brain. Okay, now, that’s obviously not the gradient that I want. Okay, so what we’re going to do here is we are going to replace red and blue because we don’t want red and blue, right? So what do we replace them with?
1:11:32
Well, we go back here. You remember, we created blob color one and blob color two. So I’m going to go back to my code. I’m going to go here and I am going to go here. Okay, so we’re going to put bars in obviously. And this was blob color one. And this is blob color two. And we have replicated exactly the shading that was going on over here, but over here in our custom SVG, my gosh, okay.
1:12:05
Now, why did I say a minute ago, I was like, hey, you know what, just do a gradient no matter what. Because if you want it to be solid, what can you do? Go here, go here, go here, and secondary medium, secondary medium. And now it is a solid color, but if you need a gradient, guess what, you could have a gradient if you wanted to so you’re it’s like best of both worlds right so this is absolutely fantastic that’s really the end of the tutorial here the last thing we need to talk about just kind of review is I talked about global control contextual control and individual control over all of these items and this is why we did all of these locally scope variables not the only reason we use the locally scope variables, but if I go back and look here at cut out mask, and we go to all of our locally scope variables here.
1:12:58
If I wanted to change blob color one, blob color two of this, and I wanted to change it on a group of them, I could simply come over to the ones that I wanted to change, and I could put something like cut out, mask, and then this would be like primary. And then these would be all primary colored. And the only thing you have to do here is redefine the values at the root level from secondary to primary.
1:13:25
And now anything that has the primary modifier is gonna get the new blob colors, okay? That’s how you have contextual control. If you want individualized control, same is really true, except you just do it at the ID level. So you come in and drop these at the root level and it’s gonna change them, but only for that individual component, okay? Because you’re doing it at the ID level, you’re assigning these new values at the ID, which is specific to this one individual item versus assigning those to a modifier class, like what was it, blob primary, whatever the cutout mass primary that we just did, that would be defining it at a modifier class level so that anything with that modifier class can access those new color instructions.
1:14:11
And really, it’s anything that you want to change, any of these locally scoped variables can be changed again with modifier classes for contextual control or individual for ID level, like one-off instance control. Okay, that is officially the end of this tutorial. I hope you guys found a lot of value in this. I hope that both of these techniques make sense to you. I hope that you can use them and achieve some pretty cool stuff. We didn’t go through the more – there’s always more things you can do. We could have shown how to animate all of these things. That can be a separate tutorial maybe.
1:14:51
If you want to know how to animate the stuff, then maybe we’ll do a separate tutorial. But we gotta at least get to this right here. Then we can start thinking about animation, all right? But that’s it, drop comments below if you have any questions. I’m happy to jump in and help. Thanks guys for being in the inner circle, and I’ll be back with another great tutorial very, very soon. Peace.
