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

Видеофон внутри текста на чистом CSS

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

HTML разметка

Создадим секцию с коротким видеороликом и крупным текстом внутри. В качестве источника видео, копируем URL понравившегося видео с бесплатного сайта pexels.com и вставим в HTML код.

<section>
  <video autoplay muted loop>
    <source src="bg.mpg" type="video/mp4">
  </video>
  <h2>Video in Text<br><span>Background </span></h2>
</section>

Видеофон внутри текста на чистом CSS.

К тегу video добавим три атрибута:

  • autoplay - воспроизведение видео запускается автоматически
  • muted - отключает звук у видео
  • loop - бесконечный повтор

У меня выбран видеоролик с пожаром и я рассчитываю получить горящие в огне буквы.



Видеофон внутри текста на чистом CSS.

Контент в центре страницы

@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900");
* {
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
}
section {
    position: absolute;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

Видеофон внутри текста на чистом CSS.

Видеофон на всю страницу

Растянем видеофон на весь экран.

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

Видеофон внутри текста на чистом CSS.

Стилизация текста

Определяющая роль у этого эффекта принадлежит CSS свойству mix-blend-mode. Данное свойство в режиме multiply смешивает верхний слой с нижним. В результате огненный видеофон заполняет только текст, а все что находится за пределами текста, затемняется.

section h2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95); / * затемнение фона * /
    font-size: 25vw;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    line-height: 0.85em;
    mix-blend-mode: multiply; / * режим смешивания * /
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-weight: 800;
}
section h2 span {
    font-size: 0.4em;
    line-height: 0.85em;
}

Видеофон внутри текста на чистом CSS.

Посмотрите пример на CodePen