0:00:00
One of the best ways to create more depth and drama in your designs and your development process is to layer things and make things overlap. You might want your pricing tables to overlap into the next section below or at least appear like they do. You might want a video to overlap the section above it. There’s a lot of different use cases for this and in CSS and design and development, really development and CSS and in oxygen, there’s a lot of ways to accomplish the same things. But certain situations are going to present themselves where one technique is a much better fit than a different technique. In some cases, one technique might not even be possible to use because of what you’re trying to achieve and therefore you need a different technique. So what I’m going to do in this video is I’m going to show you seven different techniques for you to learn to put into your toolbox so that when a situation arises and you need stuff to look like it overlaps or to actually physically overlap, you’re able to solve the problem and make it happen. All right, seven techniques for section overlap. Let’s go. All right, guys, before we jump in today, I want you to notice I have the party emojis all over my video avatar down there. And the reason is we have enrolled over 135 new members into the digital ambition inner circle in three freaking days, which is absolutely insane. Like I set my goal at 50 people over the next week or two and we’re at 135 plus in three days. It’s just absolutely blowing me away the engagement that the support from you guys and I’m super excited to see what we’re going to be able to build.
0:01:42
I really think the digital ambition inner circle is going to be super, super special filled full of premium oxygen trainings, agency trainings, agency related content and resources. It’s all there for you. All right, so I’ve got the link down in the description. Just wanted to give a little update on the success we’ve had and thank everybody that’s been a part of it. All right, let’s go ahead and talk about section overlaps. So I’ve got three sections here and we’re going to talk about seven different overlap techniques. Now there’s reasons you would use some of these versus others and some of that has to just do with design and development experience that you’re going to gain over time. But I want you to have these seven techniques in your toolbox so that you know that they’re there and you can start to apply them on different builds that you’re doing and over time, like I said, you’ll learn which ones work best in various situations. But if you don’t know the exists, you don’t even know it’s possible in the first place. You’re not going to play around with them. You’re not going to learn them. You’re not going to have them in your toolbox. So I’ve got some of these written out here. So we’re going to be using an inner box shadow. We’re going to be using a background gradient. We’re going to use section before pseudo element. So that’s a pseudo element on the section. We’re going to use a pseudo element after on the wrapper. And we’re going to use an SVG shape divider. All of these techniques right here are going to create the exact same effect, but they have different pros and cons to them, which we’ll try to talk a little bit about as we work through this. Then we’re going to come down here. This, by the way, is for overlaps below. So I want to overlap this content over the section below it. Right? Down here, I have overlap above where I want to overlap this section above the or the overlap it on the section that is above it. I don’t know how to say that the right way. All right. So we’re going to start in this section and then we’re going to move down to this section. All right. So cool. Let’s start with inner box shadow. Now what you’re going to notice here, inner box shadow, background gradient, section before, wrapper after, SVG shape divider. None of these techniques. I think this is important to point out none of these techniques involve moving this content or moving this content. The techniques create the illusion of an overlap. All right. We’re not physically making items overlap.
0:04:15
We’re creating the illusion that they overlap. And I think that’s one of the big like aha moments when you’re a beginner. You’re like, well, I need two things to overlap. So you’re always physically trying to move them. Now down here, we are going to physically move the items. But when it’s a overlap below kind of technique, oftentimes you can just create the illusion. Now you can do that down here as well, but I don’t want to just repeat the same techniques we’re doing up here. Some of these can be used down here as well. Okay. I’ve also thrown a background image into this section because that does present some issues that we’ll talk about. Okay. So let’s just get started. Inner box shadow. Now anytime you want to overlap something below, what you typically want to do is get rid of the padding that’s in here. So we can make these things at least closer to each other. I guess that is technically, you know, moving these items a little bit. But you’re going to see what I mean when I talk about creating the illusion. So it says right here, we need to use an inner box shadow to create the overlap. So what I’m going to do is I’m going to grab this section right here. And I’m going to go to advance. I’m going to go to effects and I’m going to go to box shadow. And I’m going to choose this color right here. I want these two sections basically to have no seam or I want the seam to be up here really or appear as if it is up there. And that’s what will make these items look like. They’re overlapped. So if I choose the exact color that’s down here to work with. And then the shadow horizontal offset, we don’t need any horizontal offset whatsoever.
0:05:48
That’s left or right offset. We don’t need that. So we’re going to put a zero. The vertical offset is what we need. We need a negative offset. We need this box shadow to come up into the container effectively. So I’m going to put this at minus 200 pixels. And there you go. You’re going to see the overlap. I can go ahead and set these both to zero. Now I’m going to make this text light here, text light so that we can read it. And now we have our section overlap using an inset box shadow. So you can see it appears as if it’s overlapping. It’s not actually overlapping. So we’re creating the illusion that it’s overlapping. That’s one technique. All right. Now let’s go ahead and let’s take off that effect. Okay. Box shadow. Let’s get rid of that. And now we’re going to move on to the next technique, which you can’t read it down here is background gradient. So again, we’re going to be creating an illusion. So I’m going to go to the background section now. And instead of setting a background color, I’m going to come down here to the gradient area. And we’re going to add two colors here. One of them is going to be the color we want to match to. And the other one is going to be basically, you know, nothing. It can be a solid color. It can be any other color that you want. But I’m just going to use transparent right now. And then what we’re going to do is use either the percentage or pixels. However, you want to do this to create again, the illusion that they’re overlapping. To me, like, you know, pixel or percentages is the easiest way to do this. So I’m going to come in here and just make them match. And you’re going to create that overlap effect again.
0:07:34
Let me make this like 70. And we’ll do 70. That’s going to bring it up a little higher. I’m going to hit save. We’re going to go take a look at this thing on the front end. I can move this back now. All right. So let’s go see how this looks. So effectively, it’s exactly the same. I just refreshed. I mean, that this moved a little bit. It’s the same exact effect. We’re creating the illusion of an overlay. This time we’re using the background gradients. Now, what is the benefit between inner box shadow and background gradient? Well, inner box shadow is a solid color. And background gradient does allow you to perhaps create a gradient effect inside of this overlap. You can do that as well. I’m not going to demonstrate it. You can go play around with it. But you can create a, you have control over the gradient colors to the point where, because you can always add more colors to this too, right? So you can do some other different effects that just aren’t possible with inner box shadow, depending on the look you’re going for. All right. Let’s go ahead and remove that now. And let’s talk about next one, which is section before. So we’re adding a before element, before pseudo element to this entire section. This one gives you far more control over the, as in comparison to the other techniques, but it is a little bit more difficult to set up. So the first thing I’m going to do is I’m going to go to advanced and I’m going to go to layout on this section. And I’m going to set the position to relative. And I’m going to set the Z index of this to zero. All right. So we’re prepping the section beforehand, because what we’re going to do with this after or this before pseudo element is we’re going to position it absolute.
0:09:16
And we need to contain it inside this section. So we’re doing that by setting the section to relative. And then we’re getting our layers set by setting the Z index to zero. Now what I’m going to do is on this section, I’m just going to put this over here for now because I’m going to be doing a lot of work down here. So I’m going to go to section state and we’re going to go to before. And I’m going to start configuring this background color is going to be this color right here. All right. So I’m going to choose that. And then I’m going to set the size on this. We’re going to go with width is 100%. And we’re going to do height. Remember height is kind of where I want the effect to be. So I’m going to set this to rim and we’ll go with 30 rim. And then in order to see it, we’re going to go to layout and set a position. And we’re going to, like I said, use absolute positioning. And then I’m going to set the bottom to zero. Oh, there it is. You see it over there, but it’s all the way to the right. So I need to set the left to zero. And that’s going to bring it into the proper position. Z index, I believe here might have to be negative one. And we’re going to hit save. I’m just see what we get on the front end here. Exactly the same effect. Now the key difference here is when you use the pseudo element, you basically have an element that gives you access to a lot of things you don’t have when you use background gradient and inner box shadow. You can put an image inside of this pseudo element.
0:10:46
You can put a gradient on this pseudo element, a gradient plus an image. You can put its own box shadow internal or external, whatever you want to do. Like there’s a lot of different stuff that you have available to you when you use this pseudo element technique versus background gradient or inner box shadow. This is one of the ones that I use constantly. I use this technique constantly. So it’s one that you’re going to want to practice with. You’re going to want to develop it. Now that was a pseudo element on the section. What I think would be helpful. I don’t necessarily think I would do this, not in this case anyway. But I want you to know that it exists because to a lot of people’s brains, especially when they’re a beginner, this doesn’t make a lot of sense. So it’s going to be important for you to see it. It’s just a technique to have in your toolbox. I’m going to clear the before here. We’re going to get rid of all that work that we just did. Now we’re going to do a pseudo element on the wrapper that contains these things that I want to overlap. In order to do this, I need to make sure that the wrapper itself is not set to position relative because I don’t want it to contain. I want this pseudo element to break outside of the wrapper and attach itself to the section. The section, this is going to make a lot more sense in the second. The section still needs to be relative so that it contains that absolutely position thing so that it doesn’t fly all over the place. Let me go ahead and select the wrapper again.
0:12:20
We’re going to work with the after pseudo element now. I’m going to go to backgrounds and I’m going to set the same, a lot of the same things. Background color here and then I’m going to go to layout, actually size and spacing. We want this to span the entire width. I’m going to go with 100% width. I’m going to do the same height 30 rim and I’m going to position this absolute, boom, absolute and I’m going to position it bottom zero and left zero. Now I’m going to position it negative one and I’m going to hit save and we have the exact same effect but I put the effect in the after pseudo element of the wrapper that’s containing these items instead of putting it in the before element on the section that was containing all of those items. Again, I just kind of wanted to demonstrate that to show the possibility there because I don’t think for most people that wouldn’t be a thought that that was a way to do it. I don’t know. I just hopefully that’s helpful to you. You can see it again. I would play around with these two techniques because you can do a lot of cool stuff with them. Besides these overlaps, I use before and after pseudo elements constantly in web development. SVG shape divider. This is the easiest technique of all of them. I’m going to go ahead and grab that wrapper and we’re going to get rid of the pseudo element styling. Then all I have to do is select my section here and I would say add shape divider.
0:13:56
I would recommend that on the section you set this to relative. Lay out relative. Then what we’re going to do here, there’s a Zindex issue I run into with these SVG shape dividers. Here’s the shape divider. It puts a physical element inside of the section by the way and then you have the ability to position it at top or bottom. You can stretch it. You can do whatever you want with it. We’ll do, and this is best when you want the overlap to also be combined with some sort of shape. I’m going to do this angle one and I’m going to show you how to manipulate the shape too. You can see the slope is very drastic. I can change the slope by changing the height of this. Now it’s less drastic but you’ll see that it’s not high enough now. I need height but less slope. The way that you can do that is by effectively stretching this whole shape sideways. The width can actually go to like 400%. Then I can center this and now you see I have a more gradual slope. Then I just need to make sure that this is positioned properly. A lot of times what I do is set the Zindex of this and then I’ll take this content that’s all in a wrapper and I’ll come and set the Zindex of this to one. I’ll be honest with you guys, I wish the shape dividers were easier to work with in terms of their Zindex. If I’m missing something on this because I honestly don’t use shape dividers like all that much but every time I do I always have to come to all these elements and set the Zindex to one to get it to overlap the shape divider. I could absolutely be missing something with regard to these shape dividers. Then obviously you can set the color of the shape divider as well so you would want that to match. Then when we hit save we now have the overlap effect but now we have like a shaped overlap effect. There’s one, two, three, four, five different techniques for doing overlap on something below the items you want to overlap. Now let’s take a look at overlapping above and you’re going to see here that I’m going to take away the spacing between these because we don’t want to have to go too far. If I use one of the techniques from above, we can just use one of the most basic ones which was that InsetBoxShadow. I can go Inset and I choose my color. You’re going to see automatically what the problem is here. Now I’m going to do the vertical offset as a positive number now. Inset. There it is. That’s a little much 200. You can see I did positive here because it’s coming from the top. I did negative before because I needed to come from the bottom. You can see that I can’t put an image inside that box shadow. Even if I could it wouldn’t be this image.
0:16:54
We have a problem. We can’t create the illusion in order to create the overlap here. We actually have to create a physical overlap. I literally need these items to sit on top of this item here. I’m going to get rid of that box shadow. We are going to have to move these items up. What I would recommend is adding additional space padding to the bottom of this section. That way there’s room for it. We don’t want to cover up any of this text. Then what I would do is come here and these items are in a wrapper. We’re going to take a look at two different techniques. One is negative margin. The other is translate Y. Negative margin is probably the one I would go with 90% of the time. There are some use cases for translate Y. You’re going to see a problem with translate Y. Not necessarily a problem because in some aspects it would be a solution. It is something to be aware of. Negative margin is super easy. Here’s my wrapper that contains these items. I’m going to go to advanced size and spacing. Margin will set to rim. I’m going to go to minus 30. That is going to pull. That is way too much. Minus 10. We’re going to hit save. We’re going to come to the front end. We’re going to see that we have an overlap. That is a physical overlap. I moved these items. I want you to see something. See this section, this content right here? That came with it. Let’s just keep an eye on that while we set this back to zero. Watch.
0:18:23
See how it moved down? When I move this up, even though it’s not in that wrapper, it’s going to move up with those items. I’m going to set it back to negative 10. Do I write it right? You can’t even see because the movement’s up here. It’s overlapping again. These items came with this wrapper. That is important because that does not happen when you use the translate technique. We’re going to set this back to zero. We have no overlap. Now we’re going to go to effects. We’re going to transform, add transform, and we’re going to go to translate. You’re going to get an x and a y. x is left or right. y is top to bottom. We’re going to set this to rim. We’re going to do the same minus 10. Now you’re going to see that it jumps up there. We’re going to hit save. What you’re going to see is that the content below it did not come with it. Now there’s a gap there. There are some use cases, like I mentioned, where you would want to move these elements without affecting any of the other content below it. There are use cases for that. If that is what you’re trying to achieve or whatever reason, you would want to use translate. If you want this content that’s below these items to come with it, so there’s no big gaps. You’re not creating any gaps in your design. Then you would use the negative margin technique. You have seen now, we did all this pretty quickly, seven different techniques for creating section overlap in oxygen. Now there’s more techniques that if we talked about overlap, overlapping elements that are inside of sections, like this is going on here, but I’m going to save that for a future tutorial. Right now I just wanted to talk about section overlaps in oxygen. Hope you found this useful. Hit subscribe, hit like, drop comments.
0:20:15
If you know how to do the SVG shape dividers better than I showed it in terms of like Z index and layering and stuff, definitely drop a comment below. Educate me. I would love some tips there if you have any. If you haven’t checked out the inner circle yet, I mean, we are, it’s going gangbusters. We are off to the races and we’re having a lot of fun inside the inner circle. So go to circle.digitalambition.co to check that out. Peace.
