Ad o b ew o rd p ress. co m / T a sa rı m U n su rl a rı / HT M L5 / HT M L5 i l e T a m E kra n (F u l l Screen )
HTML5 ile Tam Ekran (Full Screen) Vatanay Özbeyli tarafından 22 Kasım 2012 tarihinde yazıldı. ~ Yorum Yok + Değiştir
Önceki yıllarda Flash ile yaptığımız tam ekran (Full Screen) desteği artık HTML5 ile rahatça yapılabilmekte. Tek yapmanız gereken Section tagını doğru kullanmak. Vereceğim örnek section içerisindeki görsel ile çalışmakta. Yani resmin orjinal boyutunu gösterebileceğiniz bir çalışma. Fakat siz isterseniz CSS kodlarıyla biraz oynayıp farklı tekniklerde kullanabilirsiniz.
Kullanacağım görsel :
Uygulama İlk olarak aşağıdaki HTML kodları sayfamızın <body><body> tagı içerisinde görselin küçük halinin görünmesini istediğiniz alana koyuyoruz. Aşağıda Section’ı derleyici ve görüntüleyici olmak üzere iki işlev için kullanıyoruz. 1 <section id="tamekran"><img src="http://www.adobewordpress.com/ads/300x250.jpg" alt="AdobeWordPress.com" /></section> 2 <script> 3 var e = document.getElementById("tamekran"); 4 e.onclick = function() { 5 if (RunPrefixMethod(document, "tamekran") || RunPrefixMethod(document, "IsFullScreen")) { 6 RunPrefixMethod(document, "CancelFullScreen"); 7 }
8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
else { RunPrefixMethod(e, "RequestFullScreen"); } } var pfx = ["webkit", "moz", "ms", "o", ""]; function RunPrefixMethod(obj, method) { var p = 0, m, t; while (p < pfx.length && !obj[m]) { m = method; if (pfx[p] == "") { m = m.substr(0,1).toLowerCase() + m.substr(1); } m = pfx[p] + m; t = typeof obj[m]; if (t != "undefined") { pfx = [pfx[p]]; return (t == "function" ? obj[m]() : obj[m]); } p++; } } </script>
Şimdi ise CSS kodlarımızı hazırlayalım. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
section{width:150px;} section img{ width: 100%; } section:-webkit-full-screen{ float: none; width: 100%; height: 100%; padding: 0; margin: 0; border: 0 none; background-color: white; } section:-moz-full-screen{ float: none; width: 100%; height: 100%; padding: 0; margin: 0; border: 0 none; } section:-ms-full-screen{ float: none; width: 100%; height: 100%; padding: 0; margin: 0; border: 0 none; } section:-o-full-screen{ float: none; width: 100%; height: 100%; padding: 0;
40 41 42 43 44 45 46 47 48 49 50 51
margin: 0; border: 0 none; } section:full-screen{ float: none; width: 100%; height: 100%; padding: 0; margin: 0; border: 0 none; }
Bu kadar…
Benzer Konular: CSS ile Mükemmel Twitter Buttonu Sadece CSS ile Yatay Menü Web Sayfanıza Etkileyici Giriş Paneli HTML5 Video Oynatıcı (Altyazı ve Logolu) HTML5 ve Google Map ile Yerinizi Bulun
Yazı Kategorisi : HTML5 , Tasarım Unsurları Anahtar Kelimeler : css , CSS3 , ekran , full , html , html5 , screen , tam , web , yapma