I have typically used negative margins for this situation, often because I'm 'pulling' an element up into the section above (or at least that's how I think of it). Then I have to match the padding on the upper section to match - something that is much easier with css variables now (e.g. var(--overlap)). I like the background image approach, but often I want the upper section to 'show through' behind the overalapped element, which doesn't work without some actual overlapping happening between the sections, even with 'transparent' as a color. Curious how you'd use grid for this...without it getting too messy.
@seandleary recently, I've started using grid areas a lot more to define structure. Once the other elements are in place, it's as simple as row/col start and end (or span) to have them cross the multiple areas. I think Kevin did a video a while back explaining how to do it horizontally and it would work essentially the same in this case.
It does, I still use it every now and then, but I think the gradient solution may be slightly better, depending on the situation. It works here because he's using solid colors, but I had overlapping background images, going to play with that, see if I still prefer margins over gradients
@@ahmedjaber-t4e negative margin has the benefit that it "pulls" the flowing content after it up as well. Translate won't; leaving a "gap". Either one may be desireable depending on the situation though.
I’d give the bottom section a solid bg, and put the gradient on the top section. That way you can control the overlap size more accurately without having to account for the height of the bottom
Off the top of my head, I was sure you were going to give a grid solution as well as negative margin and possibly translate. I like both of your solutions though. I guess the beauty of css is that there are so many ways to achieve a given look, and which one is best often depends on the nuances of the specific case. Hope you have a great New Year!
Make the footer relative, the footer-top absolute, works perfect on pc screen and break on other screen format, get mad, rethink life choices, do 50 media queries, imposter syndrome kicks in, 7 stages of grief, never touch the project again. 😂
If you need to pass an automated accessibility checker that looks for contrast errors (e.g. WAVE) for some reason, the checker probably isn't smart enough to figure out that the white text in the footer is on the dark part of the linear gradient, so you'll get a contrast error. You would fix that by keeping the background-color on .site-footer__bottom even though it makes no visual difference.
Previously I've gone with the gradient solution but given the overlapping element its own full width wrapper. That wrapper has the gradient, which means I can use a % that's relative to the height of the element. It can also be independent from elements above/below it.
I like no-transition gradients for atypical background positions, but this feels like a case where positioning, translating, or a negative margin communicates more clearly the intent.
If I recall correctly, you don't need the lengths to be the same for a hard line gradient. CSS would produce it if the following length is less or equal to the preceding length. So you can do things like blue 300px, white 0.
Negative margin gives you possibility to use image or gradient in the footer bg. That's my option number 1. Another would be a box shadow, but it would be rather inset 0 -100px 0 0 var(--… than spread.
I find I use negative margins for this more often than not. Usually because I'm getting 2 page builder blocks to overlap eachother (that could be used separately). The negative marin approach also works well with background images. Just throw a CSS variable into some padding and margin 👌 Something else to consider is if the overlap should equal half of the top section's height (with dynamic content). In this case you'd want the approach to be relative to the top section so you can accurately calculate 50% of its height. I'd probably use a pseudo element on the top element that's 50% + the padding gap, or use the background image approach but on the top element instead of the whole section.
You can use an absolutely positioned pseudo-element on the parent, set to 75% height, bottom, left, and right with a background color and `z-index: 0`. Just give the children higher z-indexes. Old-school but works great!
Or put the pseudo element on the bottom part and make it height: calc(100% + var(--overlap-size)); Just to make Kevin's variable name work as one would expect 😆
I worked on a similar layout in one of Frontend Mentor’s premium projects and used a grid-based approach. However, I really prefer your solution-it’s much more elegant!
Hi Kevin and happy new year. For me a simpler solution to control the height of the overlap is to use the before pseudo element and place it in absolute position, z-index -1, inset: auto 0 100% and set the height you want. A grid approach is possible but much more complicated for this design except if you want to have a background image or a specific gradient.
I always use negative margins for this type of Layout. But i like the other approaches. But what about when the box is has no fixed hight. Sure u could use some calc and custom properties, but when keep it simple just use a negative margin.
I've used :after element with blue background and position absolute. With this aproach I can control height, and make is exactly 50% of pre footer block in all scren sizes and no matter what content can be inside footer or prefooter.
Hi! I have a challenge for you. It would be amazing if you could make a video about this. A fixed informational banner at the top of a website. This banner has the ability to display more than one message at a time in a continuous loop. And now, here's the real challenge: if any of the messages exceed the screen size, for example on mobile, implement horizontal scrolling to show only the overflow of the missing message. If you could make a video about this, it would be fantastic! I've never seen a tutorial about something this complex. Love your work!
9:50 in the gradient solution, you may use `0` as start position for the second color, white. This will create the same sharp color transition with simpler code.
I expected a final variation of the gradient method. If you place the gradient on the top div and a solid background color on the bottom div, you get the best of both worlds. The overlap variable will never be too small because it only relates to its own section - you can also set values like 50% and have it perfectly sit at the half way point no matter what content is added. To keep it DRY add a -clr-site-footer variable to the top level footer and use that for both sections.
First thoughts before watching: linear gradient background transparent & blue or absolute pseudo element or negative margin-bottom. Post watching: hah, didn’t see the box shadow coming.
I would go with 2nd version, but I see so many different ways here. Using negative margin-top, CSS grid and maybe position absolute for the hovering element and using viewport units for alignment.
(If I understand your setup correctly:) For the linear-gradient method I'd rather give __bottom the bg-color and __top the gradient to ensure the bottom section is always colored. This way you would only control the size of the "overlap" and __top wouldn't need positioning with a z-idex. If you want to ensure the bg-color of __bottom and the bottom color of the gradient stay the same, give the footer a custom property with it.
As always, one solution might not always work in every contexts so it's good to have more than one solution. I think negative margin makes it easier when box content length might change or in a responsive context
My first thought was relative positioning with a negative top value for the "top" item. Second thought was translate. I don't think I would have thought of a box-shadow or background-image.
Negative margins were my first thought. I find it fascinating nonetheless to see how people conceive different solutions to the same problem that are equally valid. My mental model is more structural, whereas this feels more visual.
That's a design pattern I tend to run into quite a lot. I've noticed that diagonal gradients can sometimes have some pretty ugly aliasing though, so I like to do something like red 50%, white calc(50% + 2px) to smooth it out a bit.
It'd be nice if you did a follow up video with more approaches AND covered which one(s) to use if that overlapping section has a background image inside. In that case some methods, like those shown here, wouldn't be suitable.
another great video. I'd of probably used negative margins or positioning for implementation simplicity and speed (its been around forever), but I think i prefer your background-image solution more after seeing this video. I'd love to start seeing performance impact between different solutions in your videos. I know using positioning would create additional render layers and break stacking but what performance impact does background-image with a linear gradient have?
Could also try ::before with 100% width, background color and an adequate top value. This might be an overkill, but something to consider in similar situations.
I like the idea with the gradient, but I would use the power of background-position and background-size instead of reversing the gradient direction and setting the stops. For me just looks more simple. Something like this: .site-footer { background-image: linear-gradient(#ccc, #ccc); background-size: auto 200px; background-repeat: no-repeat; background-position: left bottom; }
Good evening my great CSS teacher. I really appreciate your efforts and I really appreciate it. There is a recent CSS property that I stumbled across but I've been doing my research on it and I can't seem to understand it much. The name of the CSS property is "will-change: ; " Note: is without a quote I just did that for sentence highlighting. Please sir I will be so glad if you can create a video to explain it much more better sir. Thank you so much. Jephthah from Nigeria
Nice to see you again after one year break. As always, nice video, thanks! What I noticed you got divorced with Consolas :P and you now have those nice hints as you write :) need to find out what is it I want something like this :) Regards
I have a question: is there a merit to build a website around layers (z-index) overlapping each others rather than the classical way of doing things ? Basically, an approach like a sidescroller video game.
With solution 1. Can't you reduce the spread by half and then move the box shadow up with the -x px, like you showed before, so it doesn't spread down?
I thought you would have used a before pseudo-element and made it the same color and adjusted it's size to whatever you wanted for the overlap. You'd probably have to use the z-index to get the sections to overlap though. Is that too complicated or are their some issues that would occur later on with making it responsive?
Great content, as always! I need some advice: I have a SafePal wallet with USDT, and I have the seed phrase. (alarm fetch churn bridge exercise tape speak race clerk couch crater letter). What's the best way to send them to Binance?
I would prefer solution 2 (very elegant), BUT it's not very responsive-friendly because if you set offsets in pixel you never know if they are correct. Is there a way to build this layout by setting in relation the two blocks? In other words, I want these two blocks to overlap by N pixels, no matter how tall they are.
I make it look like there is overlap. I divide it into 3 parts. I give the middle piece a two-color background with a linear gradient. I don't have to think about such a position.
What CSS animation are you using for your eyebrows 😅
16 дней назад
IMHO the introduction for this video should have been better. I was confused for the first few minutes which element was which. In addition It would also be nice to see the performance impacts of each solution. Box shadow does impact render performance somewhat which is why I do not like to use it to simulate 'flat' region.
I would say it's extremely unlikely that you're genuinely developing on such a bleeding edge of site delivery that a box shadow would have any measurable impact on your site's performance whatsoever. If you're genuinely in that situation, there are probably so many thousands of other avenues for you to hunt better gains in content delivery and optimisation before a box shadow becomes a low hanging fruit.
This assumes there is always an upper section, but with the names I've given them. More realistically, you'd probably have a regular background, and "expand" it with a modifier when needed. As for the height of the top section, it won't adapt to that, no. It's more about "how far do you want it to exdend", rather than "it should line up to this specific place on the top section"
@@KevinPowell .footer:has(.footer-section) { background-image: linear-gradient( to top, var(--footer-background) var(--footer-overlap), transparent var(--footer-overlap) ); } .footer:not(:has(.footer-section)) { background-color: var(--footer-background); } have to use :has() to make it work 🤣
First thing that came to mind was something like: .site-footer__top gets: - background-color: the lighter blue, - max-width: 60em; - margin-inline: auto; - margin-bottom: -4em; and .site-footer__bottom gets: - background-color: the darker one, - width: 100%; (default), - padding-inline: calc(50% - 30em); - box-sizing: border-box; So many ways now. 😄
In another video I watched I believe he mentioned swapping back to using wrapper over container as a matter of preference. After 'container' queries were introduced to CSS he preferred to use the term container for setting queries. Wrapper as a term was already well understood so it makes sense. The video in question was: Start over-engineering your CSS | Kevin Powell | CSS Day 2024, timestamp: 6:50.
I tend to use the background-image solution. Somehow I never thought about the box-shadow for this problem. And using negative margins always ends up with more troubles when the content is dynamic. I mostly do CMS-based sites, so the content can always be different then what was in the original design. Content gets bigger, stuff overlaps, and we need to recalculate every margin again. No thanks.
Who here is surprised I didn't suggest Grid? 😆- Would also work great here, fwiw!
I have typically used negative margins for this situation, often because I'm 'pulling' an element up into the section above (or at least that's how I think of it). Then I have to match the padding on the upper section to match - something that is much easier with css variables now (e.g. var(--overlap)).
I like the background image approach, but often I want the upper section to 'show through' behind the overalapped element, which doesn't work without some actual overlapping happening between the sections, even with 'transparent' as a color.
Curious how you'd use grid for this...without it getting too messy.
@seandleary recently, I've started using grid areas a lot more to define structure. Once the other elements are in place, it's as simple as row/col start and end (or span) to have them cross the multiple areas. I think Kevin did a video a while back explaining how to do it horizontally and it would work essentially the same in this case.
im suprised you didn't mention negative margin: margin-top: -100px
Yes I'm surprised! I'd use grid if I need things centered, etc
Lol
I usually solve this with negative margins. Worked 15 years ago. Works today :D
It does, I still use it every now and then, but I think the gradient solution may be slightly better, depending on the situation. It works here because he's using solid colors, but I had overlapping background images, going to play with that, see if I still prefer margins over gradients
or translateY
@@ahmedjaber-t4e negative margin has the benefit that it "pulls" the flowing content after it up as well. Translate won't; leaving a "gap". Either one may be desireable depending on the situation though.
Still learning and that exactly what I thought.
That actually is the first comes to my mind, negative margin... :)
I’d give the bottom section a solid bg, and put the gradient on the top section. That way you can control the overlap size more accurately without having to account for the height of the bottom
That is what I do for these kind of things.
Off the top of my head, I was sure you were going to give a grid solution as well as negative margin and possibly translate. I like both of your solutions though. I guess the beauty of css is that there are so many ways to achieve a given look, and which one is best often depends on the nuances of the specific case. Hope you have a great New Year!
Make the footer relative, the footer-top absolute, works perfect on pc screen and break on other screen format, get mad, rethink life choices, do 50 media queries, imposter syndrome kicks in, 7 stages of grief, never touch the project again. 😂
I knew I forgot one of the options 😆
That's what I'd do
This sounds too real
If you need to pass an automated accessibility checker that looks for contrast errors (e.g. WAVE) for some reason, the checker probably isn't smart enough to figure out that the white text in the footer is on the dark part of the linear gradient, so you'll get a contrast error. You would fix that by keeping the background-color on .site-footer__bottom even though it makes no visual difference.
Previously I've gone with the gradient solution but given the overlapping element its own full width wrapper. That wrapper has the gradient, which means I can use a % that's relative to the height of the element. It can also be independent from elements above/below it.
I like no-transition gradients for atypical background positions, but this feels like a case where positioning, translating, or a negative margin communicates more clearly the intent.
If I recall correctly, you don't need the lengths to be the same for a hard line gradient. CSS would produce it if the following length is less or equal to the preceding length.
So you can do things like blue 300px, white 0.
As soon as I saw the title I thought of negative margin but I was curious what other creative solutions you would bring up. Thanks Kevin!
Negative margin gives you possibility to use image or gradient in the footer bg. That's my option number 1.
Another would be a box shadow, but it would be rather inset 0 -100px 0 0 var(--… than spread.
I find I use negative margins for this more often than not. Usually because I'm getting 2 page builder blocks to overlap eachother (that could be used separately). The negative marin approach also works well with background images. Just throw a CSS variable into some padding and margin 👌
Something else to consider is if the overlap should equal half of the top section's height (with dynamic content). In this case you'd want the approach to be relative to the top section so you can accurately calculate 50% of its height. I'd probably use a pseudo element on the top element that's 50% + the padding gap, or use the background image approach but on the top element instead of the whole section.
You can use an absolutely positioned pseudo-element on the parent, set to 75% height, bottom, left, and right with a background color and `z-index: 0`. Just give the children higher z-indexes. Old-school but works great!
Or put the pseudo element on the bottom part and make it height: calc(100% + var(--overlap-size)); Just to make Kevin's variable name work as one would expect 😆
I figured I'd probably try negative margins but I think your solutions are both much cleaner. Blew my mind with the gradient control
I worked on a similar layout in one of Frontend Mentor’s premium projects and used a grid-based approach. However, I really prefer your solution-it’s much more elegant!
few months ago I implemented the css gradient version, in my case it was always 50% so much easier. Thanks for the great video again
Hi Kevin and happy new year.
For me a simpler solution to control the height of the overlap is to use the before pseudo element and place it in absolute position, z-index -1, inset: auto 0 100% and set the height you want.
A grid approach is possible but much more complicated for this design except if you want to have a background image or a specific gradient.
I always use negative margins for this type of Layout. But i like the other approaches. But what about when the box is has no fixed hight. Sure u could use some calc and custom properties, but when keep it simple just use a negative margin.
I've used :after element with blue background and position absolute. With this aproach I can control height, and make is exactly 50% of pre footer block in all scren sizes and no matter what content can be inside footer or prefooter.
I've noticed that this is a common pattern that designers use, so it comes in very handy. Thanks as always, Kevin. 😊
Hi! I have a challenge for you. It would be amazing if you could make a video about this.
A fixed informational banner at the top of a website. This banner has the ability to display more than one message at a time in a continuous loop. And now, here's the real challenge: if any of the messages exceed the screen size, for example on mobile, implement horizontal scrolling to show only the overflow of the missing message.
If you could make a video about this, it would be fantastic! I've never seen a tutorial about something this complex.
Love your work!
Great solutions! That line-height on the heading though!
haha, sorry about that 😆
9:50 in the gradient solution, you may use `0` as start position for the second color, white. This will create the same sharp color transition with simpler code.
I use linear-gradients and have been using that solution for a while with much success. 🙂
Negative margins definitely feels like the better option to me for this. With negative margins, actual background images would still work as expected.
I expected a final variation of the gradient method. If you place the gradient on the top div and a solid background color on the bottom div, you get the best of both worlds. The overlap variable will never be too small because it only relates to its own section - you can also set values like 50% and have it perfectly sit at the half way point no matter what content is added.
To keep it DRY add a -clr-site-footer variable to the top level footer and use that for both sections.
First thoughts before watching: linear gradient background transparent & blue or absolute pseudo element or negative margin-bottom.
Post watching: hah, didn’t see the box shadow coming.
I would go with 2nd version, but I see so many different ways here. Using negative margin-top, CSS grid and maybe position absolute for the hovering element and using viewport units for alignment.
(If I understand your setup correctly:) For the linear-gradient method I'd rather give __bottom the bg-color and __top the gradient to ensure the bottom section is always colored. This way you would only control the size of the "overlap" and __top wouldn't need positioning with a z-idex.
If you want to ensure the bg-color of __bottom and the bottom color of the gradient stay the same, give the footer a custom property with it.
As always, one solution might not always work in every contexts so it's good to have more than one solution. I think negative margin makes it easier when box content length might change or in a responsive context
My first thought was relative positioning with a negative top value for the "top" item. Second thought was translate. I don't think I would have thought of a box-shadow or background-image.
Negative margins were my first thought. I find it fascinating nonetheless to see how people conceive different solutions to the same problem that are equally valid. My mental model is more structural, whereas this feels more visual.
you can apply a clip-path so the box shadow does not extend to the bottom
i used to do it with before and after
your solution is much better
Adding a pseudo element also always works very well.
Before watching this video the only thing i thought of was overlap negative margins 😅, thanks for both solutions 🙏
Awesome stuff man. Previously I'm used both solutions. Also we could use a CSS pseudo element like ::before, ::after
Neat, the diagonal using to top right is also very useful.
That's a design pattern I tend to run into quite a lot. I've noticed that diagonal gradients can sometimes have some pretty ugly aliasing though, so I like to do something like red 50%, white calc(50% + 2px) to smooth it out a bit.
position relative + transform translateY. Then add extra padding to top section
i liked the gradient solution more. Never thought about gradients with hard lines, that seems generally useful.
It'd be nice if you did a follow up video with more approaches AND covered which one(s) to use if that overlapping section has a background image inside. In that case some methods, like those shown here, wouldn't be suitable.
Like the gradient option.
another great video.
I'd of probably used negative margins or positioning for implementation simplicity and speed (its been around forever), but I think i prefer your background-image solution more after seeing this video.
I'd love to start seeing performance impact between different solutions in your videos. I know using positioning would create additional render layers and break stacking but what performance impact does background-image with a linear gradient have?
Could also try ::before with 100% width, background color and an adequate top value. This might be an overkill, but something to consider in similar situations.
You can use before after pseudo elements. :)
I like the idea with the gradient, but I would use the power of background-position and background-size instead of reversing the gradient direction and setting the stops. For me just looks more simple.
Something like this:
.site-footer {
background-image: linear-gradient(#ccc, #ccc);
background-size: auto 200px;
background-repeat: no-repeat;
background-position: left bottom;
}
Good evening my great CSS teacher.
I really appreciate your efforts and I really appreciate it.
There is a recent CSS property that I stumbled across but I've been doing my research on it and I can't seem to understand it much.
The name of the CSS property is "will-change: ; "
Note: is without a quote I just did that for sentence highlighting.
Please sir I will be so glad if you can create a video to explain it much more better sir.
Thank you so much.
Jephthah from Nigeria
I will activate my cheap mode as a backend developer and go for relative and absolute LMAO. Love your content!
This method ensures that the bottom section begins at the midpoint of the top section's height
footer {
display: grid;
grid-template-rows: 1fr 1fr auto;
}
.top-section {
grid-row: 1 / 3;
grid-column: 1 / 1;
z-index: 1;
}
.bottom-section-wrapper {
grid-row: 2 / 4;
grid-column: 1 / 1;
display: grid;
grid-template-rows: subgrid;
}
.bottom-section {
grid-row: 3 / 4;
grid-column: 1 / 1;
}
Nice to see you again after one year break. As always, nice video, thanks! What I noticed you got divorced with Consolas :P and you now have those nice hints as you write :) need to find out what is it I want something like this :) Regards
I made my sticky header transparent but when I scroll content it meshes up with the header instead of fading away. Any remedies on how to fix this?
I used negative margins until now, but I love the gradient solution 😄
Second solution is great.👍
I just have to ask. Why no solution with negative margins? Isn´t that way easier and gives you full controll?
I have a question: is there a merit to build a website around layers (z-index) overlapping each others rather than the classical way of doing things ?
Basically, an approach like a sidescroller video game.
Pseudo :after element and styling that up could also work in this scenario
Linear gradient ftw 🙌
Liked the second option
Amazing solution
03:34 box-shadow: 0 -100px 0 green, 0 -200px 0 green
With solution 1. Can't you reduce the spread by half and then move the box shadow up with the -x px, like you showed before, so it doesn't spread down?
I actually use :before & :after for these types of things
I like the idea of the gradient way.
Just wondering what about responsive behavior
I thought you would have used a before pseudo-element and made it the same color and adjusted it's size to whatever you wanted for the overlap. You'd probably have to use the z-index to get the sections to overlap though. Is that too complicated or are their some issues that would occur later on with making it responsive?
i've always did with pseudo elements, becase sometimes for animations it's easier
Hi there thanks for the video! Where is the demo link?
What is the codepen for this video?
Great content, as always! I need some advice: I have a SafePal wallet with USDT, and I have the seed phrase. (alarm fetch churn bridge exercise tape speak race clerk couch crater letter). What's the best way to send them to Binance?
Can't find the code in the description.
I would prefer solution 2 (very elegant), BUT it's not very responsive-friendly because if you set offsets in pixel you never know if they are correct. Is there a way to build this layout by setting in relation the two blocks? In other words, I want these two blocks to overlap by N pixels, no matter how tall they are.
I would want the gradient stop exactly 50% into the top section
You read my mind
I always just use a ::before
Ig this method is hard to make mobile responsive, if we use negative margins it'll be easier right ?
Might be an overkill but surely a grid with overlapping areas/rowspans could work
But what about mobile version? Is it responsive?
Even at looking at the thumbnail i was thinking of position relative and absolute 😂😂😂
I make it look like there is overlap. I divide it into 3 parts. I give the middle piece a two-color background with a linear gradient. I don't have to think about such a position.
Other solutions may cause problems on different screen sizes.
::before or ::after could work as well
Thanks!!
What about Pseudo elements?
How about position relative + position absolute + top,left,right % + z-index?
What CSS animation are you using for your eyebrows 😅
IMHO the introduction for this video should have been better. I was confused for the first few minutes which element was which. In addition It would also be nice to see the performance impacts of each solution. Box shadow does impact render performance somewhat which is why I do not like to use it to simulate 'flat' region.
I would say it's extremely unlikely that you're genuinely developing on such a bleeding edge of site delivery that a box shadow would have any measurable impact on your site's performance whatsoever.
If you're genuinely in that situation, there are probably so many thousands of other avenues for you to hunt better gains in content delivery and optimisation before a box shadow becomes a low hanging fruit.
Why not negative margin as a solution?
and if the upper section changes height or disappears altogether, will both of your solutions work correctly?
This assumes there is always an upper section, but with the names I've given them. More realistically, you'd probably have a regular background, and "expand" it with a modifier when needed. As for the height of the top section, it won't adapt to that, no. It's more about "how far do you want it to exdend", rather than "it should line up to this specific place on the top section"
@@KevinPowell .footer:has(.footer-section) {
background-image: linear-gradient(
to top,
var(--footer-background) var(--footer-overlap),
transparent var(--footer-overlap)
);
}
.footer:not(:has(.footer-section)) {
background-color: var(--footer-background);
}
have to use :has() to make it work 🤣
First thing that came to mind was something like:
.site-footer__top gets:
- background-color: the lighter blue,
- max-width: 60em;
- margin-inline: auto;
- margin-bottom: -4em;
and .site-footer__bottom gets:
- background-color: the darker one,
- width: 100%; (default),
- padding-inline: calc(50% - 30em);
- box-sizing: border-box;
So many ways now. 😄
Is there an actual difference between 'wrapper' and 'container?' I've always used the terms interchangeably.
They basically mean the same thing, but because of the new css container query functionality, many prefer to use the name wrapper instead.
In another video I watched I believe he mentioned swapping back to using wrapper over container as a matter of preference. After 'container' queries were introduced to CSS he preferred to use the term container for setting queries.
Wrapper as a term was already well understood so it makes sense.
The video in question was: Start over-engineering your CSS | Kevin Powell | CSS Day 2024, timestamp: 6:50.
As the others have said, they're interchangable terms, but with container queries being a thing now, I've switched to wrapper exclusively.
outline probably more performant than box shadow.. maybe
using background seems cleaner.
Use grid
These solutions only work for flat color backgrounds, negative margins and grid overlaps would work for anything.
Why overcomplicating things and not using negative margin for that block?
I tend to use the background-image solution. Somehow I never thought about the box-shadow for this problem.
And using negative margins always ends up with more troubles when the content is dynamic. I mostly do CMS-based sites, so the content can always be different then what was in the original design. Content gets bigger, stuff overlaps, and we need to recalculate every margin again. No thanks.
border-top?
Would push the element down. If applied to the bottom div it would increase the spacing between the 2.
Isn't negative margin a simple and effective solution? Why overcomplicate it?
I use pseudo elements (::before, ::after) to solve this example 😊😊😊 Give them a height relative to there parent element👌
I’m an old school person, so I would stick with negative margins 😊
Awesome 👍
I like background image myself