Текст не очень читаемый на разных фоновых изображениях

30

Я пришел сюда в поисках небольшой помощи по дизайну или совета о том, как я мог бы улучшить следующее:

Как видно из названия, у меня есть баннер на сайте с несколькими текстами, отображаемыми на разных изображениях в качестве фона. Теперь, поскольку большинство изображений темные, я установил белый цвет шрифта. Но даже тогда, часть текста не очень читабельна на паре изображений, таких как:

стандарт

Поскольку я работаю с CSS, я пробовал разные варианты, такие как:

Добавление текстовых теней:

с тенью текста

CSS:

text-shadow: 3px 3px 0px #000;

Также попытался создать полупрозрачную рамку вокруг текста:

с полупрозрачным фоном

демонстрация

Я чувствую коробку, которая выглядит неуместно.

Я создал скрипку для тех, кто знает CSS. Если нет, пожалуйста, не стесняйтесь советовать мне, основываясь только на вашем воображении.

PS: Вы также можете посоветовать использовать другой шрифт, если это поможет лучше выделиться.

— AyB
источник

4

Мягкого черного внешнего свечения на вашем тексте (тень во всех направлениях) иногда может быть достаточно, чтобы придать ему более контрастный вид, не выглядя так, будто вы положили что-то позади него.

— Джон

@ Джон Я тоже думал о свечах, но без особого эффекта свечения проблема с нечитаемым текстом осталась, и, поскольку я работаю над корпоративным веб-сайтом, я решил избавиться от него, поскольку это выглядело бы непрофессионально. Спасибо за предложение, хотя!

— AyB

2

Должен был подчеркнуть, как тонко я говорил. Как 20-30% и широкое распространение, где вы вряд ли заметите это. Если это выглядит как свечение или вы видите переход - это слишком темно. Используйте только достаточно, чтобы изображение вокруг него поблекло до более темного тона, где оно встречается с надписью.

— Джон

@Джон Хм звучит интересно, я тоже попробую.

— AyB

22

Как альтернатива и без того отличным ответам, как насчет добавления черного div с непрозрачностью 50% за текстом?

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

Это позволит шрифту работать практически на любом изображении.

div {
    position:absolute;
    top:250px;
    left:140px;
    width:500px;
    height:50px;
    background-color:black;
    z-index:0;
    opacity:0.5;
}

ПРИМЕР

— SaturnsEye
источник

@ICanHasCheezburger Нет проблем! Я часто сталкиваюсь с той же проблемой, когда работаю на веб-сайте, например, с изображениями баннеров, и я считаю, что это наиболее приятный способ обойти это, поскольку он работает в большинстве случаев.

— SaturnsEye

17

Я предлагаю сделать шрифт жирным (просто изменение веса, а не сам шрифт) и переопределить тень так, чтобы она определяла все края букв:

Пример 1

font-family: Raleway;
font-weight:900;
text-shadow: 0px 0px 3px #000;

Вы можете даже объединить несколько текстовых теней, чтобы создать определенный контур, а также размытие:

Пример 2

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

— Эндрю Лич
источник

Спасибо за ваше время! Я планировал использовать text-shadowпредоставленное вами вместе с решением SaturnsEye.

— AyB

@ Я могу не делать коробку, потому что ты сказал не делать этого. «Также попытался создать полупрозрачную рамку вокруг текста. Я чувствую, что рамка выглядит неуместно». Но ваш сайт, ваш звонок ...

— Эндрю Лич

Это правда, но, увидев решение SaturnsEye, я понял, что оно выглядит хорошо, когда размер и цвет меняются. Извините за неправильный выбор слов. Может быть, я должен объяснить лучше в следующий раз.

— AyB

3

Дайте ему черный прозрачный фон и немного отступов

цвет фона: rgba (0,0,0,0,5);

набивка: 0.5em;

Просто поиграйте с этими цифрами, но это даст вам полезный результат.

— Филипп Фельдманн
источник

Спасибо за ваше время! Я понял, что если у вас есть случай, когда внутренний элемент должен иметь другую непрозрачность во внешнем, opacityсвойство в этом случае не поможет, тогда как установка непрозрачности в background-colorсвойстве делает свою работу. Как здесь

— AyB