[Resolved] Shadow CSS?

[chris]

Hi I’m using containers to build the site content in, and was wondering if i can add a shadow effect where they join. Sort of like all containers under the top one appear as they are below the next content container at the bottom if that makes sense?

[Elvin]

Hi,

Can you link us to the site in question? So we could have an idea of which is the best way to approach this.

You can add the site details on the Private Information text field.

A wise man once said:
"Have you cleared your cache?"

[chris]

Done.

[Elvin]

Can you specify which containers you’d like to have shadows?

If its all of the gb containers, you can try adding CSS of something like this:

.gb-container {
    -webkit-box-shadow: 10px 10px 28px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 28px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 28px 0px rgba(0,0,0,0.25);
}

A wise man once said:
"Have you cleared your cache?"

[chris]

Hi something like that works yeah, just if you try it yourself on the site it seems to do all the boxes, and on someof my images where there are abit of white it shows and makes the site look silly. Any suggestions id like it just on the home page under the picture where the white starts. Thanks

[David]

Hi there,

select the Container Block(s) you want to apply the shadow to, go to Settings > Advanced –> Additional CSS Class(es) and add: box-shadow then change the CSS to this:

.gb-container.box-shadow {
    -webkit-box-shadow: 10px 10px 28px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 28px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 28px 0px rgba(0,0,0,0.25);
}

You can now apply box-shadow to any container you require it on.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[chris]

Thanks

Is there a way to make the shadow only appear at the bottom of the block? Many thanks.

[Leo]

You can use this to tweak the shadow CSS to be whatever you want:
https://www.cssmatic.com/box-shadow

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[chris]

Link doesnt work for me?

[David]

Try this generator:

https://cssgenerator.org/box-shadow-css-generator.html

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[chris]

Thanks David,

Thanks for that, however im struggling with that editor. Im aiming to stop the shadow displaying at the sides and top, sorry to be a pain.

[Leo]

I believe setting the horizontal shadow length to 0 should work.

This might also help:
https://stackoverflow.com/questions/4561097/css-box-shadow-bottom-only

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[chris]

Awesome thanks worked.

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts