PapaJoe Posted May 20, 2022 Posted May 20, 2022 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.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment