HTML Image Map b2s1 Ek4 Ek 6 Ek5 b8s1 b1s1  Ek7 Nitelikler b5s1.htm Ek2 b3s1 Ek3 b7s1 Ek7 Elementler Ek1 b4s1 b6s1  Ek7 Catalogue index previous next

 

Katlı Stil Sayfaları (Sürüm3)

Renk Değerleri ve Birimleri

Sayfa 1 / 1


 

CSS3 de Renk Belirtme Yöntemleri

 

CSS3 de renkler 4 tür renk skalasında belirtilebilir. Bunlar,

olarak belirtilir. Bugün için bunlardan sadece RGB skalası desteklenebilmektedir.

 

RGB Renk Skalası

 

R(Red)G(Green)B(Blue) renk skalası, günümüzde, belge çözümleyicilerde desteklenen tek renk skalasıdır. RGB skalası, sRGB renk uzayındaki (space RGB) renk değerleri, ile ifade edilir.

R(Red)G(Green)B(Blue) renk skalasında, kırmızı, yeşil ve mavi olmak üzere üç temel renk vardır ve tüm renkler bu üç rengin kombinasyonları olarak ifade edilirler.

R(Red)G(Green)B(Blue) renk skalasında, her üç renk bileşeni 0..f (0..F) arası onaltılı sayılar arasında hareket ederler. Her üç renk bileşeni R(Red)G(Green)B(Blue) değerleri olarak sıra ile yanyana dizilirler. Örnek olarak kırmızı için RGB hex değeri #f00 (veya #F00) olarak ifade edilir. Mavi için bu değer, #00f olacaktır. Yeşil için ise, #0,f,0 değeri kullanılacaktır. Siyah renk, bu skalada bileşik bir renk olup #fff değerinde yani her üç bileşenin de maksimium düzeyde olduğu bir değerdir. Bu değer aynı zamanda R(Red)G(Green)B(Blue) skalasının da maksimum değeridir. Beyaz renk ise R(Red)G(Green)B(Blue) skalasının da minimum değeri olan #0,0,0 değeri ile belirtilir.

Renk derinliğinin daha iyi belirtilebilmesi için, R(Red)G(Green)B(Blue) skalasının her bileşeni, çiftli onaltılı sayı grupları ile de ifade edilebilir. Bu ifade şekli ile siyah $ffffff, beyaz #000000 olur ve bu değerler skalanın alt ve üst limitlerini oluştururlar. Kısa kod ifade şekli ( kısayol, kısa kod, üçlü kod), uzun ifade şekline her bileşenin kod duplikatını (kodunun aynısını) yazarak çevrilir. Bu durumda R(Red)G(Green)B(Blue) skalası, R(Red)R(Red)G(Green)G(Green)B(Blue)B(Blue) skalasına dönüşmüş olacaktır. Örnek olarak #0ab kısa RGB kodunun uzun şekli (RRGGBB şekli), #00aabb olacaktır. Aynı şekilde #008811 uzun yani R(Red)R(Red)G(Green)G(Green)B(Blue)B(Blue) kodunun kısayol yani R(Red)G(Green)B(Blue) ifadesi, her bileşenden bir kod sayısı alınarak #081 olacaktır. Genel olarak RGB hex kodları, uzun kodlar şeklinde kullanılır (örnek color:#88aabb) . Kısa kod kullanımı (örnek color:#8ab), belge çözümleyicilerce iyi desteklenmediğinden yaygın ve kullanışlı değildir.

R(Red)G(Green)B(Blue) skalasında renk değerleri yüzde değerleri ile de ifade edilebilirler. Yüzde değerler, her bileşeninin maksimumu (ff veya f) %100, minimumu %0 olarak kabul edilerek oluşturulurlar. Örnek olarak yüzde bir renk değeri CSS3 de , span { color:rgb(33%,46%,23%) } olarak ifade edilebilir.

R(Red)G(Green)B(Blue) skalası renk değerleri, her bileşen için ondalıklı değerler ile de ifade edilebilir. Ondalıklı değerler, her bileşen için, 0-255 arasında olmalıdır. Bu değerler, CSS3 tarafından dilin yapısında bulunan bir ön tanımlı fonksiyon yardımı ile hex kodlara çevrilerek uygulanır. Örnek olarak, em { color:rgb(16,55,66) } şeklinde bir CSS3 kuralı belirtilebilir.

