Lynda.com Дизайн на уеб HTML фоново видео

• Може 7, 2024

Фоновото видео е чудесен начин за предлагане на пазара на вашия продукт и в този курс за видео обучение Lynda.com, озаглавен Дизайн на мрежата: HTML фоново видео с Крис Конверс ще научите как да добавяте фоново видео за автоматична игра към вашата уеб страница. Освен това ще научите как да използвате CSS за поставяне на други дизайнерски елементи върху фоновото видео. А файловете за упражнения са безплатни дори за членството в Standard.

Converse започва с HTML файл с голи кости и изгражда основния контейнер div за елементите на дизайна: текстовата линия, логото svg и видеото. Той демонстрира как да използвате автоматично игра във видео маркера и как да настроите двата най-често срещани вида видео, .mp4 и .ogg.

След това Converse преминава към CSS файловете и CSS, за да стилизира и позиционира видеото и изображението в центъра на логото. Той продължава, за да направи същото за текста на слоевете. Особено ми хареса неговата техника за работа с граници.

След това Converse обсъжда как да направите това оформление отзивчиво, като използвате медийни заявки за средни и малки екрани и CSS. Отново той задава стилове за видеото, логото и маркера. Той също така демонстрира как да зададете заменящо изображение за малки екрани, които не могат да възпроизвеждат видео, и да скрие видеото.

Преминавайки към по-сложни проблеми, Converse демонстрира как да използвате JavaScript, за да добавите по-сложен контрол върху дисплея за функции на мобилни устройства, като сензорни събития. Той представя уебсайт на трета страна, наречен Modernizr, който ще генерира CSS класове, които могат да бъдат добавени към страницата чрез JavaScript въз основа на функциите на текущото устройство. Той демонстрира как да генерирате кода, да го изтеглите и добавите към кода на вашата уеб страница.

В последния урок Converse демонстрира как да кодира позицията и други стилове за оформлението, така че видеото да покрива целия прозорец на браузъра.

Този курс беше свързан с HTML и CSS, използвани за стил и позициониране на фоново видео за уеб и мобилни устройства. Въпреки това се надявах авторът да обсъди опциите за хостинг и оптимизиране на видео файла за бързо изтегляне. Също така би било хубаво да знаете как да добавяте интерактивни елементи за дизайн върху фоновото видео, а не само статични елементи.

Крис Конвърс има специалност графичен дизайн от Рочестърския технологичен институт и 22 години опит в дизайна и технологиите.

//www.lynda.com/HTML-tutorials/Design-Web-HTML-Background-Video/373560-2.html

Разкриване: Не получих финансова компенсация за тази статия. Мненията са напълно мои на базата на моя опит.

Инструкции Видео: Creative SVG Backgrounds for Modern Web Design (Може 2024).