Создание полноэкранного html5 видео для фона страницы

Содержание

Ну и бонусный совет…(23:28)

Cmeta http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>аÑайÑеÑÑ Ð½Ðµ ÑилÑно запаÑиваÑÑÑÑ Ð¾ Ñоне и дайÑе Ñебе вÑÐµÐ¼Ñ ÑоÑмиÑоваÑÑ ÐµÐ³Ð¾ поÑÑепенно. Ðе давайÑе неидеалÑÐ½Ð¾Ð¼Ñ ÑÐ¾Ð½Ñ Ð¿Ð¾Ð¼ÐµÑаÑÑ Ð²Ð°Ð¼ ÑнимаÑÑ Ð²Ð¸Ð´ÐµÐ¾.


ÐапÑимеÑ, ÑейÑÐ°Ñ Ñ Ð¿ÐµÑееÑала и не Ð¼Ð¾Ð³Ñ ÑказаÑÑ, ÑÑо доволÑна Ñвоим Ñоном. Ðока ÑÑо Ð±ÐµÐ»Ð°Ñ ÑÑена  без какиÑ-Ñо деÑалей и здеÑÑ Ð½Ðµ Ñак много моей лиÑноÑÑи. Я планиÑÑÑ Ñо вÑеменем оÑоÑмиÑÑ ÐºÑаÑивÑми поÑÑеÑами и Ð¼Ð¾Ð¶ÐµÑ Ð±ÑÑÑ ÐµÑÑ ÐºÐ°ÐºÐ¸Ð¼-Ñо декоÑом. Ðо ÑÑо не знаÑиÑ, ÑÑо Ñ Ð½Ðµ бÑÐ´Ñ ÑнимаÑÑ Ð²Ð¸Ð´ÐµÐ¾ и вÑÑодиÑÑ Ð² пÑÑмой ÑÑиÑ, пока Ñ Ð¼ÐµÐ½Ñ Ð²ÑÑ Ð½Ðµ ÑÑало идеалÑно.

Сжимайте видео, насколько это возможно

Нет ничего хуже, чем посещение сайта, фоновое видео на котором постоянно спотыкается при попытках буферизации. Это отвлекает и создает ощущение, что весь сайт тормозит, даже если все остальное содержимое уже загружено.

Чтобы избежать этого, надо сжать видео до минимального приемлемого для нас битрейта. Есть соблазн использовать высококачественное видео в разрешении 1080p, чтобы повысить четкость и красоту, но это совершенно не стоит компромисса с увеличением времени загрузки и прерываемым стримингом.

Вам стоит использовать видео 720p с низкой частотой кадров (24-25 кадров в секунду) и протестировать несколько разных битрейтов от 750k до 1250k. Также есть несколько хаков, которые помогут скрыть низкое качество видео, но о них чуть позже.

Простейший пример создания фонового видео (Video Background)

Создается Video Background не сложнее, чем обычное фоновое изображение с использованием минимального набора CSS свойств.

Оборачиваем тег video в div class=»fullscreen-bg»:

<div class="fullscreen-bg">
<video loop muted autoplay poster="media/videoframe.png" class="fullscreen-bg__video">
<source src="media/videoframe.webm" type="video/webm">
<source src="media/videoframe.mp4" type="video/mp4">>
</video>
</div>

Задаем минимальные CSS свойства:

.fullscreen-bg {
position: absolute;
top: 0px;
left: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
overflow: hidden;
}
.fullscreen-bg video{
min-height: 700px;
min-width: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
}

Все! А вы думали будет сложнее?

Используйте наложение для скрытия артефактов

Если вас не радует качество вашего видео, или же у видео, устраивающего вас качества, есть проблемы с плавностью, вам стоит попробовать добавить слой-наложение к видео, что поможет замаскировать его качество. Это легко делается путем добавления абсолютно спозиционированного сразу после видео или с использованием псевдо-элемента в контейнере видео.

Вам надо применить к этому элементу свойство CSS , чтобы он не препятствовал управлению проигрыванием видео.

Полупрозрачное наложение ровного цвета может выглядеть неплохо, особенно если настроить наложение цвета в соответствии с цветами остальной части вашего дизайна. Наложение с паттерном может выглядеть еще лучше, но его сложнее сочетать с дизайном.

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

Создание Video Background HTML 5 из примера 3

