Jump to content

Drop shadow on the floating text

Recommended Posts

Can anyone tell me how to add drop shadows on the text that floats on an image? I am not what you would call a power user for CCS. 
I think that this: text-shadow: 2px 4px 3px rgba(0,0,0,0.5);

is what I need to add but exactly where do I do that? 

THANKS!!

/* BG COLOR HEADER*/
 .transparent-header.has-banner-image #header #desktopNav .folder
.folder-child-wrapper {
background-color: rgba(33, 45, 48, .75);
}

.title-nav-wrapper {padding: 15px 80px;}

.parallax-item[data-url-id='sunday'] .title-desc-wrapper .title-desc-inner { display: none !important; }

#page {padding: 10px;}

.parallax-item[data-url-id='current-series'] .title-desc-wrapper .title-desc-inner { display: none !important; }

 #collection-56594531e4b0c6e18e3febac .title-desc-wrapper .title-desc-inner {
display: none !important;}

#collection-56594531e4b0c6e18e3febac .title-desc-wrapper.has-main-image   {
   min-height: 350px;}

#collection-56ba965ba3360ce1d09c9075 .title-desc-wrapper .title-desc-inner {
display: none !important;}

#collection-56ba965ba3360ce1d09c9075 .title-desc-wrapper.has-main-image   {
   min-height: 325px;}
 

Link to comment

Can you share the website URL, page, and password (if applicable) where you're trying to apply this effect? Thanks!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

Try adding this Custom CSS:

.title--description-alignment-center .title-desc-wrapper .page-title {
    text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.5);
}

Let me know if that help!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

You may want to adjust the pixel values to suit the smaller text size:

.main-nav ul li a, .main-nav ul li a:visited {
    text-shadow: 2px 4px 3px rgb(0 0 0 / 50%);
}

I hope that works, can you mark my post as the solution and give me a thumbs up if it does?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

Place in custom CSS below the previous.

Hope that helps! Can you mark the solution and give a thumbs up? Thanks!

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

Try this instead:

.main-nav ul li a, .main-nav ul li a:visited {
    text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.5);
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

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.