Zeki Can - WordPress

  CSS

CSS ile Köşe Bantları Yapımı

Başlığı belirlerken bir kaç kez yazdım sildim. Alternatif olarak başlıklar şu şekil de olabilirdi. CSS ve HTML ile kutuların sağ üst köşelerine dikkat çekici bantlar yapımı, CSS ile Köşe Bantları Nasıl Yapılır ? , CSS ile Kategori Bantları Yapımı, CSS kullanarak Kutuların Kenarlarına Etiketler Ekleme.

CSS ile Ribbon (Köşe Bandı) Yapımı

Ne anlatmak istediğimi kelimelerle anlatamayınca örnek bir resim vererek yapmak istediğimiz şeyden bahsedeyim. Unutmadan yazayım bu köşe bantlarına Ribbon da deniyor.

Evet yapmaya çalıştığımız kutucuk bu şekilde. Kutunun sağ üstünde ki kısım bizi ilgilendiriyor. Bu kısma kategori, etiket, yorum sayısı, okunma sayısı gibi istediğinizi yazdırabilirsiniz.

Bu köşe bantları için temel kodları vereceğim. Style.Css dosyanıza altta verdiğim stil bilgilerini eklemeniz gerekiyor. Style.Css dosyanıza nasıl ulaşacağınızı bilmiyorsanız WordPress’te Style.CSS dosyası Nerededir ? adlı yazımı okuyarak kolayca ilgili dosyaya ulaşabilirsiniz.

Style.Css Dosyasına Eklenecek Kodlar

/* ZekiCan.Net CSS ile Köşe Bandı Yapımı Kodları */
.zekicannetkutum {
  margin: 50px auto;
  width: 280px;
  height: 320px;
  background: white;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 8px rgba(0,0,0,0.3);
  position: relative;
  z-index: 90;
}

.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}

.ribbon-green {
  font: bold 10px Sans-Serif;
  color: #fff;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45); 
  color: #fff;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}
/* ZekiCan.Net CSS ile Köşe Bandı Yapımı Kodları Bitişi */

Stil dosyamızı ekledikten sonra köşe bantlarını göstermek istediğiniz bölümlerde altta ki HTML kodunu kullanmalısınız.

HTML Kod Kullanım Örneği

<div class="zekicannetkutum">
       <div class="ribbon-wrapper-green">
         <div class="ribbon-green">ZekiCan.Net</div></div>
</div>

HTML kodunda bant kısmında göstermek istediğiniz yeri kendinize göre ayarlamalısınız. Class isimlerini bu şekil de kullanmalısınız.

  Benzer Yazılar

  Yorumlar

  Kategoriler

  Arama Yap

  Son yorumlar