Renkler ve artalanlar

BB nitelikleri biçembent yazarlarına bir elemanın artalanını ve önalan rengini belirtebilme imkanı tanır. Artalan için bir renk belirtilebildiği gibi bir resim de belirtilebilir. Artalan nitelikleriyle artalan resmi belli bir yere yerleştirilebilir, yinelenebilir ve görüntü alanına göre sabit mi olacak yoksa kaydırılabilecek mi belirtilebilir.

Geçerli renk değerleri ve değer sözdizimi için bölümüne bakınız.

Önalan rengi: color niteliği color nitelikler color color renk | inherit kullanıcı arayüzüne bağlı evet görsel

Bu nitelik bir elemanın metin içeriğinin önalan rengini belirler. Kırmızı rengi belirtmenin çeşitli yolları vardır:

em { color: red } /* önceden tanımlı renk ismi */ em { color: rgb(255,0,0) } /* KYM aralığı: 0-255 */ Artalan

Biçembent yazarları bir elemanın artalanını bir resim veya bir renk olarak belirtebilirler. Çerçeve modeli gereğince, "artalan" denilince, içerik, kenar iç boşluğu ve kenar çizgisi alanlarının artalanlarından bahsediyor oluruz. Kenar çizgisi renkleri ve biçemleri kenar çizgisi nitelikleri ile belirtilir. Kenar dış boşlukları daima saydamdır, dolayısıyla ebeveyn çerçevenin artalan renginde görünürler.

Artalan nitelikleri miras alınmaz, ancak bir elemanın background-color niteliğinin ilk değeri öntanımlı olarak transparent (saydam) olduğundan artalan rengi ebeveynin rengindeymiş gibi görünecektir.

Kök elemanın ürettiği çerçevenin artalanı tuvalin tamamını kapsar.

HTML belgeler sözkonusu olduğunda, artalanın kök eleman olan html için değil body elemanı için belirtilmesini öneririz. Kullanıcı arayüzleri tuvalin artalanını doldururken şu öncelik kurallarına uymalıdırlar: eğer html elemanının background niteliğinin değeri transparent değerinden farklıysa o kullanılır, değilse body elemanının background niteliğinin değeri kullanılır. Eğer elde edilen değer transparent ise oluşum tanımsızdır.

Bu kurallara göre, aşağıdaki HTML belgenin tuvali bir "mermer" artalana sahip olacaktır:

Tuval artalanının belirtilmesi

Artalanım mermer. ]]> Artalan nitelikleri: background-color, background-image, background-repeat, background-attachment, background-position ve background background-color background-color nitelikler background-color background-color renk | transparent | inherit transparent hayır görsel

renk Bu nitelik bir elemanın artalan renginin ya bir renk değeri olarak ya da arkasının görünmesini sağlayan transparent değeriyle belirtilebilmesini sağlar.

background-image background-image nitelikler background-image background-image tanım-yeri | none | inherit none hayır görsel

Bu nitelik bir elemanın artalan resmini belirtmek için kullanılır. Biçembent yazarı belge için bir artalan resmi belirtiyorsa, resme erişilemediğinde gösterilmek üzere bir de artalan rengi belirtmelidir. Resim erişilebilir olduğunda resim, artalan renginin ürerinde oluşturulacaktır. (Dolayısıyla, resmin saydam bölgelerinden artalan rengi görünecektir.)

tanım-yeri Bu niteliğe değer olarak bir resmin bulunmadığı durumda none, resmin yerini belirtmek için tanım-yeri belirtilir.

body { background-image: url("mermer.gif") } p { background-image: none } background-repeat background-repeat nitelikler background-repeat background-repeat repeat | repeat-x | repeat-y | no-repeat | inherit repeat hayır görsel

Eğer bir artalan resmi belirtilmişse bu nitelikle resmin yinelenip yinelenmeyeceği, yinelenecekse nasıl yineleneceği belirtilir. Resmin yinelendiği alanlara bir çerçevenin içerik, kenar iç boşluğu ve kenar çizgisi alanları dahildir. Değerlerin anlamları şöyledir:

Resim hem yatayda hem de düşeyde yinelenir.

Resim sadece yatay olarak yinelenir.

Resim sadece düşey olarak yinelenir.

Resim yinelenmez; resmin sadece bir kopyası oluşturulur.

 body { background: white url("pendant.gif"); background-repeat: repeat-y; background-position: center; }
[Açıklama] Artalan resminin bir kopyası ortaya yerleştirildikten sonra eleman boyunca bir şerit oluşturmak üzere yukarı ve aşağı doğru resim yinelenmiştir.
background-attachment background-attachment nitelikler background-attachment background-attachment scroll | fixed | inherit scroll hayır görsel

Eğer bir artalan resmi belirtilmişse bu nitelikle resmin görüntü alanına göre sabit mi (fixed) yoksa kaydırılabilir mi (scroll) olacağı belirtilir.

Her belge için sadece bir görüntü alanı vardır. Yani, bir eleman kaydırma mekanizmasına sahip olsa bile (overflow niteliğine bakınız), bir sabit (fixed) artalan onunla hareket ettirilemez.

Bir resim sabitlenmiş olsa bile, sadece elemanın içerik ve kenar iç boşluk alanının artalanı olarak görünür olacaktır. Bu bakımdan resim döşenmiş (background-repeat: repeat) olmadıkça görünür olmayabilir.

Bu örnekte eleman kaydırıldığında görüntü alanına yapışık kalan sonsuz bir düşey şerit oluşturulmaktadır.

body { background: red url("pendant.gif"); background-repeat: repeat-y; background-attachment: fixed; }