Для начала создается HTML 5 разметка. Привожу полностью разметку с использованием дополнительных элементов, таких как заголовок, описание и кнопка-ссылка.

HTML

 <div class="video_bg">
<div class="video_bg_mask"></div>
<div class="post_title entry_post">
<h1 class="text-center">Video Background HTML 5 Section Here</h1>
<h2>Call 098-566-4998</h2>
<br>
<hr>
<h3>Or email us at support@mysite-admin</h3>
<a class="contact" href="#">Contact Us Now</a>
</div>
<div class="video_wrap">
<video poster="media/videoframe.png" loop autoplay muted>
<source type="video/webm" src="media/videoframe.webm">
<source type="video/mp4" src="media/videoframe.mp4">
</video>
</div>
</div>

Ну и CSS разметка, используемая в данном примере.

CSS

header{
overflow: hidden;
}
.video_bg{
position: relative;
max-height:700px;
}
.video_bg h1{font-size: 52px;}
.video_bg_mask {
position: absolute;
top: 0;
left: 0;
z-index: 9;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
}
.video_wrap{
position: relative;
width:100%;
height:100%;
overflow:hidden;
}
.video_wrap video{
min-height: 700px;
min-width: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
}
.video_bg .post_title {
display: block;
width: 80%;
height: auto;
background: transparent;
vertical-align: bottom;
margin: auto;
bottom: 0;
position: absolute;
top: 13%;
left: 10%;
z-index: 10;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
color: #fff;
}
.video_bg .post_title .contact{
font-size: 18px;
color: #fff;
border: 1px solid #fff;
padding: 10px 20px;
border-radius: 90px;
display: inline-block;
margin-top: 20px;
}
@media (max-width: 767px) {
.video_bg h1{
font-size: 38px;
}
.video_bg .post_title {
top: 5%;
}
}

На самом деле при создании Video Background можно импровизировать с HTML 5 разметкой и CSS свойствами, в зависимость от задач, поставленных веб разработчику. Поэтому к статье и приложены 3 примера для создания классных заставок и фонового видео.

Скачать исходники 3-х примеров Video Background

Скачать

— Для меня лично самое сложное и время затратное при создании видео в качестве фона является подборка нужных видеороликов.

Адаптируйте для разных устройств

На данный момент поддержка фонового видео на мобильных устройствах не слишком хороша. iOS отключает автовоспроизведение видео, помещая на видео большую иконку воспроизведения, после нажатия на которую и запускается видео.

Если бы мы помещали обычное видео на нашу страницу, то такое поведение было бы прекрасным, но так как наше видео это лишь элемент дизайна, то нам нужен запасной вариант в виде фонового изображения. А так как у Android устройств также есть проблемы с воспроизведением, в обоих случаях лучше отключить видео и использовать фоновое изображение.

Как вы это сделаете зависит от вас — вы можете спрятать видео на маленьких экранах с помощью медиа-запроса или удалив видео для всех устройств iOS/Android, после проверки пользовательского агента с JavaScript. Плагин jQuery Background Video делает это по умолчанию.

В завершение

Во всей массе медиа-информации (да и всего контента) главенствует видео – показывая свою эффективность в самых различных нишах интернет рынка. Результаты успешных видео-маркетинговых стратегий впечатляют! Эмоциональный видеоролик – это также отличный способ поразить клиентов. Поскольку реакция разных людей на различный видеоконтент отличается, необходимо тестировать. Проверьте на своей аудитории несколько вариантов и такой тоже: фоновое видео Vs. обычное изображение для бэкграунда сайта. Но при правильных подходах, от воспроизводимого в фоне видео можно получить немало преимуществ перед конкурентами.

Вам не нужно много денег (17:39)

Камера чаще всего не передаёт качество предметов. То, что кажется дорогими интерьерным декором, как правило вещи с блошиных рынков, барахолок или секонд-хендов

Камере не важно, рабочая у вас печатная машинка или нет. Посмотрите, что уже есть у вас дома и как вы можете оформить свой уголок для видео своими руками

Я долгое время снимала видео на фоне стены с пробковой доской из ИКЕА и открытками с мотивационными надписями и магнитным календарём. Календарь моя сестра привезла 15 лет назад из Штатов, он ей уже надоел, никуда не вписывался и она несла его выкинуть на помойку. Я забрала и пристроила для своего фона.

Предусмотрите затухание

