Jump to content

Adding drop shadow to text using CSS?

Recommended Posts

I’ve found some examples of code that you can add to a site’s CSS that will provide a drop shadow to text. An example is:


h3.a {
 color: white;
 text-shadow: black 0.1em 0.1em 0.2em
}

I would like to make all the text including all heading and navigation have a small drop shadow because the text is white on a coloured background. Does anyone know if there is a simple way to do this or would I have to add specific instructions to add the shadow to each type of text in each section?

Thanks!

Link to comment
  • Replies 5
  • Views 26.8k
  • Created
  • Last Reply

Looks like I figured it out! Anyone wanting to add a shadow to text (entire site) just needs to add the following code to the custom CSS tool in the style editor.


body {
 text-shadow: 2px 4px 3px rgba(0,0,0,0.5);
}

(text-shadow: horizontal-offset, vertical-offset, blur, colour)

As per: 12 Fun CSS Text Shadows You Can Copy and Paste

It makes white text on a coloured background easier to read and pop from the page a little.

Cheers!

Link to comment
  • 2 years later...

How about adding the shadow on the page title and description on Parallax images? I know I could add overaly over the pictures and under the text, but I like the site more without the overlay. See examples below: I mean the text TAHDOLLA TEHOKKUUTTA and so on. It would be more visible with a small shadow.

alt text

etusivun-kuva.jpg.ba5b7d16543a2d1cbdd349d3d5f9ddf9.jpg

Link to comment
  • 2 months later...

@ja55e

I don't know if you still need this code but I just found this thread - Anyways you have to right-click and inspect your page and highlight the title text in the banner...

Then, copy the YUI code and add it to your css. So it looks like this in your css.


#yui_3_17_2_2_1460472223463_5254  {

text-shadow: 3px 5px 3px 

 rgba(0,0,0,.6);

}


That's it!

Link to comment
  • 8 months later...
  • 7 months later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.