CSS3 geniş bir renk spektrumunu, saklı sözcükler halinde düzenleyerek, yazarların sayısal renk kodları ile uğraşmayıp, hedefledikleri renkleri sözel olarak belirtmeleri olanağını da sağlamıştır. Saklı renk sözcükleri ek 3 sayfa 9 da verilmiştir. Tutarlılık ve genel destek açısından, saklı sözcüklerin kullanımı sağlık verilmektedir. Renk kodları ve renk saklı sözcükleri yazılışa duyarsızdır, örnek olarak color:#aabbcc ile color:#AABBCC, color:fuchsia ile color:FUCHSIA aynıdır. İngilizce alfabede i, İ ve I karıştırılabileceğinden, saklı sözcükleri küçük harflerle yazmak daha guvenli olacaktır.

Aşağıdaki ilk tabloda, bazı saklı renk sözcükleri ve sayısal renk kodları kullanımın verdiği sonuçlar belirtilmiştir. İkinci tabloda renk paletinin kullanılması ile renk hedeflerinin oluşturulması örnekleri görülmektedir. Bu son tablo tamamamen kendi yarattığımız renklerin vereceği sonuçları incelemek için yararlı olacaktır.

 

Renk Sonuçları

Hex

(Kısayol)

Hex

(Komple

Kod)

Ondalıklı

rgb

Renk Adı

ile

Hex

(Kısayol Kodu)

Hex

(Komple

Kod)

Ondalıklı

rgb

black

#000

#000000

rbg(0,0,0)

red

#f00

#ff0000

255,0,0

green

#080

#008000

0,125,0

blue

#00f

#0000ff

0,0,255

white

#fff

#ffffff

255,255,255




Renklerin Oluşturulması

Sayısal

(Hex

Kısayol)

Oluşan Renk

Hex

(Komple

Kod)

Oluşan Renk

#555

#555555

#05F

#0055FF

#f0f

#ff00ff

00d

#0000dd

0a0

#0aad0c

#d00

#da0c0f

 

Sonuçlar, saklı sözcükler, kısayol kodları ve komple kodlar arasında uygulamada fazla bir fark olmadığını belirtmektedir. Sadece mavi renk için kısa kod uygulamasının başarılı olmadığı dikkat çekicidir. Güvenli uygulamalar için, uzun kodların kullanımı yeğ tutulmalıdır.

Renk tanımlarına ait bazı örnekler:

 

RGBa Renk Skalası

 

Bu renk skalası, klasik RGB skalası ile aynıdır fakat, opaklık ile ilgili bir ek alfa renk düzeltim terimi eklenmiştir. Buna rağmen, Bu sistemin, RGB den farklı bir sistem olarak kabul edilmesi gerektiği bildrilmiştir. Bu skalada sadece ondalıklı ve yüzde renk kodları bulunmakta ve hex kodlar kullanılmamaktadır. Örnek

RGBa renk skalası bugün için hiç bir belge çözümleyici tarafından desteklenmemektedir. RGBa(0,0,0,0) değeri, background-color :transparent ifadesine denk olmaktadır.

 

HSL (Hue, Saturation, Lightness) Renk Skalası

 

CSS3 , renklerin daha kolay tahmin edilmesine olanak sağlayabilen yeni bir renk skalası tanımlamıştır. HSL renk sklası adı verilen bu yeni skalada ondalıklı, hex, yüzde renk kodları belirtilebilmektedir.

HSL sisteminde ilk grup hue (renk) ifadesidir. Bu renk skalası, renklerin 360 derece olan bir çember üzerinde sistematik bir şekilde (renk spektrumu) dağıldığını varsaymaktadır. Burada her açı bir renge karşı gelmekte ve açılar (0..360) arası sayılarla belirtilmektedir. Son iki grup, saturation ve lightness değerleri olup sadece yüzde ile ifade edilmektedirler. Örnek :

