[Resolved] Page edge shadow

[Randy]

I love the subtle edge shadow effects on a site:

(if I can’t embed: https://snipboard.io/T5lPIO.jpg )

That’s on the “base page” — not within the content area. Probably not explaining it right, but on the right edge you can see the track of the browser “elevator”.

I tried this:

#page {
-webkit-box-shadow:0px 5px 10px #1c1c1c;
-moz-box-shadow:0px 5px 10px #1c1c1c;
box-shadow:0px 5px 10px #1c1c1c;
}

… but that adds a shadow to the content area of the page — the edge of the “contained” navbar/footer bar, not the edge of the browser page.

So, I’ve been trying and trying to do this without asking, but have come up empty. Thanks for any clue-by-four you can apply.

[Leo]

Hi there,

Can you link me to the example page in question?

[Randy]

Heh! Couldn’t remember, since it’s not a site I frequent, but found it: https://gundigest.com

[Leo]

Looks like it’s just using inset shadow:
box-shadow: inset 12px 0 35px -4px rgba(0,0,0,.2), inset -12px 0 35px -4px rgba(0,0,0,.2);

You can make you own using this site:
https://www.cssmatic.com/box-shadow

Just choose the inset option at the bottom.

[Randy]

Thanks; I’m 2/3 of the way there. My CSS isn’t good enough to know what things are called, so had no clue about “inset”.

But the next part is, how do I place it on the “outer” part of the page? (The blue on the edges is my desktop):

(This is done with #page {…}, which clearly isn’t quite correct.)

[Randy]

OK, that helped me do more research, and I have it in the right horizontal position:

body {box-shadow: inset 12px 0 20px -4px rgba(0,0,0,.2), inset -12px 0 20px -4px rgba(0,0,0,.2);
}

So is there a way to omit it entirely from the header area? And/or not include it on the upper edge?

(I realize this is not necessarily GP-specific, so I appreciate the tips.)

[David]

Hi there,

try this CSS:

body:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    box-shadow: inset 12px 0 20px -4px rgba(0, 0, 0, .2), inset -12px 0 20px -4px rgba(0, 0, 0, .2);
}

Make sure your Site Header has a solid background color.

[Randy]

That CSS does mimic Leo’s results, but that’s the problem: there’s still stuff in the header area (i.e., above the navbar).

“Make sure your Site Header has a solid background color.”

I’m unclear what you mean by this. Is there css to be added? If so, I don’t know what: everything I’ve tried to white out the bg failed.

There is no graphical element there, just the site title/tag in text.

Just to make sure you’re understanding, I’m wanting the edge shadow effect to not apply in the header (i.e., above the navbar).

[David]

You can set the Background color of the Site Header in Customizer > Colors > Header.
Do you have a link to your test site so i can take a look?

[Randy]

It’s already set to white, so that didn’t help. The shadow overlays the solid coloring.

It’s https://plugintest.cassingham.com — and I’m happy to give you admin access to the back end if that helps. You’ll just have to provide an email address to use for the account.

[David]

Can you set the Header to Full Width

[Randy]

Ah, that worked. Thanks, David (and Leo). Much appreciated.

[David]

Glad we could be of help

[Author]

Posts