background özelliklerini anlatırken background tanımlarının içerik ve padding alanının ardalanını etkilediğini söylemiştik. CSS2.1’de tanımladığımız ardalan resimleri içeriği ve padding uygulanan alanları kapsıyor. CSS3 ile birlikte buradaki kabul değişti. Artık kenar çizgileride dahil edilebiliyor veya içerik alanı ile sınırlandırılabiliyor. Bize bu imkanı CSS3’ün background-clip ve background-origin özellikleri sağlıyor.

İlk olarak background-origin özelliğini inceleyerek başlayalım.

background-origin

background-image konumunu hesaplamada elementin kutusunun sınırlarını belirler. CSS3’den önce bu sabit bir değer olarak padding-box idi. Bu özellik bize farklı konumlandırma imkanı sağlar.

Yapısı: background-origin: <bg-box>
Aldığı Değerler:<bg-box> border-box | padding-box | content-box
Başlangıç değeri:padding-box
Uygulanabilen elementler: Tüm elementler
Kalıtsallık: Yok

Aldığı değerleri kısaca açıklarsak

  • border-box: background-image konumu border alanından başlar
  • padding-box: background-image konumu padding alanından başlar
  • content-box: background-image konumu içerik alanından başlar

#kutu1 {
    -moz-background-origin: border;
    -webkit-background-origin: border;
    -webkit-background-origin: border-box;
    background-origin: border-box;
}
#kutu2 {
    -moz-background-origin: padding;
    -webkit-background-origin: padding;
    -webkit-background-origin: padding-box;
    background-origin: padding-box;
}
#kutu3 {
    -moz-background-origin: content;
    -webkit-background-origin: content;
    -webkit-background-origin: content-box;
    background-origin: content-box;
}

background-position:fixed tanımlı elementlere etki etmez.

Tarayıcı Desteği

Chrome explorer Firefox
1.0+ 9+ 3.6+

Mobil Tarayıcılar

Android Mobil Safari Chrome
2.1+ 3.2+ 36+

background-clip

background-clip ardalanın nerede gösterileceğini tanımlar. Daha önce padding dahil içerik alanı sabit olarak geliyordu, artık border alanıda dahil edilebiliyor veya padding alanı kapsamdan çıkarılabiliyor

Yapısı: background-clip: <bg-box>
Aldığı Değerler: <bg-box> border-box | padding-box | content-box
Başlangıç değeri: border-box
Uygulanabilen elementler: Tüm elementler
Kalıtsallık: Yok

Aldığı değerleri kısaca açıklarsak

  • border-box:Ardalan içerik alanı + padding alanı + border alanını kapsar.
  • padding-box: Ardalan içerik alanı + padding alanını kapsar
  • content-box: Ardalan sadece içerik alanını kapsar.

border-box tanımı eğer background-origin:border-box ise uygulanır.

#kutu1{
 -moz-background-origin: border;
 -webkit-background-origin: border;
 -webkit-background-origin: border-box;
 background-origin: border-box;
 -moz-background-clip:border;
 -webkit-background-clip:border;
 -webkit-background-clip:border-box;
 background-clip:border-box;
}

#kutu2{
 -moz-background-origin: border;
 -webkit-background-origin: border;
 -webkit-background-origin: border-box;
 -moz-background-clip:padding;
 -webkit-background-clip:padding;
 -webkit-background-clip:padding-box;
 background-clip:padding-box;
}

#kutu3{
      -moz-background-origin: border;
 -webkit-background-origin: border;
 -webkit-background-origin: border-box;
 -moz-background-clip:content;
 -webkit-background-clip:content;
 -webkit-background-clip:content-box;
 background-clip:content-box;
}

background-origin:border-box olarak tanımladığımızda background-clip özelliğini daha iyi anlarız. Her üç kutudaki farkları gördüğünüz gibi. Resim sırası ile border, padding ve içerik alanından kırpılmıştır.

Tarayıcı Desteği

Chrome explorer Firefox
1.0+ 9+ 3.6+

Mobil Tarayıcılar

Android Mobil Safari Chrome
2.1+ 3.2+ 36+

backgroun-origin özelliği background-image konumunun kapsama alanını belirlerken, background-clip ise background alanını kırpmak için kullanılır. background-origin sadece ardalan resmini etkilerken background-clip ardalan resmi ve ardalan renginide etkiler.

Bu özellikleri destekleyen farklı tarayıcılar için önek ile çözüm üretilir. Diğer önek uygulamalarında farklı olarak bu özelliklerin değerlerinde de tarayıcı sürümleri arasında farklılıklar vardır. Firefox ve Webkit’in eski sürümlerinde değer olarak border, content vepadding değerlerini desteklerken son çıkan sürümler standartlaşan content-box, border-box ve padding-box değerlerini desteklemektedirler.

background-clip: text Değeri

Webkit tabanlı tarayıcılarda diğerlerinden farklı olarak text değeride vardır. Henüz standartlarda bulunmayan bu değeri sadece webkit kullanan Chrome ve Safari desteklemektedir. Bu değer atandığında metinin ardalanına resim uygulanıyor geri kalan kısımlara ise saydam ardalan olarak kalıyor.

#kutu1 {
   -moz-background-origin: border;
   -webkit-background-origin: border;
   -webkit-background-origin: border-box;
   background-origin: border-box;
   -webkit-background-clip:text;
   -webkit-text-fill-color:transparent;
   font:bold 72px Arial, Helvetica, sans-serif;
}

-webkit-text-fill-color:transparent ile metnin ardalanını saydamlaştırıyoruz ve elemanın ardalanındaki resmi gösteriyoruz. Çok güzel görsel çalışmaları bu şekilde yapabiliriz, ancak henüz sadece Chrome ve Safari desteklediği için pek kullanışlı değil.

Kaynaklar

HTML Öznitelikleri ve DOM özellikleri

**DOM (Belge Nesnesi Modeli)** HTML ile javascript'i birbirine bağlar. DOM, HTML dokümanındaki tüm elamanları ağaç yapısı mantığıyla nesn...… Devamını oku

CSS3 ile resimleri oranını koruyarak sığdırma

20 November 2017 tarihinde yayınlandı.

jQuery'ye büyük darbe Javascript ve seçiciler - 2

21 September 2017 tarihinde yayınlandı.