И еще раз: наше фоновое видео должно быть ненавязчивым. Внезапные движения при начале его воспроизведения могут отвлечь пользователя, поэтому в большинстве случаев будет хорошей идеей при запуске видео создать эффект затухания.


Мы можем сделать это, добавив изображение в качестве фона для элемента, содержащего и задав видео прозрачность 0 по умолчанию (1 при начале воспроизведения), а также добавив CSS-переход свойства прозрачности. Это тоже есть в плагине jQuery Background Video.

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

Изображения

Слайд-шоуГалерея слайд-шоуМодальные изображенияЛайтбоксАдаптивная Сетка изображенияСетка изображенияГалерея вкладокОверлей изображенияСлайд с наложенным изображениемМасштабирование наложения изображенияНазвание наложения изображенияЗначок наложения изображенияЭффекты изображенияЧерно-белое изображениеТекст изображенияТекстовые блоки изображенийПрозрачный текст изображенияПолное изображение страницыФорма на картинкеГерой изображениеПараллельные изображенияОкругленные изображенияАватар изображенияАдаптивные образыЦентрировать изображенияМиниатюрыПознакомьтесь с командойЛипкое изображениеОтражение изображенияВстряхните изображениеПортфолио галереяПортфолио с фильтрациейМасштабирование изображенияИзображение увеличительное стеклоПолзунок сравнения изображений

Конструкция HTML 5 Video Background

Теперь разберемся подробнее что из себя представляет HTML конструкция тега

<video poster="media/videoframe.png" loop autoplay muted>
<source type="video/webm" src="media/videoframe.webm">
<source type="video/ogg" src="media/videoframe.ogg">
<source type="video/mp4" src="media/videoframe.mp4">
</video>

— задает путь к скриншоту для видеозаставки, если видео недоступно, автоматически подставляется скрин, обычно используется скриншот первого кадра видео;

— повтор после окончания видео, бесконечное воспроизведение;

— проигрование видеоролика в автоматическом режиме, сразу после загрузки HTML 5 страницы;

— отключаем звук, хотя по умолчанию он и так отключен (необязательный атрибут);

— путь к файлу с видео в формате WebM HTML 5 видео;

— путь к файлу с видео в формате Ogg видео;

— путь к файлу в формате MP4.

w3schools.com — все атрибуты тега video.

Из данного примера видно, что я не использовал видеоконтейнер Ogg формата. Посмотрел как делают видео фон другие разработчики, посмотрел поддержку форматов браузерами и понял, что скриншота и двух фрматов видео будет вполне достаточно.

Нюансы использования видео в качестве фона

Прежде чем использовать видео-background для сайта, имеет смысл ознакомиться с некоторыми нюансами, знание которых поможет избежать основных ошибок и сделать сайт лучше.

  • Следует подумать, насколько уместен видеофон для сайта, на котором предполагается его разместить. Грань между оригинальностью решения и его бесполезностью в каждом конкретном случае приходится проводить индивидуально. Не нужно забывать о том, что никакие изыски дизайна не должны отвлекать посетителя от цели посещения сайта. Напротив, все его элементы, в том числе, и видео на заднем фоне сайта, должны способствовать улучшению взаимодействия посетителя и интернет-ресурса.
  • Автовоспроизведение звука в фоновом видеоролике — не лучший из возможных вариантов. Подобный подход зачастую способен отпугнуть посетителя и заставить его поскорее закрыть «шумный» сайт. Хорошим тоном считается использование беззвучных фоновых видеозаставок либо предоставление пользователю возможности включать звук самостоятельно.
  • Установленный на странице видеофон должен гармонично сочетаться с ее текстовым содержимым. Если текст страницы сливается с фоном (плохо читается) в какой-то из моментов проигрывания ролика, о его «правильном» воздействии на читателя не может быть и речи.
  • Видео, используемое на странице, не должно сильно замедлять ее загрузку. Видеоконтент, в сравнении с прочими, составляющими сайт элементами, обладает наибольшим весом. Поэтому, чтобы не потерять часть аудитории, в качестве фона желательно подбирать ролики, не слишком продолжительные по времени.
  • Готовое решение всегда необходимо проверять на предмет кроссбраузерности, корректного и плавного воспроизведения видео в фоне сайта на всех типах устройств. В случае невозможности воспроизведения видео посетителю должен предоставляться альтернативный вариант фона – например, в виде статического изображения.

Вставка картинки в видео

С помощью редактора Видео-Монтаж

Ниже рассмотрю нашу текущую задачу…

Вариант 1: вставка картинки поверх изображения видео

1) И так, после установки и запуска редактора — создаем новый проект и добавляем в него нужное видео (вкладка «Добавить», см. скрин ниже).

Добавление ролика на видео-дорожку

2) Далее следует выбрать наш ролик на видео-дорожке и перейти в меню «Редактировать/Текст и графика» — во вкладке «Рисунок» нажать по кнопке добавления картинки и выбрать нужную на жестком диске компьютера.

После картинка должна появиться поверх видео, см. пример ниже.

Добавить рисунок

3) Теперь можно переместить картинку в нужное место экрана, уточнить ее размеры, добавить контур, тени и пр. Пример ниже.

Рисунок установлен поверх изображения видео

В общем-то, задача решена. Ниже рассмотрю еще один пример, только уже картинка будет размещена на весь экран и в определенном месте видео.

Вариант 2: вставка картинки(-ок) между отдельными кадрами видео

1) Первое действие аналогично: также запускаем редактор, создаем новый проект и добавляем в него наше видео 2 раза! Пример представлен на скрине ниже.

Добавить ролик 2 раза

2) Далее добавляем нужное фото/картинку (можно несколько)

Обратите внимание, каждая картинка также «попадает» на видео-дорожку, расположенную в нижней части окна программы

Добавляем картинку (или сразу несколько) на дорожку

3) Теперь переместите картинку в центр, между двумя видео (т.е. поменяйте местами видео и картинку). Пример ниже.


Меняем местами с роликом

4) Далее нужно выбрать первый ролик на видео-дорожке, перейти в меню «Редактировать/Обрезать видео» и установить конец обрезки на том времени, когда должна появиться наша картинка! В моем примере это 1:22.

Обрезка видео

5) Теперь выбираем второе видео (которое идет после картинки) и устанавливаем время его начала, равное значению конца первого видео. Пример: я обрезал первое видео на 1:22, значит второе видео начинается с 1:22.

Обрезка 2-го ролика

6) Таким образом у нас получилось так, что картинка оказалась между определенными кадрами видео (а само видео осталось целым, и ни 1 секунды не пропало, просто оно стало состоять из 2-х частей).

Кстати, длительность показа картинки можно отрегулировать прямо на видео-дорожке — просто поменяйте число секунд в углу на нужное вам. Пример ниже.

Длительность показа картинки

7) Последний шаг — сохранение видео (вкладка «Создать», см. пример ниже).

Сохранение видео

С помощью редактора Movie Creator

1) И так, первый шаг — после запуска редактора, добавьте нужный ролик и перенесите его на видео-дорожку (пример ниже).

Добавляем видео на дорожку

2) Далее добавьте фото/картинку и перенесите ее аналогично на видео-дорожку (обратите внимание, что под картинку будет автоматически создана еще одна дорожка!)

Переносим картинку на видео

3) Чтобы картинка оказалась между определенными кадрами видео (а не поверх них): необходимо установить курсор в нужное место видео-дорожки и разделить ролик на 2-части. Далее сдвинуть правую часть видео-ролика (чтобы картинка оказалась между этими двумя частями). См. пример ниже.

Картинка появится между кадрами видео

4) Кстати, размер картинки можно изменять, просто потянув мышкой за один из ее краев.

Если вам нужна картинка поверх видео

5) Для сохранения полученного видео — нажмите сочетание кнопок Ctrl+Enter (либо меню «Проект/Сохранить как видеофайл…»).

Сохранить как видеофайл

На сим пока все…

Удачного редактирования!

RSS  (как читать Rss)

Создание Video Background HTML 5 Тег VIDEO

Во первых нужно подготовить видео в трех форматах MP4, Ogg, WebM.

MP4 — Распостраненный формат, предназначенный для работы с видео и фото файлами.Ogg — Также контейнер для передачи, хранения и работы с аудео и видео.WebM — Собственно основной формат, сжатый. Применяется при создании и отправке HTML 5 видео и веб презентаций.

Конвертация в нужные форматы

Для конвертации видео в различные форматы существует множество программ, либо можно найти уже готовые заставки или просто скачать понравившееся видео и преобразовать сжать в нужные форматы к примеру неплохим бесплатным онлайн сервисом.

  • Android devices — MP4
  • Google Chrome — WebM, Ogg
  • Mozilla Firefox — WebM, Ogg
  • Opera — WebM, Ogg
  • Safari — MP4 (including iPhone)
  • Internet Explorer 9 — MP4
  • Internet Explorer 6-8 — No HTML5, flash only

