- Katılım
- 22 Ağu 2017
- Mesajlar
- 80
- Puanları
- 18
Günümüzde birçok web tasarımında hareketli arkaplanlar kullanıldığını görüyoruz. Özellikle şeffaf bir perde ile kullanılan bu yapı günden güne popülerleşiyor.
HTML5‘in getirdiği yenilikler, hareketli arkaplanlar hazırlarken Flash’a muhtaç kalmamamıza sebep oluyor. Böylece sadece birkaç satır kod yazarak ilgi çekici ve hareketli arkaplanlar oluşturuyoruz.
Bu dersimizde HTML5’in video oynatıcısını biraz daha yakından tanıyoruz, beraberinde de manipüle ediyoruz. Örneği görüntüleyerek başlayabilirsiniz.
ÖRNEK GÖRÜNTÜ
HTML5 ile tam ekran video arkaplan nasıl yapılır?
Eğer hazırsanız örneğimiz hakkında konuşmaya başlayabiliriz. Yapacağımız işlemi yüzeysel olarak belirleyelim.
İlk olarak tüm ekranı (body elemanını) kaplayacak bir video oluşturacağız. Bunu yapmak için CSS‘den yardım alıp video elemanını genişleteceğiz. Daha sonra bu video elemanını z-index ile hiyerarşik olarak en alta koyup üst kısmına web sayfamızın diğer öğelerini ekleyeceğiz.
Özetle body elemanına yazılmış bir background tanımlaması yerine body’nin bir adım üstüne koyulmuş ve büyütülmüş video elemanı sayesinde arkaplanımızı oluşturacağız. Şimdi bu anlatımı kodlarımız ile örneklendirelim.
HTML Kodları
İlk olarak videomuzu oluşturalım. Dropbox üzerinden MP4 uzantılı kısa bir video çağırıyoruz. Autoplay(sayfa açılınca otomatik oynat), loop (sürekli tekrar et) ve muted (sessiz oynat) gibi iç tanımlamalar da yapıyoruz.
Daha sonra içeriğimizi kodlarımıza ekleyelim.
CSS Kodları
En önemli kısım burası. İlk olarak HTML5 video oynatıcımızı geniş bir arkaplan yapısına çeviriyoruz.
Şimdi de içeriğimiz için bir tanımlama yapalım.
Hepsi bu kadar. Küçük bir ipucu ile makaleyi tamamlıyoruz. HTML5 ile oluşturduğunuz video arkaplanlar üzerine PNG formatında bol desenli ve fazla göz yormayan görseller atarsanız daha şık sonuçlar elde edebilirsiniz. Bilginize.
İyi çalışmalar.
HTML5‘in getirdiği yenilikler, hareketli arkaplanlar hazırlarken Flash’a muhtaç kalmamamıza sebep oluyor. Böylece sadece birkaç satır kod yazarak ilgi çekici ve hareketli arkaplanlar oluşturuyoruz.
Bu dersimizde HTML5’in video oynatıcısını biraz daha yakından tanıyoruz, beraberinde de manipüle ediyoruz. Örneği görüntüleyerek başlayabilirsiniz.
ÖRNEK GÖRÜNTÜ
HTML5 ile tam ekran video arkaplan nasıl yapılır?
Eğer hazırsanız örneğimiz hakkında konuşmaya başlayabiliriz. Yapacağımız işlemi yüzeysel olarak belirleyelim.
İlk olarak tüm ekranı (body elemanını) kaplayacak bir video oluşturacağız. Bunu yapmak için CSS‘den yardım alıp video elemanını genişleteceğiz. Daha sonra bu video elemanını z-index ile hiyerarşik olarak en alta koyup üst kısmına web sayfamızın diğer öğelerini ekleyeceğiz.
Özetle body elemanına yazılmış bir background tanımlaması yerine body’nin bir adım üstüne koyulmuş ve büyütülmüş video elemanı sayesinde arkaplanımızı oluşturacağız. Şimdi bu anlatımı kodlarımız ile örneklendirelim.
HTML Kodları
İlk olarak videomuzu oluşturalım. Dropbox üzerinden MP4 uzantılı kısa bir video çağırıyoruz. Autoplay(sayfa açılınca otomatik oynat), loop (sürekli tekrar et) ve muted (sessiz oynat) gibi iç tanımlamalar da yapıyoruz.
HTML:
<video autoplay loop muted>
<source src="http://dl.dropboxusercontent.com/s/ldnrmjjtaf3gi66/Family-Guy.mp4" type="video/mp4">
</video>
Daha sonra içeriğimizi kodlarımıza ekleyelim.
HTML:
<div class="icerik">
<section>
<h1>Full Arkaplan HTML5 Video</h1>
<p>HTML5 Video Player ile tüm sayfayı kaplayacak video arkaplanlar oluşturabilirsiniz. Hem de dakikalar içerisinde!</p>
</section>
</div>
CSS Kodları
En önemli kısım burası. İlk olarak HTML5 video oynatıcımızı geniş bir arkaplan yapısına çeviriyoruz.
CSS:
video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-size: cover;
}
Şimdi de içeriğimiz için bir tanımlama yapalım.
CSS:
.icerik {
width: 30%;
background: rgba(0,0,0,0.7);
display: table;
height: 100%;
position: absolute;
top: 0;
bottom:0;
left: 70%;
text-align:center;
}
.icerik section{
display: table-cell;
vertical-align: middle;
color: #fff;
}
.icerik h1 {
font-weight:300;
}
Hepsi bu kadar. Küçük bir ipucu ile makaleyi tamamlıyoruz. HTML5 ile oluşturduğunuz video arkaplanlar üzerine PNG formatında bol desenli ve fazla göz yormayan görseller atarsanız daha şık sonuçlar elde edebilirsiniz. Bilginize.
İyi çalışmalar.
Son düzenleme: