Ищу предложения по тому, как сделать текст более читабельным с помощью тени

Я хочу показать меню с элементами с отступом поверх черного фона . Перепробовала много цветов, но не нашла подходящие.

Я использую свойство csstext-shadow :

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

Вот скриншот для лучшего понимания:

введите описание изображения здесь

Я не удовлетворен, и я почти уверен, что есть лучше... Любое предложение, пожалуйста?

нет «лучшего» цвета. Если вы спрашиваете, что сделать, чтобы белый текст стал более читабельным, ответ будет заключаться в том, чтобы не размещать его поверх фотографии. Но если это то, что вы хотите, придерживайтесь только одной тени и используйте черный цвет с мягким размытием, чтобы лучше всего добавить немного контраста. Нынешние двойные жесткие тени слишком раздражают.
Совершенно не помогает то, что вы помещаете белый текст над черно-белым изображением, которое имеет довольно светлый фон, где находится текст. Я, вероятно, в конечном итоге поместил бы черный фон в меню: jsfiddle.net/lollero/qxyNC/1/show (Сам код не является рекомендацией, просто его визуальный стиль.)

Ответы (2)

Использование четырех теней вместо двух может дать лучшее приближение к эффекту контура, если вы этого хотите:

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

Немного неожиданно оказывается, что W3C действительно рекомендует этот хак в своих примерах CSS .

Тень больше похожа на прерывистый штрих и мешает формам букв. Я бы, вероятно, выбрал более мягкую тень с большим распространением или полосу, подобную той, которую Лоллеро упомянул в комментарии.

@Mooh ... Или одним из способов может быть использование изображений вместо текста. Таким образом, вы могли бы сделать правильные штрихи для «текста» и правильных теней. Хотя это работает только для очень статичного меню сайта и даже в этом случае не очень удобно.
Ищу предложения по тому, как сделать текст более читабельным с помощью тени
СпросиСетьПолитика конфиденциальности1y, 0v