Текст поверх полноэкранного фонового видео при помощи mix-blend-mode

Текст поверх полноэкранного фонового видео при помощи mix-blend-mode

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

Недавно на сайте модной одежды Everlane появилась такая демонстрация, которая вдохновила меня на написание этой статьи. Наш код будет значительно проще, чем в предыдущем примере с полноэкранным видео, а также пользователь должен использовать последнюю версию браузера. Свойство mix-blend-mode на данный момент не поддерживается в MS Edge. Несмотря на эти ограничения, наш код достаточно прогрессивный: наше фоновое видео будет работать в IE10+.

Разметка

Разметка начинается с тега video, в котором прописывается новый атрибут playsinline (который обеспечивает работу видео на iOS 10) и атрибут mute (полноэкранное видео – зацикленный ролик с автопроигрыванием, который должен быть без звука).

<video poster="fashion.jpg" playsinline autoplay muted loop>
    <source src="fashion.webm" type="video/webm">
    <source src="fashion.mp4" type="video/mp4">
</video>

В демо на Codepen в верхней части страницы я разместил тег header с фиксированным позиционированием:

<header>
    <h1>ZIGGY</h1>
      <nav>
        <a href="#">Men</a>
        <a href="#">Women</a>
        <a href="#">Stores</a>
        <a href="#">Contact</a>
      </nav>
</header>

Под меню я добавил немного текста. Текст должен быть коротким (пара слов, не больше), так как длинный текст с автоконтрастом намного сложнее читать:

<div id="fashion">
  <h2>There’s a brand new dance but I don’t know its name…</h2>
</div>

CSS

Ролику задается абсолютное позиционирование, свойство object-fit, а также ширина и высота в 100%, дабы видео полностью закрывало окно браузера:

video { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

Заметьте, что видео не зафиксировано. Как показано в нашем демо, техника лучше всего работает с небольшим центрированным текстом, который не доходит до нижней границы окна браузера. Чтобы все заработало, тегу body задается свойство margin: 0.

body {
  margin: 0;
  background: #000;
}

По событию hover я переключаю цвет фона и заголовка:

header {
  position: fixed;
  width: 100%;
  text-align: center;
  color: white;
  transition: .4s;
}
header:hover {
  background: rgba(255,255,255,0.8);
  color: #000;
}

Текст по центру расположен внутри тега div, который с помощью flexbox центрирует контент. Высота блока должна быть как минимум равна высоте окна браузера:

div#fashion {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

Контраст текста создается при помощи свойства mix-blend-mode: overlay. Также подойдет значение difference.

h2 { 
  font-family: Century Schoolbook, Georgia, serif;
  margin: 2rem 3rem 0;
  mix-blend-mode: overlay;
  color: #fff;
 }

Размер шрифта в демо на CodePen я задал в единицах измерения vmin. Такой подход в частности отлично работает с адаптивным дизайном. В следующих статьях я более подробно расскажу про единицы измерения vmin и vmax.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree