Ana Sayfa / Yazılım / CSS Background Kodları
CSS Background
CSS Background

CSS Background Kodları

Contents

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.

 

İçerik admin

HTML & CSS & PHP & Python Kodlama Dillerini Bilen Dijital Pazarlamada Kendini Geliştirmiş Bir Webmaster Ayrıca Kod Sihirbazı Siteninin Kurucusu

Ayrıca Bak

Web Geliştirme

PHP Nedir ? PHP ile Neler Yapabilirsiniz ?

PHP Nedir ? PHP (Hypertext Preprocessor) geniş bir kitle tarafından kullanılan, özellikle sanal sistemler üzerinde geliştirme …

Bir yorum

  1. Türker Vatansever

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

Bir cevap yazın

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

%d blogcu bunu beğendi: