[Resolved] Shadow CSS?

Home Forums Support [Resolved] Shadow CSS?

Home Forums Support Shadow CSS?

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1559326
    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?

    #1559519
    Elvin
    Staff
    Customer Support

    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?"

    #1564480
    chris

    Done.

    #1564847
    Elvin
    Staff
    Customer Support

    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?"

    #1569124
    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

    #1569184
    David
    Staff
    Customer Support

    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.

    #1574618
    chris

    Thanks

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

    #1574714
    Leo
    Staff
    Customer Support

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

    #1577320
    chris

    Link doesnt work for me?

    #1577519
    David
    Staff
    Customer Support
    #1577618
    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.

    #1577801
    Leo
    Staff
    Customer Support

    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

    #1577838
    chris

    Awesome thanks worked.

    #1577840
    Leo
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.