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

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!

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

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

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);
}

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.

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>

thank you very much

have a great day

Thanks! You too :)