[Resolved] box-shadow for .inside-article with :before pseudo-element

Home Forums Support box-shadow for .inside-article with :before pseudo-element

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1267741
    Mathias

    Hello,

    I want to create a soft drop shadow for the .inside-element (content area).

    I used this code:

    .full-width-content.separate-containers.single .inside-article, .full-width-content.one-container .site-content::before {
    content:””;
    box-shadow: 0 0 50px 30px whitesmoke;
    width:100%;
    height: 100%;
    top: 50px;
    z-index:-99;
    }

    I only want shadow to be left and right of the white content area, not at the top an down.

    When you look at the website, you see that the shadow goes above the top into the image. I tried using z-index, but it did not work.

    thank you very much for your support and time.
    Mathias

    #1268050
    Tom
    Lead Developer
    Lead Developer

    Hi Mathias,

    I played with this in developer tools, but I just wasn’t able to make it work.

    It might be worth asking over on stackoverflow.com – someone might have a cool trick they know of. You may need to use background images.

    Sorry I can’t be more helpful!

    #1268119
    Mathias

    thanks for taking your time to look into it.

    Actually I want to replicate the design of this theme with Generatepress.

    https://demo.bizbudding.com/corporate-pro/welcome-to-the-gutenberg-editor/

    You can see the soft drop shadow, but not all along the container down.

    They used these css styles:

    .page .content:before, .single .content:before, .error404 .content:before {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 40rem;
    box-shadow: 0 -5rem 10rem rgba(42,49,57,.05);
    content: ”;
    pointer-events: none;
    }

    I also tried to figure it out how it could work in Generatepress, but I could not achieve it.

    Maybe after looking into the theme mentioned above you might have another idea how this could be possible in Generatepress.

    I would prefer GeneratePress over Genesis due to its flexibility.

    Thanks again for your great support.
    Mathias

    #1268139
    Mathias

    Hi Tom,

    I added this style to the page-hero class and it gives also a nice drop shadwo effect to the bottom of the hero image.

    .page-hero {
    box-shadow: 0 0 40px 40px whitesmoke;

    }

    This is fine for me. It looks pretty cool.

    thanks
    Mathias

    #1268477
    David
    Staff
    Customer Support

    Hi there,

    just for the fun of it – to replicate the example site you could do this:

    .page-hero + #page .inside-article {
        position: relative;
    }
    
    .page-hero + #page .inside-article:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 300px;
        box-shadow: 0 -5rem 10rem rgba(42,49,57,.05);
    }
    #1275668
    Mathias

    thank you so much David, that did the trick.

    I would like to know about this tag combination .page-hero + #page

    What does this mean exactly? I know about the class .page-hero, but how did you come up with the id #page? I am will to learn more about CSS.

    Thanks again for taking your time.

    #1276037
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    That code targets the #page element that is directly after the .page-hero element.

    So this would apply:

    <div class="page-hero"></div>
    <div id="page"></div>

    This would not apply:

    <div class="page-hero"></div>
    <div class="something-else"></div>
    <div id="page"></div>
    #1276440
    Mathias

    thank you very much

    have a great day

    #1276998
    Tom
    Lead Developer
    Lead Developer
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.