Фоновое видео на CSS

Красивое фоновое видео для портала на CSS. Код изначально был позаимствован из портала codepen, про автора можно не спрашивать - не вспомню.

Установка
HTML

Community of fans of horrors

Указываем ссылка на видео

CSS
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }

#video-viewport { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; }
video { display: block; width: 100%; height: auto; }

.fullsize-video-bg { height: 100%; overflow: hidden; }

.fullsize-video-bg:before { content: ""; background: rgba(114,45,0,.35); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.fullsize-video-bg:after { content: ""; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgTWFjaW50b3NoIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI4RkZBQTgzNzg1NzExRTU4NTQyODc3OUM4MTZGMUREIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjI4RkZBQTg0Nzg1NzExRTU4NTQyODc3OUM4MTZGMUREIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjhGRkFBODE3ODU3MTFFNTg1NDI4Nzc5QzgxNkYxREQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjhGRkFBODI3ODU3MTFFNTg1NDI4Nzc5QzgxNkYxREQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz66uHInAAAAIUlEQVR42mL5//8/AyMj42YGIGBigABfEMEIkoEBgAADAKvuBwVS8BAjAAAAAElFTkSuQmCC); background-size: 3px 3px; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }

.fullsize-video-bg .inner { display: table; width: 100%; max-width: 24em; height: 100%; margin: 0 auto; padding: 0; position: relative; z-index: 2; text-shadow: 0 1px 5px rgba(0,0,0,.5); }
.fullsize-video-bg .inner > div { text-align: center; display: table-cell; vertical-align: middle; padding: 0 2em; }

h1one { font-family: "Raleway", sans-serif; font-size: 3em; line-height: .9; font-weight: 900; letter-spacing: -.025em; text-transform: uppercase; margin-bottom: .5em; color:#fff;}
h1one + p { font-family: "Shadows Into Light Two", cursive; font-size: 1.5em; margin-top: 5px; color:#fff;}

Стили текста
h1one { font-family: "Raleway", sans-serif; font-size: 3em; line-height: .9; font-weight: 900; letter-spacing: -.025em; text-transform: uppercase; margin-bottom: .5em; color:#fff;}
h1one + p { font-family: "Shadows Into Light Two", cursive; font-size: 1.5em; margin-top: 5px; color:#fff;}

post
Скрипты
2019-04-24
848

Модуль статистики «LightStat» 3.0 для DataLife Engine

2019-03-20

Бесплатноруб.

Красивые кнопки аттачмент для DLE

2017-03-10

DLE WTEAM 1.0 - КОМАНДА САЙТА DLE

2016-11-30

Модификация "ShowMore"

2016-11-29

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Статистика сайта

Всего статей: 755

Всего комментариев: 4020

Пользователей: 6261

Новичок axulo

Полная статистика

Платное new

Moguta.CMS Гипермаркет v10.3.0 Nulled^2023-09-28
Это самая полная версия интернет-магазина Moguta.CMS v 10.3.0 Nulled про функционал читайте на оф. сайте, нечего лишнего нет.

UniSite 4.10 Nulled^2023-08-23
UniSite CMS - Это универсальная система, с помощью которой Вы сможете запустить доску объявлений, маркетплейс услуг или товаров, автопортал с онлайн

VPN с шифрование трафика!!!^2023-04-26
VPN сегодня популярнее, как не когда. Он обеспечит Вам безопасность и конфиденциальность в Интернете. ПРОМО-КОД: skriptcms ПОЛУЧИ СКИДКУ 10%

Комментарии