// O obsahu sekce zde // Malý obsah sekce na pozadí zde

Pro sociální ikony, které se nacházejí v sekci, jsem použil písmo Font Awesome sekce s malým pozadím... Poté pomocí pluginu přidáme šablonu pro naše video jQuery.mb.YTPlayer. Umístěte následující kód hned za .

Zde jsme použili k přizpůsobení videa:

• třída hráč- tuto třídu používá plugin mb.YTPlayer
• videoURL- odkaz na video
• zadržování- Volič CSS, ve kterém se má video přehrávat
• automatické přehrávání- automatické přehrávání videa
• Ztlumit- přítomnost zvuku
• začátek v- čas, od kterého se má začít přehrávat video
• neprůhlednost- průhlednost videa

CSS

Pojďme přidat styly na naše stránky. Nejprve definujme vzhled značek html, body, odstavců a seznamu s odrážkami.

Html (výška: 100%) tělo (písmo: 15px / 23px "Raleway", bezpatkové; okraj: 0; polstrování: 0; výška: 100%; šířka: 100%; -webkit-vyhlazování písem: vyhlazené;- webkit-text-size-adjust: 100%) p (font-size: 20px; line-height: 140%; text-align: center) ul li (display: inline-block; list-style: none; padding-right : 10px;)

Obálka (z-index: 600; poloha: relativní). Vzor (obrázek na pozadí: URL (../ images / pattern.png); opakování na pozadí: opakování; připojení na pozadí: posouvání; šířka: 100%; výška: 100%; poloha: absolutní; nahoře: 0; vlevo: 0). Dělič (obrázek na pozadí: URL (../ images / divider.png); displej: blok; šířka: 300 pixelů; výška: 35 pixelů; okraj: 10 pixelů auto ) #colorize (color: # f1c40f; font-family: "Lato", sans-serif; font-size: 40px)

Je načase upravit sekci s velkým pozadím. Nainstalujte z-index na 550 a parametr přetékat skrytý. Toto má zabránit zobrazování obsahu YouTube (titulků, anotací) na našich webových stránkách. Zbytek stylů je potřeba pro záhlaví, tlačítka a výchozí obrázek (o tom později).

