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

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.

 

İçerik Umut Avcı

HTML & CSS & PHP & Python Kodlama Dillerini Bilen Azda Olsa SEO Konusunda Bilgiye Sahip Olan Bir Webmaster Ayrıca Kod Sihirbazı Siteninin Kurucusu

Ayrıca Bak

Responsive Tasarım

Responsive Tasarım Nasıl Yapılır – Responsive Web Tasarım

Contents1 Responsive Tasarım Nedir2 Responsive Tasarım Nasıl Yapılır3 Responsive Tasarım Ölçüleri4 Responsive Tasarım Teknikleri4.1 İlgili …

Bir Cevap Yazın

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

%d blogcu bunu beğendi: