Трохи дизайну: Текст на зображеннях

Тонування

Зображення повинно бути темним, мати невеликий рівень контрасту.

Вибір зображення - це ваша прерогатива, але давайте припустимо, що ви обрали світле зображення. Ви могли затемнити його програмно або з використанням CSS, накласти прозорий колір. Ймовірно, самий правильний спосіб зробити це - використовувати кілька фонів, але це не так вже просто і зробити. Хитрість полягає у використанні градієнта, що не змінюється, тобто є цільним.

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

See the Pen Darken Image with Multiple Backgrounds by Chris Coyier (@chriscoyier) on CodePen.

Чорний оверлей -  простий і універсальний, але можна використовувати різні кольори.

За допомогою цього методу ви можете обирати колір на власний смак:

See the Pen Darken Image with Multiple Backgrounds by Chris Coyier (@chriscoyier) on CodePen.

Білий текст

Він повинен бути білим!

See the Pen myPMGB by Chris Coyier (@chriscoyier) on CodePen.

Зображення на всю робочу зону

Це популярний спосіб - використання зображення в якості фону, кожен робив подібне хоча б раз.

body {
  background: /* робимо все тут */;
  /* Це буде гарантувати суцільне покриття */
  background-size: cover;
}

See the Pen zxqdev by Chris Coyier (@chriscoyier) on CodePen.

Якщо ви хочете охопити весь екран, але потім мати можливість прокручувати вниз, встановіть height: 100vh.

See the Pen myPMvp by Chris Coyier (@chriscoyier) on CodePen.

Браузерна підтримка трохи відрізняється. Тож краще робити фіксовану висоту за допомогою JavaScript.

Текст у вікні

Це максимально простий і дуже надійний спосіб. На швидку руку додайте м'який, прозорий чорний прямокутник і білий текст. Якщо накладання достатньо непрозоре, ви можете використовувати будь-яке зображення і текст, як і раніше, буде повністю читабельним.

Працює з будь-яким поєднанням кольорів.

See the Pen Darken Image with Multiple Backgrounds by Chris Coyier (@chriscoyier) on CodePen.

Розмиття

Несподівано хороший спосіб для накладання тексту - це розмивання частини базового зображення.

.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);
}

See the Pen yyOodm by Chris Coyier (@chriscoyier) on CodePen.

Крім розмиття, ми ще використовуємо колір, але це не обов'язково робити, звичайного розмиття буде достатньо

See the Pen ZYWXEY by Chris Coyier (@chriscoyier) on CodePen.

Пом'якшення частини зображення називається scrim.

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

Затемнення донизу

Floor Fade - це коли у вас є зображення, яке непомітно затемнюється донизу і на фоні цього затемнення ми розміщуємо білий текст.

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

See the Pen ByKwaq by Chris Coyier (@chriscoyier) on CodePen.

Ви можете піти іншим шляхом і не накладати сильне затемнення, якщо ви додасте невелику тінь до тексту:

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

На закінчення...

Це досить весело, знаходити інші способи і грати з поєднанням цих методів.

Сподіваюсь, ви знайдете ці демо корисними!