Tested all of these, and they work great. Thanks! My favorite overlap technique is the psuedo element one. More flexibility. box-shadow method observation: unless the other fields have 0, the -200 spacing makes the object appear on the right side of the screen. Background Gradient Observation Some things I noticed with the background gradient method: if you set the top color to 80% but the bottom color to 0% instead of 80%, you get the same visual result. It's only by removing the bottom value completely that there's a fade.
I never thought of the inset box shadow technique, great idea! For the SVGs, I usually design my own in Illustrator, the benefit is I can show-hide different ones on different media breakpoints, but it is definitely more work and not for every project.
You're using absolute positioning to place the divider at the bottom of the section, so it doesn't matter where the element is in the DOM structure. To that end, you can put the shape divider as the first element in the section (instead of the last element) and include a general css rule as follow: .oxy-shape-divider ~ * { z-index: 0; } No need to set the z-index on the shape divider element. Why does this work? Well, the items in the DOM after the shape divider will naturally stack on top of it, so putting it first in the section helps a lot. I was confused as to why it didn't solve the problem on its own. Enter this Oxy-generated rule: .oxy_shape_divider > svg { min-width: 100%; position: absolute; bottom: 0; left: 0; z-index: 0; transform-origin: bottom center } This gives the SVG an explicit z-index, while all the other elements in the stack (if un-modified) have no z-index set and default to "inherit z-index from parent". So my assumption is that setting the z-index of all the items that come after the shape divider wrapper puts everything on an equal footing and lets DOM order stacking take over. I'm sure there are more complex and subtle explanations as to exactly why this solution works -- that's why there's a "reply" button below... 😉 It's worth noting that if you explicitly set the z-index of the element to a positive number using the properties panel for the Shape Divider in Oxygen, the general CSS rule mentioned above needs to be modified to match the positive number you've set in Oxygen. I'm not sure the best place for this rule. It seems silly to put a code block on a page just for this one rule. The Custom CSS tab for the shape divider element won't work. A General Site Styling custom stylesheet in Oxy Manage -> Stylesheets seems a possible location, I guess...
As always exceptional! I don't have a favorite but normally use the negative margin, but now you have given me new ideas depending on the design to choose from. Thank you so much.
Thanks for this video. I had been using negative margins but it just messes with my layou and I have to adjust other elements to compensate. Using the Pseudo element I can sell the pixel perfect look while keeping the actual layout simple and consistent.
This was an absolutely phenomenal 🤩 and mind-blowing 🤯 tutorial! Would love to see more content like this, but for Bricks! I’m in the Inner Circle, so I look forward to the rest of new Full Site Build series. 🙌 Thanks for all you do man! It’s seen and appreciated.
@@Gearyco - Oh yeah, totally. 100% clear on that. It’s just nice to see things done with your own tool of choice, with its own caveats and nuances discussed, ya know?
Thanks, Kevin, another great video. I was looking for a video I saw in the past, it involved using an actual image element vs a background image in the Hero section. Would you mind sharing the link if you remember where that video is at? I’m able to position absolute but having trouble with the child elements and keeping everything responsive as the breakpoints change. Thanks!
I am building a site with ACSS, but non of the above works for me. Inner shadow sets it vertically left or right of my screen, before, after, nothing works. unfortunately.
Which section overlap technique is your favorite?
I have been using Negative margins forever. Now I see there are so any ways to get the same thing done.
im curious which technique is the easiest to adjust for mobile ver?
Gradient and box shadow - genius!! It literally never crossed my mind to use them like that. Thank you as ever
Tested all of these, and they work great. Thanks!
My favorite overlap technique is the psuedo element one. More flexibility.
box-shadow method observation:
unless the other fields have 0, the -200 spacing makes the object appear on the right side of the screen.
Background Gradient Observation
Some things I noticed with the background gradient method: if you set the top color to 80% but the bottom color to 0% instead of 80%, you get the same visual result. It's only by removing the bottom value completely that there's a fade.
I never thought of the inset box shadow technique, great idea! For the SVGs, I usually design my own in Illustrator, the benefit is I can show-hide different ones on different media breakpoints, but it is definitely more work and not for every project.
Excellent tutorial. Man, your videos are very detailed and very good. Thanks
🙏
You get 7/7 my friend. Thank you for some refreshment and some margin vs translate knowledge
Wow, I know about gradient. But box shadow its new for me. Thanks!
You’re welcome 😊
GOLD 😍
Nice vid mate. Box shadow and gradient fill are new ones to me! Thanks for the great content, keep up the good work
You're using absolute positioning to place the divider at the bottom of the section, so it doesn't matter where the element is in the DOM structure. To that end, you can put the shape divider as the first element in the section (instead of the last element) and include a general css rule as follow:
.oxy-shape-divider ~ * {
z-index: 0;
}
No need to set the z-index on the shape divider element.
Why does this work? Well, the items in the DOM after the shape divider will naturally stack on top of it, so putting it first in the section helps a lot. I was confused as to why it didn't solve the problem on its own.
Enter this Oxy-generated rule:
.oxy_shape_divider > svg {
min-width: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 0;
transform-origin: bottom center
}
This gives the SVG an explicit z-index, while all the other elements in the stack (if un-modified) have no z-index set and default to "inherit z-index from parent". So my assumption is that setting the z-index of all the items that come after the shape divider wrapper puts everything on an equal footing and lets DOM order stacking take over.
I'm sure there are more complex and subtle explanations as to exactly why this solution works -- that's why there's a "reply" button below... 😉
It's worth noting that if you explicitly set the z-index of the element to a positive number using the properties panel for the Shape Divider in Oxygen, the general CSS rule mentioned above needs to be modified to match the positive number you've set in Oxygen.
I'm not sure the best place for this rule. It seems silly to put a code block on a page just for this one rule. The Custom CSS tab for the shape divider element won't work. A General Site Styling custom stylesheet in Oxy Manage -> Stylesheets seems a possible location, I guess...
As always exceptional! I don't have a favorite but normally use the negative margin, but now you have given me new ideas depending on the design to choose from. Thank you so much.
Thanks for this video. I had been using negative margins but it just messes with my layou and I have to adjust other elements to compensate. Using the Pseudo element I can sell the pixel perfect look while keeping the actual layout simple and consistent.
This was an absolutely phenomenal 🤩 and mind-blowing 🤯 tutorial!
Would love to see more content like this, but for Bricks! I’m in the Inner Circle, so I look forward to the rest of new Full Site Build series. 🙌
Thanks for all you do man! It’s seen and appreciated.
Thanks! You can use all these techniques in bricks.
@@Gearyco - Oh yeah, totally. 100% clear on that. It’s just nice to see things done with your own tool of choice, with its own caveats and nuances discussed, ya know?
Great content!
Thanks, Kevin, another great video. I was looking for a video I saw in the past, it involved using an actual image element vs a background image in the Hero section. Would you mind sharing the link if you remember where that video is at? I’m able to position absolute but having trouble with the child elements and keeping everything responsive as the breakpoints change. Thanks!
About to record a video that covers this specifically.
awesome AZF!
Any timeline on the overlapping elements tut you alluded to at 20:02?
I’ve got a huge list of trainings to make usually it’s by popularity
Sick 🔥👌
I am building a site with ACSS, but non of the above works for me. Inner shadow sets it vertically left or right of my screen, before, after, nothing works. unfortunately.
Can you post a link so I can diagnose? They certainly work so I need to look at your implementation.
Can we get a Bricks version of this?
Same techniques
Is there any specific reason you used REM instead of PX? If so, can you mention please?
Px aren’t accessible and rem are
Does setting a negative z index on the shape divider help avoid setting other things?
No, it hides the divider every time I try it.
What about responsiveness when ovelapping? I faced some issues when it becomes small screens
You just create necessary adjustments at breakpoints