Рецепты наложения текста на изображения

Я с огромным наслаждением читаю статью Эрика Д. Кеннеди (Erik D. Kennedy) 7 Rules for Creating Gorgeous UI (Part 2). Четвёртое правило в ней гласит: Learn the methods of overlaying text on images — Изучите методы наложения текста на изображениях. Думаю, что здесь можно было бы детальнее обсудить эту тему, рассмотреть вопросы кодирования и обратить внимание на технику.

# Тонирование

Изображение должно быть темным для большего контраста на границах текста.

Выбор картинки, которую вы показываете, конечно, зависит только от вас, но, как правило, в оригинале картинки очень светлые и текст при наложении становиться неразборчивым. Картинку можно затемнить, используя графические редакторы (Paint.NET^એ, PhotoShop^એ) или с помощью CSS тонирования. Самый чистый способ, скорее всего, заключается в использовании нескольких тонов, однако, реализация такого эффекта не совсем очевидна. Трюк тонирования заключается в использовании градиентов без перехода от одного цвета к другому, статического градиента от прозрачного к полутоновому.

.darken {
  background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(shoes.jpg);
}

Хотя затемнение наиболее просто и универсально, но можно найти и другие подходящие цветовые решения.

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

# Белый текст

Текст на изображении должен быть белым! — Попробуйте найти чистый и простой пример для опровержения. Серьезно. Только белый и ни какой другой.

Считаю это аксиомой, по крайней мере в том случае, когда вы пытаетесь делать классный дизайн. Маргинальный дизайн, как правило, предпочитает жёлтый.

# Картинка во весь экран

Когда у вас изображение во весь экран, то наложение текста неизбежно заставит подкрасить любую картинку. Есть масса вариантов, как это сделать и вот вам наилучший:

body {
  background: /* здесь всё, что касается тонировки и прочее */;

  /* Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока */
  background-size: cover;
}

Кстати, если вы хотите закрыть изображением весь экран, но обеспечить прокрутку вниз, то можно установить атрибут верхней области height в 100vh единиц.

Здесь надо немножко подправить для поддержки всех браузеров. Но если нужен гарантированный вариант с высотой, то воспользуйтесь комбинацией JavaScript.

# Text-in-a-box (Текст в коробке)

Умирающий, но простой и очень надежный способ. Создайте умеренно-прозрачный тёмный прямоугольник и накладывайте на него белый текст. Если наложение не достаточно прозрачно, то можно разместить прямоугольник внизу изображения, текст будет по-прежнему полностью разборчив.

Срабатывает при любой контрастной комбинации цветов.

Это легко сделать для одной строки текста. Но если есть какой-то шанс деформации текста при адаптивном дизайне, то это сложнее. Можно оставить название, как, display: block;, но это не очень элегантно, по сравнению с inline. С inline необходимо позаботиться о том, что бы после разрыва не было расстояния между строками.

После изучения нескольких вариантов, думаю, что смещения текста вниз box-decoration-break наилучшее:

.title { 
  background-color: black;
  color: #fff; 
  display: inline;
  padding: 0.5rem;
  
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

# Размытие

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

Наложите на основное фоновое изображение требуемый фрагмент и затем размойте его.

.module {
  background: url(http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.jpg);
  background-attachment: fixed;
  overflow: hidden;
}
.module > header {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px 10px;
  background: inherit;
  background-attachment: fixed;
}
.module > header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  background-attachment: fixed;
  -webkit-filter: blur(12px);
  filter: blur(12px);
}

В дополнение к размытию можно использовать подкрашивание, но это не обязательно. Достаточно хорошо работает простое размытие:

Смягчение только части изображения Эрик называет холстом.

Холст можно сделать с помощью специальных фото-приспособлений, которые смягчает контраст. Но сейчас это проще сделать визуальными приёмами при проектировании так, что-бы накладываемый текст стал более разборчивым.

# Floor Fade (Увядший подвал)

Увядшим подвалом называется эффект, когда фоновое изображение мягко затеняется к низу, а затем внизу накладывается белый текст.

Довольно очевидно, пожалуй, что используется подкрашивающий градиент, но …

.module {
  background: 
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.6)
    ),
    url(skyscrapers.jpg);
}

Возможно, получится и с меньшей плотностью затемнения, если добавить к тексту небольшую тень:

.title {
 text-shadow: 0 1px 0 black;
}

---

В заключение…

1. Довольно интересно поискать другие способы и поиграть с сочетаниями описанных методов;
2. Уверен, что найдутся браузеры, где эти демки не работают. Может быть, есть предложения, как это избежать, тогда оставляйте свои комментарии.

По мотивам: Design Considerations: Text on Images