Kullanıcı arayüzleri fixed değerini scroll olarak değerlendirebilirler. Yine de en azından html ve body elemanları için fixed değerinin doğru yorumlanması önerilir, çünkü bir yazar açısından, bir resmi sunmak için, fixed değerini doğru destekleyen bir tarayıcıdan başka yol olmayabilir. Ayrıntılar için bölümüne bakınız.

background-position background-positionnitelikler background-position background-position [ [yüzdelik | uzunluk ]{1,2} | [ [ top | center | bottom ] || [ left | center | right ] ] ] | inherit 0% 0% blok seviyesinden ve yerleştirilen elemanlar hayır çerçevenin kende boyutları ölçüt alınır görsel

Eğer bir artalan resmi belirtilmişse bu nitelik onun ilk konumunu belirler. Değerlerin anlamları şöyledir:

'0% 0%' şeklinde bir değer çifti olarak, resmin sol üst köşesi çerçevenin kenar iç boşluk alanının sol üst köşesine hizalanır. '100% 100%' şeklinde bir değer çifti olarak, resmin sol üst köşesi çerçevenin kenar iç boşluk alanının sağ alt köşesine hizalanır. Değer '14% 84%' çifti olarak verildiğinde, resmin sol üst köşesi, kenar iç boşluk alanının sol üst köşesinin, yatayda kenardan kenara %14 sağına ve düşeyde kenardan kenara %84 aşağısına yerleştirilir.

'2cm 2cm' çifti olarak belirtildiğinde resmin sol üst köşesi, kenar iç boşluk alanının sol üst köşesinden 2cm sağa ve 2cm aşağı yerleştirilir

'0% 0%' ile aynı.

'50% 0%' ile aynı.

'100% 0%' ile aynı.

'0% 50%' ile aynı.

'50% 50%' ile aynı.

'100% 50%' ile aynı.

'0% 100%' ile aynı.

'50% 100%' ile aynı.

'100% 100%' ile aynı.

Eğer sadece bir yüzdelik veya uzunluk değeri verilmişse bu değer sadece yatay konum için kullanılır; düşey konum %50 yapılır. Uzunluk ve yüzdelik değerlerin birlikte verilmesi de mümkündür ('50% 2cm' gibi). Negatif konumlara izin verilmez. Anahtar sözcükler uzunluk ve yüzdelik değerlerle birlikte belirtilemez. Olası değer birlikteliklerinin hepsi yukarıda verilmiştir.

body { background: url("banner.jpeg") right top } /* 100% 0% */ body { background: url("banner.jpeg") top center } /* 50% 0% */ body { background: url("banner.jpeg") center } /* 50% 50% */ body { background: url("banner.jpeg") bottom } /* 50% 100% */

Eğer artalan rengi görüntü alanı içinde sabitlenecekse (background-attachment niteliğine bakınız) resim, elemanın kenar iç boşluk alanına göre değil görüntü alanına göre konumlanır. Örnek:

body { background-image: url("logo.png"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; }

Bu örnekte görüntü alanının sağ üst köşesine resim tek başına yerleştirilmektedir.

 background nitelikler background background [ background-color || background-image || background-repeat || background-attachment || background-position ] | inherit kestirme nitelikler için tanımlanmaz hayır background-position için izin verilir görsel

background niteliği biçembendin aynı noktasında tek tek artalan niteliklerinin değerleri için kestirme bir niteliktir (yani, background-color, background-image, background-repeat, background-attachment ve background-position nitelikleri için).

background niteliği önce tek tek artalan niteliklerine kendi ilk değerlerini atadıktan sonra bildirimde değer belirtilenlere belirtilen değerlerini atar.

Aşağıdaki ilk kuralda sadece background-color niteliği için değer belirtilmiştir; diğer nitelikler ilk değerleriyle kalmıştır. İkinci kuralda tek tek bütün nitelikler için değer belirtilmiştir:

body { background: red } p { background: url("chess.png") gray 50% repeat fixed } Gamma düzeltmesi

Gamma ile ilgili bilgi edinmek için belirtimindeki Gamma Öğreticisini okuyunuz.

Gamma düzeltmesinini hesaplanmasında, çıktısını bir katot ışınlı tüp (CRT) üzerinde görüntüleyen kullanıcı arayüzleri bir ideal CRT varlığını kabul ederek renk oranlamasının sebep olduğu görünür gamma üzerindeki etkileri yoksayarlar. Yani, mevcut platformlarda ihtiyaç duydukları asgari gereksinimler şöyledir:

yok

yok

Gamma 1.45 uygulanır (ColorSync-savvy uygulamaları, doğru renk düzeltmesi yapmak için ColorSync'e sRGB ICC profilini basitçe aktarabilirler)

/etc/config/system.glGammaVal dosyasındaki gamma değeri kullanılır (öntanımlı değer 1.70; Irix 6.2 ve yukarısını çalıştıran sistemlerde sRGB ICC profili renk yönetim sitemine basitçe aktarılabilir)

Gamma 2.22 kullanılır.

"Gamma uygulanır" demek, K, Y, ve M'nin her biri işletim sistemine aktarılmadan önce K'=Kgamma, Y'=Ygamma, M'=Mgamma olacak şekilde dönüştürülmelidir, demektir.

Bu, her tarayıcı çağrısı başına bir kere 256 elemanlı bir başvuru tablosu aşağıdaki gibi inşa edilerek hızlıca yapılabilir:

for i := 0 to 255 do raw := i / 255.0; corr := pow (raw, gamma); table[i] := trunc (0.5 + corr * 255.0) end

Böylece benek başına çok daha az işlemle her renk özniteliği için olağanüstü matematiksel işlemlere gerek kalmadan işlemler yapılabilir.