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

Тонування

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

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

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

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

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

Білий текст

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

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

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

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

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

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

Текст у вікні

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

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

Розмиття

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

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

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

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

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

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

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

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

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

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