Velké pozadí (z-index: 550; zarovnání textu: střed; výška: 100%; minimální výška: 100%; poloha: relativní; přetečení: skryté). Velké pozadí. Velké pozadí kontejneru (šířka: 830 pixelů) ; max-width: 100%; displej: inline-block; poloha: absolutní; nahoře: 50%; vlevo: 50%; -webkit-transform: translate (-50%,-50%); -moz-transform: translate (-50%,-50%); -ms-transform: translate (-50%,-50%); -o-transform: translate (-50%,-50%); transformace: translate (-50%, -50%)). Velký název pozadí (rodina písem: "Raleway", bezpatkové; velikost písma: 78 pixelů; barva: #fff; hmotnost písma: 300; transformace textu: velká písmena; zarovnání textu : střed; spodní okraj: 22px; padding-top: 20px; displej: vložený blok; připojení na pozadí: posouvání; opakování pozadí: opakování-x; poloha pozadí: horní střed) a.big-background-btn ( rodina písem: "Lato", bezpatkové; velikost písma: 13px; transformace textu: velká písmena; textová dekorace: žádná; barva: #fff; pozadí: průhledné; ohraničení: 2px plné #fff; výplň: 10px 14px ; kurzor: ukazatel; mezera mezi písmeny: 2px; zarovnání textu: střed; zobrazení: inline-block; -webkit-transition: .4s snadné pozadí; -moz-transition: .4s snadné pozadí; -o-přechod: .4s snadné pozadí; přechod: .4s snadné pozadí; ) .big-background-btn: hover (color: #fff; background: rgba (255,255,255,0.20)) .big-background-default-image (background: url (../ images / sunset.jpg); background-repeat : neopakování; poloha pozadí: střed středu; velikost pozadí: kryt; šířka: 100%; výška: 100%; z-index: 0; viditelnost pozadí: skrytá)

Nyní přejdeme k sekci o sekci... Pojďme konfigurovat parametr barva pozadí na bílou a polstrování 60px nahoře a dole a 20px vlevo a vpravo.

O sekci (font-rodina: "Lato", bezpatková; barva: # 7f8c8d; pozadí: #fff; odsazení: 60 pixelů 20 pixelů). Kontejner o sekci (zarovnání textu: střed; odsazení dole: 50 pixelů) .obout-section-title (rodina písem: "Raleway", bezpatkové; velikost písma: 40px; pozadí: #fff; barva: # 3d566e; odsazení: 0 35 pixelů; spodní okraj: 22 pixelů; připojení pozadí: posouvání; opakování na pozadí: opakování x; poloha pozadí: střed středu; transformace textu: velká písmena) a.about-section-btn (rodina písem: "Lato", bezpatkové; velikost písma: 13 pixelů; text -transformace: velká písmena; textová dekorace: žádná; barva: # 34495e; pozadí: průhledné; ohraničení: 2px plné # 34495e; odsazení: 10px 14px; kurzor: ukazatel; mezery mezi písmeny: 2px; zarovnání textu: střed; displej: inline-block; -webkit-transition: .4s easy background; -moz-transition: .4s easy background; -o-transition: .4s background easy; transition: .4s background easy;) .about-section-btn: hover (barva: #fff; pozadí: # 34495e;)

Pro sekci s malým pozadím, která slouží také jako zápatí, přiřadíme šířku 100% a parametr přetékat skrytý. Také nějaké přidáme polstrování nahoře a dole, aby bylo vidět naše video. Nakonec přidejme styly pro tlačítka sociálních médií.

Sekce s malým pozadím (rodina písem: „Raleway“, bezpatkové; odsazení: 100 pixelů 0; poloha: relativní; šířka: 100%; přetečení: skryté). Kontejner s malým pozadím (pozice: relativní; zarovnání textu) : střed). malý název pozadí (velikost písma: 40 pixelů; barva: # f1c40f; hmotnost písma: 300; index z: 10; zobrazení: vložený blok; transformace textu: velká písmena; spodní okraj: 20 pixelů ; margin-top: 20px; poloha: relativní; připojení na pozadí: posouvání; opakování na pozadí: opakování-x; poloha na pozadí: horní střed). společenské a (barva: #fff). sociální a: vznášení (barva: # bdc3c7)

Mediální dotazy

Aby náš web reagoval, přidejme nějaké mediální dotazy.

@media screen and (max-width: 768px) (.about-section-title (line-height: 1)) @media screen and (max-width: 480px) (.big-background-title (font-size: 58px) ) .mall-background-title (line-height: 1) / *. player (display: none;)-> If you want to remove the video bg on a specific viewport w / o plugin * /) @media screen and (media max-width: 360px) (.big-background-title, # colorize (line-height: 1)) @media screen and (max-width: 320px) (.small-background-title (font-size: 30px))

jQuery

Nyní zapneme naše video na YouTube. Zavolejme třídu hráč uvnitř kódu jQuery. Umístěte následující kód před uzavírací značku těla a do značek .
$ (funkce () ($ (". hráč"). mb_YTPlayer ();));

Záložní možnost

Videa na pozadí z YouTube se nebudou přehrávat na mobilních zařízeních nebo tabletech, protože to zásady YouTube neumožňují.

Můžeme však použít jQuery k přidání výchozího obrázku na pozadí v případě, že prohlížeč zjistí, že uživatel vstoupil na web z mobilního zařízení.

Manuální řešení

Abychom zjistili, že je uživatel přihlášen z mobilního zařízení nebo tabletu, můžeme prvek skrýt na konkrétní velikosti obrazovky. Například chceme odstranit pozadí videa na 480px širokoúhlých obrazovkách. Do prvku přehrávače stačí přidat display: none:

@mediální obrazovka a (maximální šířka: 480 pixelů) (.player (displej: žádný;))

Pokud jde o jQuery, zde nastavíme proměnnou is_mobile s parametrem false. Pak se ujistěte, že třída hráč má zobrazení: žádné parametry. Pokud ano, přidejte třídu velký obrázek na pozadí do sekcí velké pozadí a sekce s malým pozadím použít výchozí obrázek na pozadí. Jinak se nic nezmění.

(funkce ($) ($ (dokument) .ready (funkce () (var is_mobile = false; if ($ (". player"). css ("display") == "none") (is_mobile = true;) if (is_mobile == true) (// Podmíněný skript zde $ (". big-background, .small-background-section"). addClass ("big-background-default-image");) else ($ (". hráč "). mb_YTPlayer ();)));)) (jQuery);

Řešení pomocí pluginu jQuery

Další způsob, jak nastavit výchozí obrázek, je pomocí pluginu jQuery zařízení.js(http://matthewhudson.me/projects/device.js/). To zjednoduší proces popisu podmínek pro různé velikosti obrazovky mobilních zařízení. Pomocí tohoto pluginu můžeme jednoduše napsat následující kód:

(funkce ($) ($ (dokument) .ready (funkce () (//Device.js zkontroluje, zda se jedná o tablet nebo mobil - http://matthewhudson.me/projects/device.js/ if (! zařízení. tablet () &&! device.mobile ()) ($ (". player"). mb_YTPlayer ();) else (// jQuery přidá výchozí pozadí do preferované třídy $ (". big-background, .small- sekce pozadí "). addClass (" big-background-default-image ");)));)) (jQuery);

Zde jsem použil metody device.mobile () a zařízení.tablet () zkontrolovat zařízení, ze kterého je uživatel přihlášen. Pokud je splněna podmínka, že je třída přidána velký obrázek na pozadí do sekce velké pozadí a sekce s malým pozadím... Jinak třída hráč zůstane nezměněno a video se přehraje.

Dali jsme do pořádku

Videa jsou skvělý způsob, jak dostat vaše sdělení k publiku. Pokud je správně používán, může to být účinný nástroj pro váš web.

Jsem si jist, že jak se webdesign vyvíjí a zdokonaluje, bude stále více kreativních nápadů na používání videa v designu webových stránek. Doufám, že jste se v tomto tutoriálu něco naučili. Své myšlenky a komentáře pište do komentářů.

Od překladatele. Se všemi přáními a připomínkami ohledně překladu mě prosím kontaktujte osobně. Dík!

Jak nainstalovat web na stolní monitor?

Pravděpodobně první věc, která každého uživatele unaví, je podívat se na tapetu nainstalovanou na ploše. Mnoho lidí se neustále dívá na výchozí obrázek roky, i když byl systém přeinstalován více než jednou. Všichni uživatelé se s tím rychle nudí a hledají vhodné obrázky na plochu. Někteří uživatelé dávají přednost animovaným tapetám. Doporučuji nastavit domovskou stránku svého oblíbeného webu jako tapetu (samozřejmě jakoukoli stránku). Nyní, v době neomezeného internetu, je to někdy pro některé velmi, velmi výhodné, zvláště když je počítač nebo notebook neustále připojen k síti. V každém případě je to dobrá volba. Tento trik se objevil ve Windows XP. Bohužel, tam to skončilo. Interaktivní tabulky jsou pryč. Pro mě osobně bylo velmi zajímavé sledovat aktualizace zpravodajských webů on-line. Takové nastavení plochy by bylo užitečné pro mnoho uživatelů. Ale opět se tvůrci nových verzí Windows rozhodli opustit plochu bez možnosti odrážet interaktivní stránku. Upřímně, velmi, velmi se omlouvám. Osobně mi někdy taková příležitost opravdu chybí.

Přejděme ale od slov k činům. Instalace webové stránky na plochu

• Klepněte pravým tlačítkem na libovolné volné místo na ploše

• V další nabídce, která se zobrazí na ploše, vyberte položku Vlastnosti.

• Vybereme kartu Plocha a klikneme Přizpůsobení pracovní plochy ...

• V nabídce Prvky plochy nyní vyberte kartu Web a poté klikněte na tlačítko Vytvořit... No, nebo si vyberte položku Moje aktuální domovská stránka. Na pozadí se zobrazí stránka webu, která je ve výchozím prohlížeči nastavena jako domovská stránka.

V zobrazeném okně stačí zadat dříve zkopírovanou adresu vašeho oblíbeného webu z adresního řádku vašeho prohlížeče.

Zavřete postupně otevřená dialogová okna, odsouhlaste změny a klikněte na OK. Nyní máte místo nudného obrázku stránku webu, která se vám líbí, a při pohledu na web na ploše můžete v interaktivním režimu sledovat změny na síti.