Несколько красивых примеров видео на фоне

В стиле моушн: пример креативной видеосъемки и наложения эффектов

Разработчик медиа-контента Tongal производит рекламные ролики и видео для брендов:


Видеопиар & яркий Flat. Использована видеография с наложением кратких промо-заголовков из текстового слайдшоу. Смелое сочетание сочных цветов – такие пары цветовых комбинаций подбирались скоморохам. Мультяшные шрифты очень кстати

Продающий сайт (мультибренд) на главной применяет фонового видео с видеографией:

Утонченный, элегантно оформленный HTML5 сайт с необычной навигацией, интерактивом и прекрасными видео-бэкграундами

Креативный сайт цифрового агентства из Бельгии применяет плоское видео в фоне:

Для сайта и ранее использовался плоский стиль, но после редизайна клиентов решили привлечь главным экраном с привлекательным продающим Flat видео

Видео на фон сайта: плагины

Совсем недавно для того, чтобы вставить видео на фон сайта, приходилось править код шаблона, вручную добавляя необходимую html и css разметку, чтобы интегрировать в сайт фоновые Jquery видеоплееры сторонних разработчиков. Сегодня с такой задачей способен справиться даже начинающий, не искушенный в веб-программировании, владелец сайта. В официальном репозитории WordPress существуют подходящие для этого инструменты-плагины. Рассмотрим некоторые из них.

Video Background

Background Video — WordPress плагин, с помощью которого легко назначить видео фон для любого элемента, как сказано в его описании. После установки и активации плагина в режиме редактирования страниц и записей сайта под редактором контента появляются дополнительные настройки. Добавив значения обязательных полей и обновив или опубликовав страницу, получаем желаемый результат.

На скриншоте выше приведены настройки, доступные в бесплатной версии плагина. В качестве фона можно использовать загружаемое на сайт видео в форматах MP4 и WebM, а также добавлять картинку, которая будет отображаться в браузерах, не поддерживающих фоновое воспроизведение видеофайлов.

Расширенные настройки, открывающиеся нажатием кнопки в левом нижнем углу, позволяют накладывать поверх видео дополнительный цветной слой с регулируемой прозрачностью. Это полезно, если текст страницы не читается на фоне видео. Здесь же включается зацикливание для видеоролика и включается/отключается аудио, присутствующее в файле.

В платной версии плагина, которую можно приобрести за 19 долларов, имеются расширенные настройки: возможность использовать видео ютуб в виде фона на сайте, выставлять для него точное время начала и завершения, а также добавлять кнопки «Пауза/Воспроизведение» для видеоплеера и «Включить/Выключить» для аудио.

mb.YTPlayer for background videos

Несмотря на сложное в написании и произношении название, плагин весьма прост и предельно понятен. Все его немногочисленные настройки находятся на одной странице, попасть на которую можно из меню консоли WordPress.

Добавив в поле ввода «The Youtube video url is» адрес видеоролика, расположенного на канале YouTube, и выбрав категории страниц, на которых будет отображаться видео в качестве фона (например, только на главной или на всех страницах), сохраняем настройки и любуемся результатом.

В бесплатной версии плагин также позволяет запоминать позицию видео, на которой был остановлен просмотр страницы, и устанавливать задержку запуска видео в 1-3 секунды. Последняя опция может пригодиться, если возникает конфликт с установленной на сайте темой или плагинами, которые мешают плееру начать воспроизведение.

Дополнительные настройки, такие как установка качества видео, соотношение сторон, степень прозрачности, цикличность воспроизведения, установка времени начала и завершения воспроизведения, наличие звука и элементов управления плеера, доступны лишь в mb.ytplayer Plus — расширенной версии плагина стоимостью 12 евро.

Плагин mb.vimeoPlayer for background videos того же автора, подобный рассмотренному и позволяющий использовать для фона видео с видеохостинга Vimeo, также можно найти в репозитории. Настройки плагина аналогичны.

Плагины независимых разработчиков

