[Resolved] Page edge shadow

Home Forums Support Page edge shadow

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1330550
    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.

    #1330757
    Leo
    Staff
    Customer Support

    Hi there,

    Can you link me to the example page in question?

    #1333384
    Randy

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

    #1333457
    Leo
    Staff
    Customer Support

    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.

    #1333490
    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.)

    #1333504
    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.)

    #1333693
    David
    Staff
    Customer Support

    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.

    #1334366
    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).

    #1334369
    David
    Staff
    Customer Support

    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?

    #1334386
    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.

    #1334390
    David
    Staff
    Customer Support

    Can you set the Header to Full Width

    #1334536
    Randy

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

    #1335156
    David
    Staff
    Customer Support

    Glad we could be of help

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.