Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Полноэкранное фонового видео с текстом в режиме наложения

18 декабря 2017 | Опубликовано в css | Нет комментариев »

В этом уроке мы решили попробовать совместить техники из статей о создании фонового видео для веб-страниц и использовании режима наложения смешения для создания автоматически контрастного текста. На веб-сайте о модной обуви Everlane показано такое сочетание, послужившее источником вдохновением для создания этого урока. Код в нашем примере намного проще, чем в статье о создании полноэкранного видео, но он будет работать только у пользователей, использующих намного более современные версии браузеров: режим наложения смешения еще не поддерживается браузером Microsoft Edge. Но фоновое видео будет работать в браузерах Internet Explorer от версии 10.

 

Разметка

Разметка начинается с элемента видео, в котором используется новый атрибут playsinline, позволяющий проигрывать видео на веб-странице в операционной системе iOS 10, и атрибут выключения звука, так как полноэкранное автоматически воспроизводящееся зацикленное видео всегда должно проигрываться беззвучно:

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

На верху страницы находится элемент шапки, которому задано фиксированное расположение:

<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

Элементу видео задано абсолютное расположение и свойство соответствия объекту, а также ширина и высота, равные 100%, чтобы полностью накрыть окно браузера:

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

Обратите внимание, у видео нет фиксированного расположения. Как показано в нашем примере, этот способ лучше всего подходит для очень небольшого, расположенного посредине содержимого, которое не будет распространятся за пределы нижней границы окна браузера.

Чтобы это сработало, элементу <body> задан нулевой внешний отступ:

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

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

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

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

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

Текст в центре использует режим наложения смешения со значением накладывающегося слоя, что делает текст контрастным, в этом случае также подошло бы значение разности:

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

Размер шрифта задан в единицах измерения  vmin, так как эта единица измерения особо хорошо сработает на веб-сайтах с адаптивным дизайном.

В результате получаем следующее:


Использованы видео Maximilian Kempe, лицензированное по лицензии Creative Commons и бесплатный шрифт Moderne Sans, созданный Marius Kempken. 

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:


�


Коментарии запрещены.

Похожие статьи

Случайные статьи



Друзья

    • Самые комментируемые