
Css Fullscreen Background (Tam ekran arkaplan) Yapımı..
Bu yazımızda One page (tek sayfa) tasarımlarda sıklıkla kullanılan tam ekran açılan sayfa yönteminden bahsediyor olacağız. CSS dosyanıza ekleyeceğiniz bir kaç pratik kod ile bu işlemi yapmanız son derece kolay, uygulamanın daha net anlaşıla bilmesi için yapıyı one page mantığında tasarladık, doküman içerisinde tıklanıldığında ilgili alana giden (named anchor) basit bir java script koduda mevcut example butonuna tıklayarak uygulamayı daha net inceleye bilir, download butonuna tıklayarakta uygulamayı indirebilirsiniz Sass ve Less kullanıcılarını da unutmadık elbette döküman içinde hem Sass hemde Less dosyalarıda mevcut umarız sizler için kullanışlı bir uygulama olmuştur…
Örnek
See the Pen oXejGw by MinimalCoding (@MinimalCoding) on CodePen.
Example | Download |
Html Kod Yapısı
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<section class="header"> <div class="mask"> <div class="text-align"> <h1>Minimal Coding</h1> <h2>Only Header FullScreen Background</h2> </div> </div> </section> |
CSS Kod Yapısı
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 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
html, body { width: 100%; height: 100%; font-family: "Inconsolata"; -webkit-font-smoothing: antialiased; padding: 0; margin: 0; } h1 { color: #F5A623; font-weight: 400; font-size: 55px; margin-bottom: 15px; margin-top: 0; } h2 { font-size: 32px; color: white; font-weight: 400; } .header { width: 100%; height: 100%; background-image: url("http://minimalcoding.net/wp-content/uploads/2015/06/background.jpg"); background-size: cover; background-position: center center; position: relative; left: 0; top: 0; } .header .mask { position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); } .header .mask .text-align { position: relative; display: inline-block; padding: 0px 20px; border-right: 1px solid #ffffff; border-left: 1px solid #ffffff; text-align: center; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } |
SASS ve Less Kod Yapısı
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 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
html,body{ width: 100%; height: 100%; font-family: "Inconsolata"; -webkit-font-smoothing: antialiased; padding:0; margin:0; } h1{ color:#F5A623; font-weight: 400; font-size: 55px; margin-bottom: 15px; margin-top: 0; } h2{ font-size: 32px; color: white; font-weight: 400; } .header{ width: 100%; height: 100%; background-image: url("http://minimalcoding.net/wp-content/uploads/2015/06/background.jpg"); background-size: cover; background-position:center center ; position: relative; left: 0; top: 0; .mask{ position: absolute; width: 100%; height: 100%; background-color:rgba(0,0,0,.8); .text-align{ position: relative; display: inline-block; padding: 0px 20px; border-right: 1px solid #ffffff; border-left: 1px solid #ffffff; text-align: center; left: 50%; top:50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); } } } |
Minimal Coding Privacy Policy
Sitemizi ziyaret eden kullanıcılar aşağıdaki koşulları, yazılanlarla sınırlı olmamak şartıyla kabul etmiş sayılacaktır. “www.minimalcoding.net” sitesinde yer alan tüm bilgiler,tasarım,logo,yorum ve tavsiyeler ile ses, görüntü, yazı içeren bilgi ve belgeler (“İçerik”) ile buradan yapılan tüm linkler, kullanıcıya genel bilgi vermek amacıyla sunulmuştur.
Burada mevcut olan İçerik, Minimal Coding'i Kaynak göstermeden paylaşılamaz ve yayınlanamaz. Bu siteye erişim serbest ve anonimdir.