Archived topic
Page edge shadow
12 replies · Started by Randy on June 16, 2020
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.
Hi there,
Can you link me to the example page in question?
Heh! Couldn't remember, since it's not a site I frequent, but found it: https://gundigest.com
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.
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.)
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.)
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.
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).
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?
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.
Can you set the Header to Full Width
Ah, that worked. Thanks, David (and Leo). Much appreciated.
Glad we could be of help
