Shadow on page with overflowing backgrounds

Community Forums Forums Design Tips and Tricks Shadow on page with overflowing backgrounds

This topic is: resolved

This topic contains 3 replies, has 2 voices, and was last updated by  Susan 1 year ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #64657

    EmilEriksen
    Participant
    Post count: 1

    Hi,

    I’d rather not include a link but this can be seen on mlftransport.dk.

    I recently bought Genesis and it’s amazing to work with so I figured I’d check out the support forums as well.

    I’m building a website where I have a couple of elements (navbar and slider) with different coloured backgrounds flowing over the “container” and I need to make a shadow effect like you can see on the website right now.

    The problem is that I’m currently using and svg element (id=”shadow”) absolutely positioned above the page content with pointer-events none however browser support for this is not the greatest. I’d love to hear any suggestion on how to do this differently becuase I’m drawing a blank :)

    My html structure is like this:

    <html>
        <body>
            <div class="site-container">
            // normal Gensis structure with a couple of elements with different coloured backgrounds
            <svg id="shadow"></svg>
            </div>
        </body>
    </html>
    

    Thanks

    #74490

    Susan
    Moderator
    Post count: 9544

    Hi, as you posted this a while back, I hope you got your issue resolved. If not, please check back, and I will escalate for you. If it is resolved, please mark “resolved”, and I will close it. Thanks!


    Susan @ Graphically Designing I offer theme customizations I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #74543

    EmilEriksen
    Participant
    Post count: 1

    Hi,

    I did resolve it. For anyone else who might run into this problem I basically used a combination of overflow-y: hidden;, box-shadow and z-index as far as I remember.

    I’ve marked the thread as resolved.

    #74565

    Susan
    Moderator
    Post count: 9544

    Thanks for coming back with the solution! Closing the thread now.


    Susan @ Graphically Designing I offer theme customizations I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Shadow on page with overflowing backgrounds’ is closed to new replies.