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

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

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

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

Разметка

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

CSS

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

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

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

Получить

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree