Содержание
С фоном у текста есть проблема – у элемента с 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 место — желтый шрифт на розовом
- Согласно данным Т.Х Нильссона — эксперта в области читабельности цветной графики и шрифта в рекламе — шесть комбинаций оказались более читабельными, чем черный шрифт на белом фоне.
Шрифт на фоне — Рейтинг
- Черный на розовом
- Черный на желтом
- Черный на оранжевом
- Темно-зеленый на желтом
- Черный на красном
- Темно-зеленый на белом
- И вот только здесь! — Черный на белом
Тем не менее все исследователи считают, что темный шрифт на светлом фоне представляет собой наиболее читабельную комбинацию.
И многие эксперты склоняются к тому, чтобы отдать предпочтение черному шрифту на белом или желтом фоне в различных средствах рекламы — как наружной , так и онлайн — рекламе.
Когда вам надо будет создать рекламный текстовый баннер — заметный и читабельный — воспользуйтесь советами этой статьи.
Вот, например, я сделала такой баннер — заголовок к статье.