Меню Закрыть

Фон для красного текста

С фоном у текста есть проблема – у элемента с display: inline при переносах текста не работают отступы (padding) по бокам. Исправить это можно следующими способами:

Вариант №1 – разметка тегами

Первый вариант так себе, но работает – обвернуть каждую строку в и добавить переносы строк
.

Вариант №2 – box-shadow

Второй без лишних тегов. Отступы задаются с помощью box-shadow: -10px 0 0 #FE8020, 10px 0 0 #FE8020; .

Пример с полупрозрачностью:

Вариант №3 – box-decoration-break: clone

CSS свойство box-decoration-break: clone; добавляет отступы у переносимых строк, но не все браузеры его поддерживают.

Проблема градиента

Во всех вариантах градиент нормально не работает из-за отдельных тегов, box-shadow или «переносится» в месте с текстом, как в примере:

Есть один способ – mix-blend-mode: lighten; (режим смешивания фоновых слоёв). Минус его в том что фон страницы должен быть однотонным и белый цвет текста.

Здравствуйте Уважаемые владельцы блогов. Давайте поговорим о сочетании цветовых фонов, в нашем конкретном случае о дизайне сайта/блога. Согласитесь, в дизайне первое впечатление-как воспринимается сайт посетителями.

Совместимость цветового фона играет определяющую роль: задержится ли посетитель на страницах Вашего блога или покинет его сразу, если фон подобран, как говорят "вырви глаз". В принципе нужно научиться подбирать цвета и для написания текста на разных цветовых фонах. Поможет нам в подборе совместимости фонов использование цветового круга. Давайте приступим:

  • Цветовая комбинация — цвет шрифта и цвет фона — очень сильно влияют на разборчивость текста.
Читайте также:  Фотошоп фильтр масляная краска не работает

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

Черный шрифт на белом фоне, не так ли? А вот и нет.

  • Наиболее удобной цветовой комбинацией в наружной рекламе считается черный шрифт на желтом фоне.

По данным института цвета «Pantone Color Institute» желтый и черный цвета представляют собой хроматические противоположности, а контраст яркости между этими двумя цветами составляет 85 процентов.

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

Цвет шрифта и цвет фона — Рейтинг

3 место — желтый шрифт на черном фоне

4 место — белый цвет шрифта на черном фоне

5 место — синий шрифт на белом фоне

6 место — белый шрифт на синем фоне

7 место — синий шрифт на желтом фоне

8 место — желтый цвет шрифта на синем фоне

9 место — зеленый шрифт на белом фоне

10 место — белый шрифт на зеленом фоне

11 место — красный шрифт на белом фоне

12 место — белый шрифт на красном фоне

13 место — красный шрифт на желтом фоне

14 место — желтый шрифт на красном фоне

15 место — розовый шрифт на белом фоне

16 место — белый цвет шрифта на розовом фоне

17 место — розовый шрифт на желтом фоне

18 место — желтый шрифт на розовом

  • Согласно данным Т.Х Нильссона — эксперта в области читабельности цветной графики и шрифта в рекламе — шесть комбинаций оказались более читабельными, чем черный шрифт на белом фоне.

Шрифт на фоне — Рейтинг

  1. Черный на розовом
  2. Черный на желтом
  3. Черный на оранжевом
  4. Темно-зеленый на желтом
  5. Черный на красном
  6. Темно-зеленый на белом
  7. И вот только здесь! — Черный на белом
Читайте также:  Iphone как съемный диск

Тем не менее все исследователи считают, что темный шрифт на светлом фоне представляет собой наиболее читабельную комбинацию.

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

Когда вам надо будет создать рекламный текстовый баннер — заметный и читабельный — воспользуйтесь советами этой статьи.

Вот, например, я сделала такой баннер — заголовок к статье.

Рекомендуем к прочтению

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

code

Adblock detector