Pseudo full width to header using CSS shadow property

[codeispoetry]

I have used this CSS:

.wshadow {
    box-shadow: 1400px 0px 0px #FFFFFF, -1400px 0px 0px #FFFFFF;
}

But I am unable to achieve extended full width white space in the left over margin

[umeshdobai]

Hi @codeispoetry
if you want full width then why you have used margin pixel in css.

[PaulOB]

@codeispoetry

But I am unable to achieve extended full width white space in the left over margin

I can’t see all your code but there are two things that could be wrong.

You may be hiding the overflow on the wrap or your content is smaller than the shadow width. The shadow cannot be wider than your content or it moves away from the content.

Here’s an old example.

[PaulOB]

For example if your layout is a mx-width of 1190px then you would need to keep the shadow to 1190px.

@media screen and (min-width:1190px){
 .wshadow {
    box-shadow: 1190px 0px 0px red, -1190px 0px 0px red;
 }
}

That will cater for screens that are up to 3 x 1190px wide ( = 3570px wide) which should be most everyone.

[codeispoetry]

Thank you so much.

So we can genralize it like this:

box-shadow: zpx 0px 0px #FFFFFF, -zpx 0px 0px #FFFFFF;

So if we are using max-width: 1200 px in that case z will be 1200px.
The mistake that I was doing was that i was putting maximum width of my screen, which is 1400px in that case.

Analogy: Difference between percentage and percentile.

[PaulOB]

@codeispoetry

So if we are using max-width: 1200 px in that case z will be 1200px .

Yes a box shadow cannot be larger than its box or it moves away from the box.

here’s a quick example that makes it clearer.

[codeispoetry]

Hi there, The example of codepen given by you is self-explanatory sir, but 3rd one is confusing. You have said 1200PX X 2 + 600PX = 3000PX what is the purpose? I couldn’t get its practical utility?

[PaulOB]

@codeispoetry

I couldn’t get its practical utility?

The element is 600px wide so in theory you can only have a shadow on each side that is 600px wide. That will mean the total width is 1800px and any screens greater than 1800px width will have white space at the edges where the shadow does not meet the viewport edge (like example 2).

In the third example I added another box shadow (as you can have multiple shadows) and gave it double the box width. This moves the shadow 600px away from the box. However as we already have the first shadow covering that first 600px we see no gap and now we have a box shadow that extends 1200px each side.

I’ve coloured the second box-shadow green in this screenshot so you can see what is happening.

We could indeed add another shadow outside the green box and cover anyone with super large screens if we wanted