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? 


 .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

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 useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

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.