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

[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

[Tom]

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!

[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

[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

[David]

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

[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.

[Tom]

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>

[Mathias]

thank you very much

have a great day

[Tom]

Thanks! You too 🙂

[Author]

Posts