CSS Background Kodları

[Toplam:2    Ortalama:5/5]

Merhaba Yazılım Blogu okurları … Artık yeni bir karar aldım. Hakim olduğum kodlama dillerini hakkında bilgiler ve tavsiyeler vereceğim. İlk başlangıcımız CSS Background Kodları ile olacaktır.

CSS ile html ile inşa edilen bir websitenin göze daha hoş bir şekilde hitap etmesini sağlanmaktadır. Ama CSS’in fazla kodu yoktur. Zaten CSS, C gibi fazla karışık bir dil değildir. Başladığınızda zaten syntax yapısını hemen anlayabilirsiniz. Bende sizlere yardımcı olabilmek için CSS’e yeni başlayacak arkadaşlara CSS Background (arka plan) kodlarını  vereceğim.



CSS Background Kodları

 

Background-İmage : Sitenizin arka planının arka plan resmini ayarlar.

  • background-image: resim/resim.jpg;

Background-Color  : Sitenizin arka plan rengini ayarlar.

  • background-color: #fff;
  • background-color:grey:
  • background-color: rgb(201, 76, 76)

Background-Size :  Siteniniz arka plan boyutunu ayarlar.

  • background-size:500px;

Background-Repeat :  Sitenizin arka planının tekrar etmesini sağlar.

  • background-repeat:repeat-x;
  • background-repeat:repeat-y;
  • background-repeat:repeat;
  • background-repeat:norepeat;

Backgorund-Position :  Sitenizin arka plan resminin hangi kısımlarının gözükeceğini belirler.

  • background-position:center;
  • background-position:center-top;

Background-Attachment :  Arka plan resminizin kaydırılıp kaydırılmayacağına karar verir.  Görüntüsel açıdan göze hoşluk veriyor. Fix ve scroll iki değer vardır. Fix ile sabit kalır. Scroll ile hareket eder.

  • background-attachment:fix;
  • background-attachment:scroll;

Background-Origin :  Arka planın konumunu hesaplamada kullanılır.

  • border-box: arka plan resminin konumu border alanından başlatır.
  • padding-box: arka plan resminin konumu padding alanından başlatır.
  • content-box: arka plan resminin konumu içerik alanından başlatır.

Background-Blend-Mode : Arka plan resmi ile arka plan renginin harmanlanmasını sağlar. 16 çeşit harmanlama tipi vardır.

.multiply {
  background-blend-mode: multiply;
}

.screen {
  background-blend-mode: screen;
}

.overlay {
  background-blend-mode: overlay;
}

.darken {
  background-blend-mode: darken;
}

.lighten {
  background-blend-mode: lighten;
}
.color-dodge {
  background-blend-mode: color-dodge;
}

.color-burn {
  background-blend-mode: color-burn;
}

.hard-light {
  background-blend-mode: hard-light;
}

.soft-light {
  background-blend-mode: soft-light;
}

.difference {
  background-blend-mode: difference;
}

.exclusion {
  background-blend-mode: exclusion;
}

.hue {
  background-blend-mode: hue;
}

.saturation {
  background-blend-mode: saturation;
}

.color {
  background-blend-mode: color;
}

.luminosity {
  background-blend-mode: luminosity;
}

Bu kodların farklı işlevleri vardır. Hepsini tek tek deneyebilirsiniz. Daha sonra temanıza uyumlu resimler üretebilirsiniz.  Eğer ilgi duyulursa CSS ilgili içeriklere devam edilecektir. Lütfen bizi oylayarak içeriğin hangi düzeyde olup olmadığını belirtin.

 

Tek Yorum

  1. Türker Vatansever demiş ki:

    Teşekkürler CSS Background Kodları adına kaliteli bilgiler vermişsiniz.

    Haziran 1, 2018
    Yanıtla

Bir cevap yazın

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