[shadyshaunParticipant]

Hello,

I’ve tried some different code snippets but have not managed to figure it out. Please can you tell me how i would implement the shadow element as seen in the attached image.

Thanks in advance for your help!

[ChristopherModerator]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[shadyshaunParticipant]

Hello,

The URL is http://www.wemakeclothes.com – i can send over a purchase confirmation code if needed as the page has a coming soon landing page.

Many Thanks,

Shaun

[ThaiModerator]

Hi Shaun,

Please add the following CSS under Customizer > Custom > Global CSS:

.section-shadow {
    box-shadow: 0px 0px 5px 4px rgba(110, 110, 110, 0.5);
    -webkit-box-shadow: 0px 0px 5px 4px rgba(110, 110, 110, 0.5)
    -moz-box-shadow: 0px 0px 5px 4px rgba(110, 110, 110, 0.5);
    -o-box-shadow: 0px 0px 5px 4px rgba(110, 110, 110, 0.5);
}

After that add the section-shadow class to the class field of your section:

View post on imgur.com

Hope it helps 🙂

[shadyshaunParticipant]

That’s fantastic thank you it works great!!

If i wanted to put the shadow at the bottom instead of the top what would i need to change please??

[ThaiModerator]

Hi There,

In that case, please try with this CSS:

.section-shadow {
box-shadow: 0px 4px 4px 0px #242424;
-webkit-box-shadow: 0px 4px 4px 0px #242424;
-moz-box-shadow: 0px 4px 4px 0px #242424;
-o-box-shadow: 0px 4px 4px 0px #242424;
}

You can see the live example on this page: http://www.css3generator.in/box-shadow.html.

Hope it helps 🙂

[shadyshaunParticipant]

Hello,

Thanks for the link. Unfortunately i need both on the same page. So one part of the page has the shadow at the bottom, and another section has the shadow at the top.

I copied and pasted the 2nd CSS code into Global CSS but they cancelled each other out. Is there a way round this?

Thanks once again, sorry for making it more complicated!

[ThaiModerator]

Please try with the following CSS:

.section-shadow-bottom {
box-shadow: 0px 4px 4px 0px #242424;
-webkit-box-shadow: 0px 4px 4px 0px #242424;
-moz-box-shadow: 0px 4px 4px 0px #242424;
-o-box-shadow: 0px 4px 4px 0px #242424;
}
.section-shadow-top {
box-shadow: 0px -4px 4px 0px #242424;
-webkit-box-shadow: 0px -4px 4px 0px #242424;
-moz-box-shadow: 0px -4px 4px 0px #242424;
-o-box-shadow: 0px -4px 4px 0px #242424;
}

Then you can use the section-shadow-top and section-shadow-bottom classes.

Hope it helps 🙂

[shadyshaunParticipant]

That’s great! Thank you!

[RadModerator]

You’re welcome!

[Author]

Posts