Lynda.com Dizajnirajte pozadinski video za HTML

• Travanj 29, 2024

Pozadinski video je izvrstan način za plasiranje vašeg proizvoda i na ovom tečaju za video trening Lynda.com pod nazivom Dizajnirajte web: HTML pozadinski video s Chrisom Converseom naučit ćete kako dodati pozadinski video sa automatskim igranjem na svoju web stranicu. Također ćete naučiti kako pomoću CSS-a postaviti druge elemente dizajna preko pozadinskog videozapisa. A datoteke s vježbama su besplatne čak i za standardno članstvo.

Converse započinje html datoteku s golim kostima i gradi glavni spremnik div za elemente dizajna: liniju teksta, logotip SVG i videozapis. On pokazuje kako koristiti autoplay u videooznaci i kako postaviti dvije najčešće vrste videozapisa, .mp4 i .ogg.

Zatim Converse prelazi na CSS datoteke i CSS radi stiliziranja i pozicioniranja videa i centrirane slike logotipa. Nastavlja raditi isto i za tekst s tekstom. Posebno mi se svidjela njegova tehnika rada s granicama.

Converse zatim govori o tome kako prilagoditi ovaj izgled koristeći medijske upite za srednje i male ekrane i CSS. Opet postavlja stilove za videozapis, logotip i crtu. Također pokazuje kako postaviti zamjensku sliku za male ekrane koji ne mogu reproducirati videozapis i sakriti ih.

Prelazeći na složenije probleme, Converse pokazuje kako pomoću JavaScripta dodati složeniju kontrolu nad zaslonom za značajke mobilnih uređaja, poput dodirnih događaja. On uvodi web mjesto treće strane pod nazivom Modernizr koje će generirati CSS klase koje se mogu dodati na stranicu putem JavaScript-a na temelju značajki trenutnog uređaja. On pokazuje kako generirati kôd, preuzeti ga i dodati ga u kod vaše web stranice.

U posljednjoj lekciji Converse prikazuje kako kodirati položaj i druge stilove izgleda, tako da video pokriva cijeli prozor preglednika.

Ovaj tečaj se odnosio na HTML i CSS koji se koriste za oblikovanje i pozicioniranje pozadinskog videozapisa za web i mobilne uređaje. Međutim, nadao sam se da će autor razmotriti opcije za hosting i optimizaciju video datoteke za brzo preuzimanje. Također, bilo bi dobro znati dodati elemente interaktivnog dizajna preko videozapisa u pozadini umjesto samo statičkih elemenata.

Chris Converse je diplomirao grafički dizajn s Rochester Instituta za tehnologiju i 22 godine iskustva u dizajnu i tehnologiji.

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

Otkrivanje: Za ovaj članak nisam financijski nadoknađen. Mišljenja su u potpunosti moja na temelju mog iskustva.

Upute Video: Word, mjesto broj ili slovo na stranice, popis (Travanj 2024).