Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adding drop shadow to text using CSS?


aimaclellan
Go to solution Solved by aimaclellan,

Question

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!

Edited by TreyT
retag
Link to post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

5 answers to this question

Recommended Posts

  • 3

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!

Edited by aimaclellan
Link to post
  • 1

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 post
  • 0

@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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...