CSS ÖLÇEKLENDİRME ve RENK TANIMLAMASI

MUTLAK ÖLÇEKLENDİRME

Mutlak ölçeklendirme birimlerinin tam ve ölçülebilir değerdir. Yani sayfanın yada monitörün boyutlarına göre değişir. Mutlak ölçü birmleri
aşağıdaki gibi tanımlanmıştır.
in : inç (2.54 cm) 2,54 cm uzunluğundaki uzunluk ölçüsü birimidir.
cm : Santimetre. 1 santimetre ; 0.01 milimetreye (1 metre 100 santimetreye eşittir.)
mm : Milimetre birimi için 1mm: 0,001 metreye eşittir.
pt : Punto genel baskı yazılarının ölçü birimidir. 1puto metrik sistemede 0,376 mm eşittir. 2pt
pc : Pika (12 punto) 12 putoluk harf ölçüsüne pica denilmektedir.

GÖRECELİ ÖLÇEKLENDİRME

Mutlak ölçeklendirmenin tersi bir durumdur. Yani bulunduğu ortama göre değişebilen değelerdir. Örneğin 900×700 piksel çözünürlüğe göre
yapılmış bir ölçeklendirme başka bir ortamda 1200×700 piksel çözünürlüğü olan bir monitörde görüntülediğimizde bu görüntü yeniden
ölçeklendirilecektir.
% : Yüde birimi her zaman başka bir ölçü birimine göre kendisini orantılı olarak değiştiren bir birimdir. 100%
em : em birimi hem yatay hem dikey uzunluklar için kullanılabilir. 1.4em
ex : ex birmi yazı tipini x yüksekliğidir.
px : Tüm sayısal görüntülerin en küçük parçası olan noktacılara piksel denir. Piksel birimi monitöre ekranının çözünürlüğüne bağlı bir birimdir.
vw : CSS3 ile yeni ölçeklendirme birimi. Ekranın yatayda 100/1 şeklinde alır.

vh : CSS3 ile gelen yeni ölçeklendirme. Ekranın dikeyde 100/1 şeklinde alır.

CSS RENK TANIMLAMASI

HTML ve CSS ile birlikte renk kullanımı dört grupta tanımlanmıştır. Bu renk grupları sırayla aşağıdaki gibidir.

1. RGB Renk aralığı
2. RGBa Renk aralığı
3. HLS Renk aralığı
4. HLSa Renk aralığı

RGB Renk aralığı

RGB renk uzayı, İngilizcede ‘Red’ Green’ Blııe’ (yani ‘Kırmızı’ ‘Yeşil’ ‘Mavi’) kelimelerinin baş harflerinden ismini alan bir renk uzayıdır. En sık kullanılan renk uzaylarındandır. Işığı temel alarak, doğadaki tüm renklerin kodları bu üç temel renge referansla belirtilir. Her renk %100 oranında karıştırıldığında beyaz, ve %0 oranında karıştırıldığındaysa siyah elde edilir.
Bütün renk gruplan CSS ile tanımlanarak HTML de kullanılması tavsiye edilir. Bu renkler aşağıdaki gibi birkaç şekilde oluşturulabilir ve CSS renk değeri olarak uygulanabilir.

R(Red) G(Green) B(Blue) renk aralığı, günümüzde, web tarayıcılarda desteklenen renk aralığıdır. Renk aralığında, kırmızı, yeşil ve mavi olmak üzere üç temel renk vardır ve tüm renkler bu üç rengin kombinasyonları olarak ifade edilirler.

Her üç renk bileşeni 0. .f (0. .F) arası onaltılık sayılar arasında hareket ederler. Örneğin kırmızı için hex değeri #ff0000 olarak ifade edilir. Büyük küçük harfler önemsenmez. Renk derinliğinde beyaz | ve siyah 000000 değerler skalanın alt ve üst limitlerini oluşturur-lar.Genel olarak RGB hex kodları, uzun kodlar şeklinde kullanılır (ömek color: #ddeeff). Kısa kod kullanımı (örnek {color: #def } ).

Renk değerleri yüzde değerleri ile tanımlanabilirler. Yüzde değerler, her bileşeninin maksimumu (ff veya f) %100, minimumu %0 olarak kabul edilerek oluşturulurlar. Ömek olarak yüzde bir renk değeri CSS3 de, span { color :rgb (33%, 46%, 23%) } olarak ifade edilebilir. 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. Ömek olarak, em { color:rgb (16, 55, 66) } şeklinde bir CSS3 kuralı belirtilebilir.

HSL

HSL (Hue/Renktonu, Saturation/Doyma, Lightness/Açıklık) renk uzayı, renkleri sırasıyla renk özü, doygunluk ve açıklık olarak tanımlar. CSS3 ile gelen renk tanımlamasıdır.

HSL Renk kontrol ve düzeltme modelidir. Hue renk özünü, Saturate doyma noktası yani matlık ve parlaklığım, Lightness ise açıklık ve koyuluğunu denetler. Bir resi üzerinde detay kaybetmeden renk değişiklikleri yapma olanağı verir.
-Renk özü, rengin baskın dalga uzunluğunu belirler, örneğin san, mavi, yeşil vb 0° – 360° açısal bir değerdir.
-Doygunluk, rengin “canlılığını” belirler. Yüksek doygunluk canlı renklere neden olurken, düşük olasılık rengin gri tonlarına yaklaşmasına neden olur. 0%-100°/ arasında değişir.
-Açıldık ise rengin aydınlığını yani içindeki beyaz oranını belirler. 0%-100% ara» sından değişir.
HSL katı renk silindiri üzerinde ok yönlerine göre değer verdiğimizde renk tanımlamasını kolyca yapabiliriz. Rengi temsil eden ok işareti silindir etrafındaki renkleri tanımlar ve 0° – 360° arasında değer alır. Rengin doyum oranını temsil eden ok işaretini takip ettiğimizde en düşük yüzde(0%) değeri koyu tonu, en yüksek yüzde değeri(100%) açık rengi temsil eder. Rengin açıklık yani aydınlık oranını temsil eden ok işaretini takip ettiğimizde en düşük yüzde(0%) değeri koyu tonu, en yüksek yüzde değeri(l00%) açık rengi temsil eder.
Buna göre beyaz renk için hsl(360,l00%,l00%); olarak yazılabilir. Siyah renk için hsl(0,0%,0%); olarak yazabiliriz.
hsl(0j 100%j 50%); tam kırmızı renk, hsl(0,50%, 50%); yüzde elli donuk kırmızı renk.
İkinci parametre rengin doygunluğunu tanımlar. Yüzde yüz(l00%) tam doyum demektir Yüzde oram azaldıkça renkte donuk miktarı artacaktır.
Affa Kanalı
Alfa kanalı (Alpha) şeffaflık, saydamlık ölçüsüdür. CSS3 ile birlikte HSL ve renk tanımlamasında en sondaki değerdir. Saydamlık değeri 0 ila 1 arasında tanınıl&nir
HSL ve RGB renk özelliklerinin sonuna a harfi eklenerek alfa kanalı kullanılır Örneğin hsla() ve rgba() gibi kodlanması gerekir.

(Hue/Renktonu, Saturation/Doyma, Lightness/Açıklık)
hsl(360,l00%,l00%);
(Hue/Renktonu, Saturation/Doyma, Lightness/Açıklık, alfa)
hsl(360,l00%,l00%,0.5);
rgb(red, green, blue)
rgb(50%,50%,50)
rgba(red, green, blue, alfa);
rgba(255, 0, 0, 0.5);