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

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

Видеофон внутри текста на чистом 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

    Хотите научиться автоматизировать различные задачи на языке Python? Предлагаю вашему вниманию мой видеокурс «Написание лайфхаков на Python».

    Источник

    НЕТ КОММЕНТАРИЕВ

    Оставить комментарий