// Bölüm İçeriği hakkında burada // Küçük Arka Plan Bölüm İçeriği burada

bölümünde yer alan sosyal simgeler için Font Awesome yazı tipini kullandım. küçük arka plan bölümü... Ardından eklentiyi kullanarak videomuz için bir şablon ekleyeceğiz. jQuery.mb.YTPlayer. hemen sonra aşağıdaki kodu yerleştirin .

Videoyu özelleştirmek için kullandığımız şey:

• sınıf oyuncu- bu sınıf eklenti tarafından kullanılıyor mb.YTPlayer
• Video linki- videoya bağlantı
• muhafaza- Videonun oynatılacağı CSS seçici
• otomatik oynatma- otomatik oynatma videosu
• sessiz- sesin varlığı
• başlamak- videoyu oynatmaya başlama zamanı
• opaklık- video şeffaflığı

CSS

Sitemize stiller ekleyelim. Öncelikle html, body, paragraf etiketlerinin ve madde işaretli listenin görünümünü tanımlayalım.

Html (yükseklik: %100) gövde (yazı tipi: 15px / 23px "Raleway", sans-serif; kenar boşluğu: 0; dolgu: 0; yükseklik: %100; genişlik: %100; -webkit-font-smoothing: kenar yumuşatma; - webkit-text-size-adjust: %100) p (font-size: 20px; line-height: 140%; text-align: center) ul li (ekran: satır içi blok; liste stili: yok; sağ dolgu : 10 piksel;)

Sarıcı (z-endeksi: 600; konum: göreli) .pattern (arka plan resmi: url (../ resimler / desen.png); arka plan tekrarı: tekrar; arka plan eki: kaydırma; genişlik: %100; yükseklik: %100; konum: mutlak; üst: 0; sol: 0) .divider (arka plan resmi: url (../ görüntüler / bölücü.png); ekran: blok; genişlik: 300 piksel; yükseklik: 35 piksel; kenar boşluğu: 10 piksel otomatik ) #colorize (renk: # f1c40f; yazı tipi ailesi: "Lato", sans-serif; yazı tipi boyutu: 40 piksel)

Büyük arka plan bölümünü şekillendirmenin zamanı geldi. Düzenlemek z-endeksiüzerinde 550 ve parametre taşma gizli. Bu, YouTube içeriğinin (alt yazılar, ek açıklamalar) web sitemizde görüntülenmesini engellemek içindir. Stillerin geri kalanı başlıklar, düğmeler ve varsayılan görüntü için gereklidir (daha sonraları).

