Zeki Can - WordPress

  CSS, HTML

CSS ve HTML ile Yan Yana Kutu Yapımı

  CSS, HTML    4 Şubat 2019
2 Yorum

HTML ve CSS kullanımı ile responsive kutular oluşturacağız. Bu kutuları web sitenizde istediğiniz bir bölümde kullanabilirsiniz.

İlk olarak style.css dosyanıza alttaki kod yapısını yapıştırın. Bu kod yapısında değişiklikler yaparak arka plan rengini ve kutu içerisinde yazan yazı boyutu tipini değiştirebilirsiniz.

WordPress style.css dosyasını açıp en altta altta ki kodu yapıştırın. Style.css dosyası nerede bilmiyorsanız WordPress Style.Css Dosyası Nerededir ? adlı yazımı okuyarak kolayca bulabilirsiniz.

/* ZekiCan.Net Renkli Kutu Yapımı */
.esnek-kutum {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.zekicannet-kutum-bir {
  flex: 1;
  background: linear-gradient(#D74177,#FFE98A);
  max-width:23%;
  padding: 5px;
  height: 150px;
  margin:1%;
  flex-shrink:1;
  flex-basis:23%;
  box-sizing:border-box;
}
.zekicannet-kutum-iki {
  flex: 1;
  background: linear-gradient(#FB872B,#D9E021);
  max-width:23%;
  padding: 5px;
  height: 150px;
  margin:1%;
  flex-shrink:1;
  flex-basis:23%;
  box-sizing:border-box;
}
.zekicannet-kutum-uc {
  flex: 1;
  background: linear-gradient(#312A6C,#852D91);
  max-width:23%;
  padding: 5px;
  height: 150px;
  margin:1%;
  flex-shrink:1;
  flex-basis:23%;
  box-sizing:border-box;
}
.zekicannet-kutum-dort {
  flex: 1;
  background: linear-gradient(#009E00,#FFFF96);
  max-width:23%;
  padding: 5px;
  height: 150px;
  margin:1%;
  flex-shrink:1;
  flex-basis:23%;
  box-sizing:border-box;
}

Style.Css Dosyasına kodu ekledik ve stillerimizi belirledik. Bu stilleri dediğim gibi istediğiniz gibi düzenleyebilirsiniz.

Kutularımızı nereye yerleştirmek istiyorsak altta verdiğim kodları o alana yerleştirin. Sidebar kısmına yerleştirmek için WordPress Admin Panelinden Bileşenler kısmına gidin. Bileşenlerden Özel HTML bileşenini Sidebar alanına sürükleyin ve içerisine verdiğim kodları yerleştirin.

<ul class="esnek-kutum">
  <li class="zekicannet-kutum-bir"></li>
  <li class="zekicannet-kutum-iki"></li>
  <li class="zekicannet-kutum-uc"></li>
  <li class="zekicannet-kutum-dort"></li>
  </ul>

Ben 4 adet yan yana kutu oluşturdum. Bunu istediğiniz gibi arttırıp çoğaltmak sizin elinizde. Stil dosyasında yapacağınız küçük değişiklikler ile harika bir görünüm elde edebilirsiniz.

Gradient renkler kullanarak daha güzel bir renk kombinasyonu yakalayabilirsiniz. Gradient renkler konusunda Göze Hoş Gelen Renk Kodları ve Gradient Renk Kodları adlı yazılarımı okuyarak birbirine uygun renkleri keşfedebilirsiniz.

Div İle renkli kutular Yapımı
Renkli Kutu Yapımı

116 okunma

Etiketler : , , , , , , ,

  Benzer Yazılar


  Yorumlar

Bir Cevap Yazın

E-posta hesabınız yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Yapılan Yorumlar (2)

  • abidin Yazar

    bende yan yana cikmadi yanlis yaptim bi yerde

    • Zeki Can Yazar

      Merhaba, kodları koplaya yapıştır yaparken bazen atlanan küçük bir detay kodun çalışmamasını sağlıyor. Koyduğunuz yerde ekran görüntüsü alırsanız yardımcı olabilirim.

  Arama Yap

  Arşivler