Те, кому не хватает возможностей, предоставляемых бесплатными плагинами из репозитория, могут воспользоваться услугами торговой площадки CodeCanyon, предлагающей плагины WordPress от независимых разработчиков для загрузки видео в фон сайта, обладающие большим количеством опций. Здесь же можно найти и аддоны для Visual Composer. Вот несколько наиболее известных премиум-плагинов:

  • Easy Video Background (HTML5)
  • Easy Video Player WordPress Plugin
  • Simple BG — Easy Video Background
  • Full Width Background Gallery with Youtube Video
  • Video Player & FullScreen Video Background
  • Parallax & Video Backgrounds for Visual Composer

Где брать видео фоны для сайта

Сначала у вас проблема: где взять видеоматериал для сайта? См. правило #1, чтобы выбранное видео, информировало (кратко о ваших ценностях) / побуждало воспользоваться уникальным предложением / укрепляло бренд.

Лучше всего индивидуальные решения. В наше время даже iPhone позволяет справиться с задачей. Помните, что видео не обязательно должно быть идеальным? Особенно, созданное под затемнение / осветление или тонирование цветом. Еще варианты:

  1. Заказать у фрилансеров
  2. Стоковые видеоролики различной тематики (платные и бесплатные). Они вполне подходят для создания на сайте специфичной атмосферы

Часто платное и бесплатное стоковое видео различается лишь по техническому качеству и возможностям выбора (полезны оба источника):

  • VideoHive: доступные цены: от $5 до $35. Хорошие шансы найти то, что нужно
  • Free Video Sources: Ресурсы с бесплатными видео: 25 сайтов-источников видеоконтента для сайта бесплатно. Отличный вариант для старта

Как создать полноэкранный видео

Шаг 1) добавить HTML:

Пример

<!— The video —><video autoplay muted loop id=»myVideo»>  <source src=»rain.mp4″ type=»video/mp4″> </video><!— Optional: some overlay text to describe the video —> <div class=»content»>  <h1>Heading</h1>  <p>Lorem ipsum…</p>  <!— Use a button to pause/play the video with JavaScript —>  <button id=»myBtn» onclick=»myFunction()»>Pause</button></div>

Шаг 2) добавить CSS:

Пример

/* Style the video: 100% width and height to cover the entire window */#myVideo {    position: fixed;    right: 0;    bottom: 0;    min-width: 100%;     min-height: 100%;}/* Add some content at the bottom of the video/page */ .content {    position: fixed;    bottom: 0;    background: rgba(0, 0, 0, 0.5);    color: #f1f1f1;    width: 100%;    padding: 20px;}/* Style the button used to pause/play the video */#myBtn {    width: 200px;    font-size: 18px;    padding: 10px;    border: none;    background: #000;    color: #fff;    cursor: pointer;}#myBtn:hover {    background: #ddd;    color: black; }

Шаг 3) добавить JavaScript:

При желании вы можете добавить JavaScript для паузы/воспроизведения видео одним нажатием кнопки:

Пример

<script>// Get the videovar video = document.getElementById(«myVideo»);// Get the buttonvar btn = document.getElementById(«myBtn»);// Pause and play the video, and change the button textfunction myFunction() {    if (video.paused) {        video.play();        btn.innerHTML = «Pause»;    } else {        video.pause();         btn.innerHTML = «Play»;    }}</script>

❮ Назад Дальше ❯

Больше

Fullscreen VideoМодальные коробкиШкалаИндикатор прокруткиСтроки хода выполненияПанель уменийПолзунки диапазонаПодсказкиPopupsСкладнойКалендарьHTML вставкаСписокПогрузчикиЗвездвРейтинг пользователейЭффект наложенияКонтактные фишкиКартыКарточка профиляОповещенияЗаметкиМеткиКругиКупонОтзывчивый текстФиксированный нижний колонтитулЛипкий элементОдинаковая высотаClearfixСнэк-барПрокрутка рисункаЛипкий заголовокТаблица ценПараллаксПропорцииПереключение типа/не нравитсяВключить скрытие/отображениеПереключение текстаПереключение классаДобавить классУдалить классАктивный классУвеличить HoverПереход при наведенииСтрелкиФормыОкно браузераНастраиваемая полоса прокруткиЦвет заполнителяВертикальная линияАнимация значковТаймер обратного отсчетаМашинкуСкоро страницаСообщения чатаРазделить экранОтзывыЦитаты слайд-шоуЗакрываемые элементы спискаТипичные точки останова устройстваПеретаскивание HTML-элементаКнопка спуска на входеJS медиа запросыJS анимацииПолучить элементы IFRAME


С этим читают