Видео эффекты HTML & CSS || Video Effects using HTML & CSS step by step

всем привет в этом видео вы узнаете как сделать такие вот видео эффекты и так мы видим в этом примере есть видео которое совмещено здесь совмещено несколько видео как мы видим горит огонь идет дождь и появляются синий и розовый дым и в этом видео я покажу как сделать из

нескольких видео одно используя html и css шаг за шагом и так приступим к добавлению видео эффектов у нас есть файл index.html style.css стили подключены и внутри бага создадим div с классом контейнер внутри него у нас будет размещаться тег видео и в источник добавим видео возьмем из папки и укажем первое это будет огонь сюда мы добавим

Атрибуты muted, loop и autoplay.

Давайте теперь откроем браузер.

Посмотрим, что у нас добавилось.

Итак, мы видим, есть видео.

Давайте свернем браузер в половину.

И Visual Studio Code.

И добавим некоторые стили.

Перейдем в стили.

Обратимся к универсальному селектору.

Обнулим маржины.

Пэддинги.

Добавим свойства BoxSizeInBorderBox.

Теперь обратимся к div с классом Container и для него укажем ширина будет 100%, высота будет 100VH и Position Relative.

Теперь обратимся к div с классом Container и Video и укажем Position Absolute.

Top 0, Left 0, ширина 100%, высота также 100% и Object Fit будет у нас Covered.

Итак, мы видим, у нас видео на странице занимает всю ширину и высоту.

Теперь давайте перейдем в HTML и добавим еще одно видео.

Скопируем отсюда первое, которое мы добавляли.

И здесь заменим на rain, на дождь.

Откроем нашу страницу и видим, что дождь перекрывает огонь.

Соответственно, первое видео...

давайте сделаем так чтобы они были совмещены чтобы и горел огонь и шел дождь давайте это сделаем здесь в стилях обратимся к контейнер к видео и добавим псевдокласс nta child и выберем 2 то есть будем обращаться к второму видео соответственно к дождю и сюда мы укажем такое свойство как mixed blend mode значение будет screen

И как мы видим у нас теперь при условии добавления такого свойства как MixBlendMode значение Screen у нас будет отображаться и огонь и идти дождь.

Давайте также еще посмотрим еще одно видео к примеру добавим, посмотрим как они будут совмещаться.

Также можем скопировать отсюда первый элемент, вставить сюда ниже и здесь заменим, добавим третье.

Видео это будет у нас дым.

Как мы видим, также третье видео перекрывает все остальные.

Давайте это справим.

Также обратимся в контейнер.

Видео и NTA Child третьему.

И также укажем Mix Blend Mode Screen.

И как мы видим, теперь они также совмещены.

То есть в одном видео у нас совмещается три.

И огонь, и дождь, и дым.

Для дыма мы можем также еще сделать некоторые эффекты, добавить яркости.

Как мы видим, сейчас он такой тускловатый.

Давайте сюда для третьего элемента укажем свойство Filter и укажем Brightness.

Яркость на 2, к примеру.

Давайте посмотрим.

Нажмем обновить.

И как мы видим, более ярче у нас теперь синий и розовый дым.

Таким вот образом получилось сделать

вот видео эффекты совместить три разных видео в одном используя html и css шаг за шагом на этом все спасибо за просмотр и успехов обучение если вам понравилось данное видео ставьте лайк и подписывайтесь на мой канал