Css Fullscreen Background (Tam ekran arkaplan) Yapımı..

14 Haziran 2015

minimalcoding

4695 0

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ı




<section class="header">
    <div class="mask">
        <div class="text-align">
            <h1>Minimal Coding</h1>
            <h2>Only Header FullScreen Background</h2>
           
        </div>
    </div>
</section>

<h1>Minimal Coding</h1>

<h2>Only Header FullScreen Background</h2>

</div>

</section>

CSS Kod Yapısı




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%);
}

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ı




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%);
    }
  }
}

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%);

}

Css Fullscreen Background (Tam ekran arkaplan) Yapımı..

Örnek

Html Kod Yapısı

CSS Kod Yapısı

SASS ve Less Kod Yapısı

Yorum yap