Büyük arka plan (z-endeksi: 550; metin hizalama: merkez; yükseklik: %100; minimum yükseklik: %100; konum: göreli; taşma: gizli) .big-background .big-background-container (genişlik: 830 piksel) ; maksimum genişlik: %100; görüntüleme: satır içi blok; konum: mutlak; üst: %50; sol: %50; -webkit-dönüşüm: tercüme (-50%, - %50); -moz-transform: tercüme (-50%, - %50); -ms-dönüşüm: çevir (-50%, - %50); -o-dönüştür: çevir (-50%, - %50); dönüştür: çevir (-50%, -50%)) .big-background-title (font-family: "Raleway", sans-serif; font-size: 78px; color: #fff; font-weight: 300; text-transform: büyük harf; metin hizalama : merkez; kenar boşluğu: 22 piksel; üst dolgu: 20 piksel; görüntü: satır içi blok; arka plan eki: kaydırma; arka plan tekrarı: tekrar-x; arka plan konumu: üst orta) a.big-background-btn ( yazı tipi ailesi: "Lato", sans-serif; yazı tipi boyutu: 13 piksel; metin dönüşümü: büyük harf; metin dekorasyonu: yok; renk: #fff; arka plan: şeffaf; kenarlık: 2 piksel katı #fff; dolgu: 10 piksel 14 piksel ; imleç: işaretçi; harf aralığı: 2 piksel; metin hizalama: merkez; ekran: satır içi blok; -webkit-geçiş: .4s arka plan kolaylığı; -moz-geçiş: .4s arka plan kolaylığı; -o-geçiş: .4s arka plan kolaylığı; geçiş: .4s arka plan kolaylığı; ) .big-background-btn: vurgulu (renk: #fff; arka plan: rgba (255,255,255,0.20)) .big-background-default-image (arka plan: url (../ images / günbatımı.jpg); arka plan tekrarı : tekrar yok; arka plan konumu: merkez merkez; arka plan boyutu: kapak; genişlik: %100; yükseklik: %100; z-endeksi: 0; arka yüz görünürlüğü: gizli)

Şimdi bölüme geçelim hakkında-bölüm... Parametreyi yapılandıralım arka plan rengi beyaza ve dolgu malzemesi 60px üst ve alt ve 20px sol ve sağ.

Hakkında bölümü (yazı tipi ailesi: "Lato", sans-serif; renk: # 7f8c8d; arka plan: #fff; dolgu: 60px 20px) .about-section-container (metin hizalama: merkez; dolgu-alt: 50 piksel) .about-section-title (font-family: "Raleway", sans-serif; yazı tipi boyutu: 40 piksel; arka plan: #fff; renk: # 3d566e; dolgu: 0 35 piksel; kenar boşluğu: 22 piksel; arka plan eki: kaydırma; arka plan-tekrar: tekrar-x; arka plan-konumu: merkez merkez; metin-dönüşümü: büyük harf) a.about-section-btn (yazı tipi ailesi: "Lato", sans-serif; yazı tipi boyutu: 13 piksel; metin -transform: büyük harf; metin dekorasyonu: yok; renk: # 34495e; arka plan: şeffaf; kenarlık: 2 piksel katı # 34495e; dolgu: 10 piksel 14 piksel; imleç: işaretçi; harf aralığı: 2 piksel; metin hizalama: merkez; ekran: satır içi blok; -webkit-geçişi: .4s arka plan kolaylığı; -moz-geçişi: .4s arka plan kolaylığı; -o-geçişi: .4s arka plan kolaylığı; geçiş: .4s arka plan kolaylığı;) .about-section-btn: üzerine gelin (renk: #fff; arka plan: # 34495e;)

Altbilgi işlevi de gören küçük arka plan bölümü için %100 genişlik ve bir parametre atayacağız taşma gizli. Biz de biraz ekleyeceğiz dolgu malzemesi videomuzun görülebilmesi için üst ve alt. Son olarak sosyal medya butonları için stiller ekleyelim.

Küçük arka plan bölümü (yazı tipi ailesi: "Raleway", sans-serif; dolgu: 100 piksel 0; konum: göreli; genişlik: %100; taşma: gizli) .small-background-container (konum: göreli; metin hizalama : merkez) .small-background-title (yazı tipi boyutu: 40 piksel; renk: # f1c40f; yazı tipi ağırlığı: 300; z-endeksi: 10; görüntü: satır içi blok; metin dönüşümü: büyük harf; kenar boşluğu: 20 piksel ; üst kenar boşluğu: 20 piksel; konum: göreli; arka plan eki: kaydırma; arka plan tekrarı: tekrar-x; arka plan konumu: üst orta) .socials a (renk: #fff) .socials a: vurgulu (renk: # bdc3c7)

Medya sorguları

Sitemizi duyarlı hale getirmek için bazı medya sorguları ekleyelim.

@media ekranı ve (maks-genişlik: 768 piksel) (.hakkında-bölüm-başlığı (satır-yüksekliği: 1)) @medya ekranı ve (maks-genişlik: 480 piksel) (.big-arka plan-başlığı (yazı tipi-boyutu: 58 piksel) ) .small-background-title (line-height: 1) / *.player (display: none;) -> Videoyu belirli bir viewport üzerinde eklentisiz olarak kaldırmak istiyorsanız * /) @media ekranı ve ( max-width: 360px) (.big-background-title, # colorize (line-height: 1)) @media screen ve (max-width: 320px) (.small-background-title (font-size: 30px))

jQuery

Şimdi YouTube videomuzu açalım. sınıfı arayalım oyuncu jQuery kodunun içinde. Aşağıdaki kodu, kapanış gövde etiketinin önüne ve etiketlerin içine yerleştirin .
$ (fonksiyon () ($ (". oyuncu").mb_YTPlayer ();));

geri dönüş seçeneği

YouTube politikaları buna izin vermediğinden, YouTube'dan gelen arka plan videoları mobil cihazlarda veya tabletlerde oynatılmaz.

Ancak, tarayıcının kullanıcının siteye bir mobil cihazdan girdiğini algılaması durumunda varsayılan bir arka plan resmi eklemek için jQuery kullanabiliriz.

Manuel çözüm

Kullanıcının bir mobil cihazdan veya tabletten giriş yaptığını belirlemek için öğeyi belirli bir ekran boyutunda gizleyebiliriz. Örneğin, 480px geniş ekranlarda video arka planını kaldırmak istiyoruz. Player öğesine display: none eklemeniz yeterlidir:

@media ekranı ve (maksimum genişlik: 480 piksel) (.player (ekran: yok;))

jQuery söz konusu olduğunda, burada bir değişken belirleyeceğiz. is_mobile false parametresi ile. Ardından, sınıfın olduğundan emin olun. oyuncu ekrana sahip: yok parametre. Eğer öyleyse, o zaman sınıfı ekleyin büyük-arka plan-varsayılan-görüntü bölümlere büyük arka plan ve küçük arka plan bölümü varsayılan arka plan resmini kullanmak için Aksi takdirde hiçbir şey değişmeyecektir.

(function ($) ($ (belge) .ready (function () (var is_mobile = false; if ($ (". player")). css ("ekran") == "none") (is_mobile = true;) if (is_mobile == true) (// Buradaki koşullu komut dosyası $ (". büyük arka plan, .küçük arka plan bölümü"). addClass ("büyük arka plan-varsayılan-görüntü");) else ($ (". oyuncu "). mb_YTPlayer ();)));)) (jQuery);

jQuery eklentisi ile çözüm

Varsayılan görüntüyü ayarlamanın başka bir yolu da jQuery eklentisidir. cihaz.js(http://matthewhudson.me/projects/device.js/). Bu, mobil cihazların farklı ekran boyutları için koşulları tanımlama sürecini basitleştirecektir. Bu eklentiyi kullanarak basitçe aşağıdaki kodu yazabiliriz:

(function ($) ($ (belge) .ready (function ()) (//Device.js, Tablet mi yoksa Mobil mi olduğunu kontrol edecek - http://matthewhudson.me/projects/device.js/ if (! device. tablet () &&! device.mobile ()) ($ (". player"). mb_YTPlayer ();) else (// jQuery varsayılan arka planı tercih edilen sınıfa $ (". big-background, .small-) ekler. arka plan bölümü "). addClass (" büyük arka plan-varsayılan görüntü ");)));)) (jQuery);

Burada yöntemleri kullandım cihaz.mobil () ve cihaz.tablet () kullanıcının oturum açtığı cihazı kontrol etmek için. Sınıfın eklenmesi koşulu karşılanırsa büyük-arka plan-varsayılan-görüntü bölüme büyük arka plan ve küçük arka plan bölümü... Aksi takdirde sınıf oyuncu değişmeden kalacak ve video oynatılacaktır.

sıraya koyduk

Videolar, mesajınızı kitlenize iletmenin harika bir yoludur. Doğru kullanıldığında siteniz için güçlü bir araç olabilir.

Web tasarımı geliştikçe ve geliştikçe, web sitesi tasarımında video kullanımı için daha yaratıcı fikirler olacağına eminim. Umarım bu eğitimde bir iki şey öğrenmişsinizdir. Düşüncelerinizi ve yorumlarınızı yorumlara yazın.

Bir çevirmenden.Çeviri ile ilgili tüm dilek ve yorumlarınız için lütfen bana özelden ulaşın. Teşekkürler!

Masaüstü monitöre site nasıl kurulur?

Muhtemelen herhangi bir kullanıcının bıktığı ilk şey, Masaüstünde yüklü olan duvar kağıdına bakmaktır. Birçok kişi, sistem birden fazla kez yeniden kurulmuş olsa bile, yıllarca sürekli olarak varsayılan resme bakar. Tüm kullanıcılar bundan çabucak sıkılır ve Masaüstü için uygun resimler ararlar. Bazı kullanıcılar hareketli duvar kağıtlarını tercih eder. Favori sitenizin ana sayfasını duvar kağıdı olarak ayarlamanızı öneririm (ancak herhangi bir sayfa elbette). Şimdi, sınırsız İnternet günlerinde, özellikle bir bilgisayar veya dizüstü bilgisayar sürekli ağa bağlı olduğunda, bu bazen bazıları için çok, çok uygundur. Her durumda, bu kötü bir seçenek değil. Bu numara Windows XP'de ortaya çıktı. Malesef orada bitti. Etkileşimli tablolar gitti. Şahsen haber sitelerinin güncellemelerini on-line izlemek benim için çok ilginçti. Böyle bir masaüstü kurulumu birçok kullanıcı için faydalı olacaktır. Ancak, yine, Windows'un yeni sürümlerinin yaratıcıları, etkileşimli bir sayfa yansıtma yeteneği olmadan Masaüstünden ayrılmaya karar verdiler. Dürüst olmak gerekirse, çok, çok üzgünüm. Şahsen, bazen böyle bir fırsatı gerçekten özlüyorum.

Ama hadi kelimelerden eylemlere geçelim. Web sayfasını masaüstüne yükleme

• Masaüstündeki herhangi bir boş alana sağ tıklayın

• Masaüstünde görünen ek menüde, öğeyi seçin Özellikler.

• Masaüstü sekmesini seçelim ve tıklayalım. Masaüstü özelleştirme...

• Masaüstü Öğeleri menüsünde, şimdi sekmeyi seçin ağ ve ardından düğmesine tıklayın Oluşturmak... Peki ya da bir öğe seçin Şu anki ana sayfam. Arka plan, varsayılan tarayıcıda ana sayfa olarak ayarlanan site sayfasını görüntüler.

Görünen pencerede, favori sitenizin önceden kopyalanmış adresini tarayıcınızın adres çubuğundan girmeniz yeterlidir.

Değişiklikleri kabul ederek ve Tamam'ı tıklatarak art arda açılan iletişim kutularını kapatın. Artık sıkıcı bir resim yerine, beğendiğiniz bir web sitesine ait bir sayfanız var ve masaüstünde siteye bakarak ağdaki değişiklikleri interaktif bir modda izleyebilirsiniz.