Zeki Can - WordPress

  CSS

CSS ile Renkli Gölgeli Kutu Yapımı

CSS ile yeni kutular yapmaya devam ediyorum. Bu kutu modellemesinde gölge ve renk katacağız. HTML ve CSS ile bu kutu gerçekten yapıldı mı diye çok şaşıracaksınız.

Renkleri ve içeriği kendinize göre ayarlayabilirsiniz. Sadece style.css dosyasına eklediğimiz kodlarda ufak değişiklikler yapmanız gerekiyor.

Renkler için background-color: #EBA39E; yazan bölümleri renk kodları ile yeni renk verebilirsiniz. Daha fazla renk kodları için Renk Kodları adlı yazımı okuyabilirsiniz.

Bu kutuları oluşturmak için Style.Css dosyanızı açın ve alttaki kodları en alta yapıştırın. Style.Css dosyası nerede diyorsanız WordPresste Style.Css Dosyası Nerededir ? adlı yazımı okuyarak kolayca ulaşabilirsiniz.

Style.Css Dosyasına Eklenecek Kodlar:

/* ZekiCan.Net Renki Gölgeli Buton Yapımı Kodları */
body{
  background:#E6EEF6;
}
.wrap{
  margin-left:20px;
}
.box{
  width:40%;
  height:200px;
  float:left;
  background-color:white; 
  margin:25px 15px;
  border-radius:5px;
}
.box h3{
  font-family: 'Didact Gothic', sans-serif;
  font-weight:normal;
  text-align:center;
  padding-top:60px;
  color:#fff;
}
.box1{
  background-color: #EBA39E;
}
.box2{
  background-color: #EDE89A;
}
.box3{
  background-color: #9EEBA1;
}
.box4{
  background-color: #9EEBBF;
}
.box5{
  background-color: #9ED9EB;
}
.box6{
  background-color: #9EB3EB;
}
.box7{
  background-color: #DB9EEB;
}
.box8{
  background-color: #C49EEB;
}
.shadow1, .shadow2, .shadow3,.shadow4,.shadow5,.shadow6,.shadow7,.shadow8{
  position:relative;
}
.shadow1,.shadow2,.shadow3,.shadow4,.shadow5,.shadow6,.shadow7,.shadow8{
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
}
/**************************************************  Border Verme ZekiCan.Net
****************************************************************/
.shadow1 h3, .shadow2 h3, .shadow3 h3, .shadow4 h3, .shadow5 h3, .shadow6 h3, .shadow7 h3, .shadow8 h3{
  width:87%;
  height:100px;
  margin-left:6%;
  border:2px dashed #F7EEEE;
  border-radius:5px;
}
/****************************************************************
*Gölge vermek icin ZekiCan.Net
****************************************************************/
.shadow1:before, .shadow1:after{
  position:absolute;
  content:"";
  bottom:12px;left:15px;top:80%;
  width:45%;
  background:#9B7468;
  z-index:-1;
  -webkit-box-shadow: 0 20px 15px #9B7468;
  -moz-box-shadow: 0 20px 15px #9B7468;
  box-shadow: 0 20px 15px #9B7468;
  -webkit-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  transform: rotate(-6deg);
}
.shadow1:after{
  -webkit-transform: rotate(6deg);
  -moz-transform: rotate(6deg);
  transform: rotate(6deg);
  right: 15px;left: auto;
}
.shadow2:before{
  position:absolute;
  content:"";
  width:80%;
  top:140px;bottom:15px;left:30px;
  background-color:#9F8641;
  z-index:-1;
  -webkit-box-shadow:0 23px 17px 0 #9F8641;
  -moz-box-shadow:0 23px 17px 0 #9F8641;
  box-shadow: 0 23px 17px 0 #9F8641;
  -webkit-transform:rotate(-4deg);
  -moz-transform:rotate(-4deg);
  transform:rotate(-4deg);
}
.shadow3:before, .shadow3:after{
  content:"";
  position:absolute;
  bottom:0;top:2px;left:15px;right:15px;
  z-index:-1;
  border-radius:100px/30px;
 -webkit-box-shadow:0 0 30px 2px #479F41;
  -moz-box-shadow:0 0 30px 2px #479F41;
  box-shadow: 0 0 30px 2px #479F41;
}
.shadow4:before, .shadow4:after{
  position:absolute;
  content:"";
  top:14px;bottom:14px;left:0;right:0;
  box-shadow:0 0 25px 3px #548E7F;
  border-radius:100px/10px;
  z-index:-1;
}
.shadow5:before, .shadow5:after{
  position:absolute;
  content:"";
  box-shadow:0 10px 25px 20px #518C96;
  top:40px;left:10px;bottom:50px;
  width:15%;
  z-index:-1;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.shadow5:after{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;left: auto;
}
.shadow6:before, .shadow6:after{
  position:absolute;
  content:"";
  top:100px;bottom:5px;left:30px;right:30px;
  z-index:-1;
  box-shadow:0 0 40px 13px #486685;
  border-radius:100px/20px; 
}
.shadow7:before, .shadow7:after{
  position:absolute;
  content:"1";
  top:25px;left:20px;bottom:150px;
  width:80%;
  z-index:-1;
  -webkit-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  transform: rotate(-6deg);
}
.shadow7:before{
  box-shadow:10px -10px 30px 15px #984D8E;
}
.shadow7:after{
  -webkit-transform: rotate(7deg);
  -moz-transform: rotate(7deg);
  transform: rotate(7deg);
  bottom: 25px;top: auto;
  box-shadow:10px 10px 30px 15px #984D8E;
}
.shadow8{
  box-shadow:
 -6px -6px 8px -4px rgba(250,254,118,0.75),
  6px -6px 8px -4px rgba(254,159,50,0.75),
  6px 6px 8px -4px rgba(255,255,0,0.75),
  6px 6px 8px -4px rgba(0,0,255,2.75);
}

Stil dosyamıza eklediğimiz kodlardan sonra butonları ya da kutuları göstermek istediğimiz yere HTML kodlarını ekleyeceğiz. Bu kodlara link verilerek tıklanabilir kılınır. Kodları sidebar ya da header da logo yanına ekleyebilirsiniz.

<link href='https://fonts.googleapis.com/css?family=Didact+Gothic' rel='stylesheet' type='text/css'>
<div class="wrap">
  <div class="box box1 shadow1">
    <h3>ZekiCan.Net</h3>
  </div>
  <div class="box box2 shadow2">
    <h3>WordPress</h3>
  </div>
  <div class="box box3 shadow3">
    <h3>Blogger</h3>
  </div>
  <div class="box box4 shadow4">
    <h3>ZekiCan.Net</h3>
  </div>
  <div class="box box5 shadow5">
    <h3>Kişisel Blog</h3>
  </div>
  <div class="box box6 shadow6">
    <h3>Android</h3>
  </div>
  <div class="box box7 shadow7">
    <h3>Yazılım Dünyası</h3>
  </div>
  <div class="box box8 shadow8">
    <h3>Oyun</h3>
  </div>
</div>  

Ben 8 tane kutu oluşturdum. Bunu arttırmak azaltmak için kodları tekrarlayabilir ve ya silip azaltabilirsiniz.

CSS ile daha farklı kutular yapmak için CSS Kategorisini inceleyebilirsiniz.

  Benzer Yazılar

  Yorumlar

  Kategoriler

  Arama Yap

  Son yorumlar