Jump to content

Section divider shadow

Recommended Posts

Site URL: https://www.libertypaversandpools.com/

Hi, I would really like to add a drop shadow to my section dividers.Below are the codes I used for the section dividers.
Attached are screenshots of my section dividers now and an example of the shadow effect I want from another website design.
The code:

/*Section divider bottom*/
#siteWrapper [data-section-id="5ed54385f129886328322d6b"], [data-section-id="5ed6a334bc06b25f9e4dfd30"], [data-section-id="5ed6a5fd03959f4465856615"], [data-section-id="5ed9096b6991040c506f0b1b"] {
  .section-background {
  overflow: visible;
      &:after {
    content: '';
    width: 100%;
    height: 15%;
    bottom: 0;
    left: 0;
    background: inherit;
  -webkit-mask: url(https://static1.squarespace.com/static/5ed4fc2a0ecef6476e9a98ad/t/6283dd5f7c3e1756f0aeadf0/1652809055617/waves.svg) top no-repeat;
    mask: url(https://static1.squarespace.com/static/5ed4fc2a0ecef6476e9a98ad/t/6283dd5f7c3e1756f0aeadf0/1652809055617/waves.svg) top no-repeat;
    margin-bottom: 1px;
    transform: translateY(100%);
    position: absolute;
    pointer-events: none;
    z-index: 2;
    @media screen and (max-width: 800px) {

      -webkit-mask-size: 100% 25%;
              mask-size: 100% 25%;
    }}}
}

 

/*Section divider top*/
#siteWrapper [data-section-id="5ed90a184a80dc4a5c089a24"], [data-section-id="627d7198bab2135fc03e7202"], [data-section-id="62816aa119ced63b9c0eee64"], [data-section-id="6283e736151b7b538aedb744"] {
  .section-background {
  overflow: visible;
  &:before {
    content: '';
    width: 100%;
    height: 30%;
    top: 0;
    left: 0;
    
    background: inherit;
  -webkit-mask: url(https://static1.squarespace.com/static/5ed4fc2a0ecef6476e9a98ad/t/62842980c917f573af2a905c/1652828544743/wavesNegative.svg) bottom no-repeat;
    mask: url(https://static1.squarespace.com/static/5ed4fc2a0ecef6476e9a98ad/t/62842980c917f573af2a905c/1652828544743/wavesNegative.svg) bottom no-repeat;
    margin-top: 1px;
    transform: translateY(-100%);
    position: absolute;
    pointer-events: none;

    @media screen and (max-width: 800px) {
      -webkit-mask-size: 100% 25%;
              mask-size: 100% 25%;
    }}}
}

URL: https://www.libertypaversandpools.com/

PW: shine

Thank you.

Captur22e.JPG

Section divider - Wave.JPG

Footer.JPG

Link to comment
  • Replies 0
  • Views 361
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.