3

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?

|improve this question
  • 2
    there is no 'best' color. If you're asking what to do to make the white text more readable, the answer would be to not put it on top of a photo. But if that's what you want, stick with just one drop shadow, and go with a black color with a soft blur to best add a bit of contrast. The current double-hard-line shadows are way too jarring. – DA01 Feb 6 '12 at 3:54
  • 2
    It doesn't help at all that you are putting white text above black & white image that happens to have quite light background where the text is sitting. I would probably end up putting black background to the menu: jsfiddle.net/lollero/qxyNC/1/show ( The code itself is not a recomendation, just the visual style of it. ) – Joonas Feb 6 '12 at 8:13
4

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.

|improve this answer
3

The shadow looks more like a broken stroke and it interferes with the letterforms. I would probably go with a softer shadow with more spread, or a band such as the one that Lollero mentioned in a comment.

|improve this answer
  • @Mooh ..Or one way could be to use images instead of actual text. That way you could make proper strokes to the 'text' and proper shadows as well. Though that only works for very static website menu and is not very convenient even then. – Joonas Feb 8 '12 at 7:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.