Looking for suggestions for making type more readable with a drop shadow

by

I want to show a menu with indented items on top of a black background. I tried a lot of colors but can’t find the right ones.

I’m using css property text-shadow:

text-shadow: 1px 1px #191919 , -1px -1px #444;

Here is a screenshot for a better understanding:

enter image description here

I’m not satisfied and I’m pretty sure that there is better… Any suggestion please?

Answer

Using four shadows instead of two may give a better approximation of an outline effect, if that’s what you want:

text-shadow: 0 -1px #000, 1px 0 #000, 0 1px #000, -1px 0 #000;

A bit surprisingly, it turns out that the W3C actually recommend this hack in their CSS examples.

Attribution
Source : Link , Question Author : Mooh , Answer Author : Ilmari Karonen

Leave a Comment