Текст не дуже читабельний на різних фонах зображення

30

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

Як говориться в заголовку, у мене є банер веб-сайту з декількома текстами, що відображаються на різних зображеннях як фони. Тепер, оскільки більшість зображень темні, я встановив колір шрифту як білий. Але навіть тоді частина тексту не дуже читається на кількох зображеннях, таких як:

стандартний

Оскільки я працюю з CSS, я спробував різні варіанти, такі як:

Додавання текстових тіней:

з текстовою тінню

CSS:

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

Також спробувавши, створивши напівпрозоре поле навколо тексту:

з напівпрозорим фоном

Демо

Я відчуваю, що коробка виглядає не на місці.

Я створив загадку для всіх, хто знає CSS. Якщо ні, будь ласка, не соромтеся порадити мене лише на основі вашої фантазії.

PS: Ви також можете порадити щодо використання іншого шрифту, якщо це допоможе йому краще виділитися.

— АйБ
джерело

4

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

— Джон

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

— АйБ

2

Треба було підкреслити, наскільки тонко я говорив. Як і 20-30% і широко, де ви навряд чи це помітите. Якщо це схоже на світіння, або ви можете побачити перехід - надто темно. Використовуйте достатньо лише для того, щоб зображення навколо нього зів’яло до трохи темнішого тону там, де воно відповідає буквеному листуванню.

— Джон

@John Hmm звучить цікаво, я теж спробую.

— АйБ

22

Як альтернатива вже чудовим відповідям, як щодо додання чорного дива з непрозорістю 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.

— АйБ

@Ican я не зробив коробку, тому що ти сказав це не робити. "Також спробував, створивши напівпрозоре поле навколо тексту. Я відчуваю, що поле одне виглядає не на місці". Але ваш сайт, ваш дзвінок ...

— Ендрю Ліч

Це правда, але, побачивши рішення SaturnsEye, я зрозумів, що він виглядав добре, коли розмір і колір були змінені. Вибачте за неправильний вибір слів. Можливо, я повинен пояснити краще наступного разу.

— АйБ

3

Надайте йому чорний прозорий фон і трохи підкладки

фоновий колір: rgba (0,0,0,0,5);

підкладка: 0,5ем;

Просто пограйте трохи з цими цифрами, але це має дати корисний результат.

— Філіп Фельдман
джерело

Дякую за ваш час! Я зрозумів, що якщо у вас є випадок, коли внутрішній елемент повинен мати іншу непрозорість у зовнішньому, opacityвластивість не допоможе в цьому випадку, тоді як встановлення непрозорості у background-colorвластивості виконує цю роботу. Як тут

— АйБ