1

I have a an html element in the DOM;

<h5 class="white-shadow"> Basic </h5>

It has the following css rule attached; 

.white-shadow{
    text-shadow: -1px 0px 5px #ffffff; 
}

The h5 is within a list element that has a gray background. The idea is to add the white text shadow for better readability. The odd thing is that I see no results.

This is what I see in the browser;

html

This is what devtools shows me;

devtools

But if I change the background color from white to red I am able to see the change.

This is what I see in the browser;

enter image description here

This is what devtools shows me;

enter image description here

I haven't touched the alpha parameter of the text shadow rule. For some reason the red text shadow color is visible while the white text color is not.

I am using bootstrap3, although I don't expect that it is blocking white text shadows anywhere.

Why can't I see the white shadow around the text? How could I fix it?

cantdutchthis
  • 31,949
  • 17
  • 74
  • 114
  • It is working: http://jsfiddle.net/6ZkHg/ – Amberlamps Jan 28 '14 at 11:05
  • Works - http://jsfiddle.net/Y45Fk/1/ , it's just that the hex difference is not much, cuz #eee, and #fff are not too dark and light shades – Mr. Alien Jan 28 '14 at 11:06
  • Agreed: http://jsfiddle.net/t4cQy/ This is either the bg and text-shadow color being too close or a CSS specificity / override issue. – Paulie_D Jan 28 '14 at 11:06
  • Ah yes. I now see. The background color is #eeeeee, which is too similar to #ffffff to be spotted by the blind eye, even when zoomed in. – cantdutchthis Jan 28 '14 at 11:09

1 Answers1

3

Shadow is there in the DOM but because of your background-color, it is not much noticeable see here

My suggestion, either change shadow color or background-color

here is what you want

use 

.white-shadow{
    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

text-shadow value quoted from thread : Text border using css (border around text)

Community
  • 1
  • 1
NoobEditor
  • 15,563
  • 19
  • 81
  • 112