Günümüzde, henüz hiçbir belge çözümleyici, HSL sistemini desteklememektedir.

Renkleri HSL olarak planlayıp RGB skalasına çevirmek için, çok yetekli ve ücretsiz bir program olan, Color Selector kullanılabilir.

 

HSLa Renk Skalası

 

Bu renk skalası, HSL sistemine bir opaklık düzeltim terimi eklenmesi ile oluşturulmuştur. Bu skala, RGBa skalasının HSL versiyonudur.

Günümüzde, henüz hiçbir belge çözümleyici, HSLa sistemini desteklememektedir.

 

SVG (ScalableVector Graphics) Renk Saklı İsimleri

 

CSS3 spesifikasyonu, SVG 1.0 renk saklı sözcüklerine gri renk varyantlarının eklenmesi ile elde edilmiş X11 renklerini, hem saklı sözcük hem de renk kodu olarak desteklemektedir. Bu renklerin listesi ek 3 sayfa 9 da görülebilir. Bu renkler tüm belirli belge çözümleyiciler tarafından iyi bir şekilde değerlendirilebilmektedirler ve güvenle kullanılabilirler. Renklerin daha güvenle desteklenmeleri açısından koşullar elverdikçe, saklı sözcüklerin kullanımları sağlık verilmektedir.

 

Renk Özellikleri

 

Ön-alan Renk Özelliği 'color' (Foreground Color) (IE 6.02 SP2 desteği var)

 

Ön-alan renk özelliği, yazıların ve renk değeri alabilen diğer ögelerin görüntülenme rengidir. Bu özellik, kısaca 'color' özelliği olarak adlandırılır ve kullanılır.

 

İsim:'color'

Değer: <renk> | inherit | attr(<tanımlayıcı>,renk)

Başlangıç Değeri: belge çözümleyicisine bağlı

Uygulanabilecek Elementler:tüm elementler

Kalıtım:evet

Yüzde: belirtilmemiştir.

Media:görsel (visual)

Hesaplanan Değer:

Renk özelliği, aynı zamanda, renk özelliğini kullanabilecek öğeler için, potansiyel bir dolaylı 'currentColor' değeri sağlar.

Değerier,

renk

Renk değerlerinin belirtildiği skalalar ve bu skalalarda belirtilebilen sayısal değerler, yukarıda incelenmiştir.

attr(<tanımlayıcı>,renk)

Burada, seletörün hedefi olan elementin verilen niteliğinin rengi, renk değeri olarak kabul edilir. Eğer verilen niteliğin değeri, renk değeri olarak değerlendirilemezse, renk değeri olarak 'inherit' değeri kabul edilir. İkinci parametre, 'color' saklı sözcüğüdür. Örnek :

 

 

IE 6 SP2 'color'özelliğini desteklemektedir.

 

Saydamlık (alfa Değeri) (Opaklık) 'opacity' özelliği           (IE 6.02 SP2 desteği yok)

 

Alfa özelliği, RGB renk skalasında belirtilemeyen alfa değerlerinin belirtilebilmesine olanak sağlar. Opaklık değerleri, tam saydamlık için 0, tam opaklık (geçirgenliğin tersi) için 1 değerini alır. Aradaki değerler, saydamlık derecesini belirtir.

Alfa etkisi (opacity) özelliği aşağıda verildiği gibi tanımlanmıştır:

 

İsim:'opacity'

Değer: <alfa değeri> | inherit

Başlangıç Değeri: 1

Uygulanabilecek Elementler:tüm elementler

Kalıtım:hayır

Yüzde: belirtilmemiştir.

Media:görsel (visual)

Hesaplanan Değer:belirtilenin aynı (0..1 aralığının dışındaki alfa değerleri bu aralığın içine çekildikten sonra)

<alfa değeri>

Sentetik olarak bir sayıdır. 0..1 aralığının dışındaki alfa değerleri bu aralığın içine çekilecek şekilde kesilir.

Opaklık özelliği henüz IE 6.02 SP2 tarafından desteklenmemektedir. Bu özelliğin uygulandığı bir örnek, opacity.htm dosyasında incelenebilir.

Thursday, October 6, 2005 19:50

 

validate in W3C !