Bütünleşik Biçembentler, 2. Aşama
ÖncekiYukarıSonraki

14 Renkler ve artalanlar

İçindekiler

    14.1 Önalan rengi: color niteliği
    14.2 Artalan
          14.2.1 Artalan nitelikleri: background-color, background-image, background-repeat, background-attachment, background-position ve background
    14.3 Gamma düzeltmesi

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 Renkler bölümüne bakınız.

14.1 Önalan rengi: color niteliği

colorNİTELİK
Değer:renk | inherit
İlk değer:kullanıcı arayüzüne bağlı
Uygulama yeri:tüm elemanlar
Kalıtsallık:evet
Yüzdelik değerler:Elverişsiz
Ortam: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   */

14.2 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.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
    <title>Tuval artalanının belirtilmesi</title>
    <style type="text/css">
       BODY { background: url("http://style.com/mermer.png") }
    </style>
  </head>
  <body>
    <p>Artalanım mermer.
  </body>
</html>

14.2.1 Artalan nitelikleri: background-color, background-image, background-repeat, background-attachment, background-position ve background

background-colorNİTELİK
Değer:renk | transparent | inherit
İlk değer:transparent
Uygulama yeri:tüm elemanlar
Kalıtsallık:hayır
Yüzdelik değerler:Elverişsiz
Ortam:görsel

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-imageNİTELİK
Değer:tanım-yeri | none | inherit
İlk değer:none
Uygulama yeri:tüm elemanlar
Kalıtsallık:hayır
Yüzdelik değerler:Elverişsiz
Ortam: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.)

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-repeatNİTELİK
Değer:repeat | repeat-x | repeat-y | no-repeat | inherit
İlk değer:repeat
Uygulama yeri:tüm elemanlar
Kalıtsallık:hayır
Yüzdelik değerler:Elverişsiz
Ortam: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:

repeat [yinele]
Resim hem yatayda hem de düşeyde yinelenir.

repeat-x
Resim sadece yatay olarak yinelenir.

repeat-y
Resim sadece düşey olarak yinelenir.

no-repeat [yineleme]
Resim yinelenmez; resmin sadece bir kopyası oluşturulur.

Örnek: 
body {
  background: white url("pendant.gif");
  background-repeat: repeat-y;
  background-position: center;
}

Kenar iç boşlukları ve içerik boyunca düşey olarak yinelenen ortalanmış bir artalan resmi
[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-attachmentNİTELİK
Değer:scroll | fixed | inherit
İlk değer:scroll
Uygulama yeri:tüm elemanlar
Kalıtsallık:hayır
Yüzdelik değerler:Elverişsiz
Ortam: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.

Not:
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.

Örnek:
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 Uyumluluk bölümüne bakınız.

background-positionNİTELİK
Değer:[ [yüzdelik | uzunluk ]{1,2} | [ [ top | center | bottom ] || [ left | center | right ] ] ] | inherit
İlk değer:0% 0%
Uygulama yeri:blok seviyesinden ve yerleştirilen elemanlar
Kalıtsallık:hayır
Yüzdelik değerler:çerçevenin kende boyutları ölçüt alınır
Ortam:görsel

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

yüzdelik yüzdelik
'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.

uzunluk uzunluk
'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

top left ve left top
'0% 0%' ile aynı.

top, top center ve center top
'50% 0%' ile aynı.

right top ve top right
'100% 0%' ile aynı.

left, left center ve center left
'0% 50%' ile aynı.

center ve center center
'50% 50%' ile aynı.

right, right center ve center right
'100% 50%' ile aynı.

bottom left ve left bottom
'0% 100%' ile aynı.

bottom, bottom center ve center bottom
'50% 100%' ile aynı.

bottom right ve right bottom
'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:

Ö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.

backgroundNİTELİK
Değer:[ background-color || background-image || background-repeat || background-attachment || background-position ] | inherit
İlk değer:kestirme nitelikler için tanımlanmaz
Uygulama yeri:tüm elemanlar
Kalıtsallık:hayır
Yüzdelik değerler:background-position için izin verilir
Ortam: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.

Örnek:
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 }

14.3 Gamma düzeltmesi

Gamma ile ilgili bilgi edinmek için [PNG10] 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:

MS-Windows
yok

X11 kullanan Unix
yok

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

X kullanan SGI
/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)

NeXTStep kullanan NeXT
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.

ÖncekiYukarıSonraki
Sayfalı OrtamBir Linux Kitaplığı SayfasıYazıtipleri