Jump to content

Drop shadow to improve visibility on certain text

Recommended Posts

1 hour ago, JordiVandenBroeck said:

Site URL: https://jordivandenbroeck.be

Hi, 

On my pricing page (jordivandenbroeck.be/pricing) I used text on images but the text is hard to read. I would like to add drop shadow to it but I don't know how. 

Can anyone help please?

Thank you very much in advance and kind regards,
Jordi

Try adding to Home > Design > Custom Css

section[data-section-id="61cd90c4c928c169031195e5"] .list-item-content__description *{
    text-shadow: 4px 4px 8px red;
}

Change the value until it meets your requirement

Support me by pressing 👍 if this useful for you

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
17 minutes ago, bangank36 said:

Try adding to Home > Design > Custom Css

section[data-section-id="61cd90c4c928c169031195e5"] .list-item-content__description *{
    text-shadow: 4px 4px 8px red;
}

Change the value until it meets your requirement

Support me by pressing 👍 if this useful for you

Thank you so incredibly much! That is exactly what I'm looking for except for 2 small things: how can I do the same for the title and the button on those same images? 

Thank you so so much!

Link to comment
10 minutes ago, JordiVandenBroeck said:

Thank you so incredibly much! That is exactly what I'm looking for except for 2 small things: how can I do the same for the title and the button on those same images? 

Thank you so so much!

You can try 

section[data-section-id="61cd90c4c928c169031195e5"] * {
    text-shadow: 4px 4px 8px red;
}

to apply all text in this section

Hope that it makes sense

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
34 minutes ago, bangank36 said:

You can try 

section[data-section-id="61cd90c4c928c169031195e5"] * {
    text-shadow: 4px 4px 8px red;
}

to apply all text in this section

Hope that it makes sense

Okay we are very close! Now the text inside of the button also has the drop shadow but that's not how it should be. All text should have the drop shadow except for the one inside the button but the button itself should have the drop shadow.

Link to comment
10 minutes ago, JordiVandenBroeck said:

Okay we are very close! Now the text inside of the button also has the drop shadow but that's not how it should be. All text should have the drop shadow except for the one inside the button but the button itself should have the drop shadow.

You can change it by yourself

image.thumb.png.4dd7da7d7655580b2774744bbd83c7df.pngThe first value is the horizon direction of shadow

The second one is the vertical direction of shadow

The third one is the blur-radius

Hope that it makes sense

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
Just now, bangank36 said:

You can change it by yourself

image.thumb.png.4dd7da7d7655580b2774744bbd83c7df.pngThe first value is the horizon direction of shadown

The second one is the vertical direction of shadown

The third one is the blur-radius

Hope that it makes sense

Thank you for your answer! I understand how I can change it myself but the problem is that the text inside of the button should not have the drop shadow. I can not change that independantly from the other text as it is now.

Link to comment
Just now, JordiVandenBroeck said:

Thank you for your answer! I understand how I can change it myself but the problem is that the text inside of the button should not have the drop shadow. I can not change that independantly from the other text as it is now.

Sorry for misunderstand. I thought that you also need to apply shadow for button

Only apply for heading, paragraph, not button, is it correct?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
46 minutes ago, JordiVandenBroeck said:

No problem at all! I probably didn't explain it very well. I would like shadow for heading, paragraph and box of button, not text in button. 

Thank you!

Try the following code instead of my previous one

section[data-section-id="61cd90c4c928c169031195e5"] {
	--shadow: 4px 4px 8px #000;
	h2 {
		text-shadow: var(--shadow);
	}
	p {
		text-shadow: var(--shadow);
	}
	.list-item-content__button-container {
		a {
			box-shadow: var(--shadow);
		}
	}
}

Let me know how it works on your site

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
3 minutes ago, bangank36 said:

Try the following code instead of my previous one

section[data-section-id="61cd90c4c928c169031195e5"] {
	--shadow: 4px 4px 8px #000;
	h2 {
		text-shadow: var(--shadow);
	}
	p {
		text-shadow: var(--shadow);
	}
	.list-item-content__button-container {
		a {
			box-shadow: var(--shadow);
		}
	}
}

Let me know how it works on your site

That is fantastic! Exactly what I was looking for! Thank you so incredibly much. 🙂

Link to comment

It's good to know that

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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.