CSS Podcast'i - 006: Birinci Renk Bölümü
Renk, her web sitesinin önemli bir parçasıdır ve CSS'de renk türleri, işlevler ve işlemler için birçok seçenek vardır.
Hangi renk türünü kullanacağınıza nasıl karar verirsiniz? Renklerinizi nasıl yarı saydam yaparsınız? Bu derste projeniz ve ekibiniz için doğru kararlar almanıza yardımcı olacak seçenekleri öğreneceksiniz.
CSS, dizeler ve sayılar gibi çeşitli veri türlerine sahiptir. Renk bu türlerden biridir ve kendi tanımları için sayılar gibi diğer türleri kullanır.
Sayısal renkler
CSS'de renklerle ilk karşılaşmanız büyük olasılıkla sayısal renklerdir. Sayısal renk değerlerini birkaç farklı biçimde kullanabiliriz.
Onaltılık renkler
h1 {
color: #b71540;
}
Onaltılı gösterim (genellikle onaltılık olarak kısaltılır), RGB için kullanılan bir kestirim söz dizimidir. Kırmızı yeşile ve maviye, üç ana renk olan kırmızı yeşil ve maviye sayısal bir değer atanır.
Onaltılık aralıklar 0-9 ve A-F'dir. Altı haneli bir dizide kullanıldıklarında bunlar, sırasıyla kırmızı, yeşil ve mavi renk kanallarına karşılık gelen 0-255 arasındaki RGB sayısal aralıklarına çevrilir.
Herhangi bir sayısal renkte alfa değeri de tanımlayabilirsiniz.
Alfa değeri, şeffaflığın yüzdesidir.
Onaltılık kodda, altı haneli diziye bir iki basamak daha ekleyerek sekiz haneli bir dizi oluşturursunuz.
Örneğin, onaltılık kodda siyahı ayarlamak için #000000
yazın.
%50 şeffaflık eklemek için bunu #00000080
olarak değiştirin.
Onaltılık ölçek 0-9 ve A-F olduğundan, şeffaflık değerleri muhtemelen tam olarak beklediğiniz gibi değildir.
Siyah onaltılık koda eklenen bazı ortak değerleri (#000000
) burada bulabilirsiniz:
- Tamamen şeffaf olan% 0 alfa, 00'dır:
#00000000
- %50 alfa, 80:
#00000080
- %75 alfa BF:
#000000BF
İki basamak onaltılık bir sayıyı ondalık basamağa dönüştürmek için ilk basamağı 16 ile çarpın (onaltılık taban 16 tabanı olduğu için), ardından ikinci basamağı ekleyin. %75 alfa için örnek olarak BF kullanılır:
- B 11'e eşittir ve bunu 16 ile çarpıldığında 176'ya eşit olur
- F, 15'e eşittir
- 176 + 15 = 191
- Alfa değeri 255'in %191 ila %75'idir.
RGB (Kırmızı, Yeşil, Mavi)
h1 {
color: rgb(183, 21, 64);
}
RGB renkleri, rgb()
renk işleviyle tanımlanır ve parametre olarak sayılar veya yüzdeler kullanılır.
Sayıların 0-255 aralığında ve yüzdelerin % 0 ile%100 arasında olması gerekir.
RGB, 0-255 ölçeğinde çalışır. Dolayısıyla 255, %100'e ve 0 ila 0'a eşittir.
RGB'de siyahı ayarlamak için bunu sıfır kırmızı, sıfır yeşil ve sıfır mavi olmak üzere rgb(0 0 0)
olarak tanımlayın.
Siyah renk de rgb(0%, 0%, 0%)
olarak tanımlanabilir.
Beyaz renk, bunun tam tersidir: rgb(255, 255, 255)
veya rgb(100%, 100%, 100%)
.
rgb()
işlevinde alfa, iki yöntemden biriyle ayarlanır.
Kırmızı, yeşil ve mavi parametrelerden sonra bir /
ekleyin veya rgba()
işlevini kullanın.
Alfa, 0 ile 1 arasında bir yüzde veya ondalık sayıyla tanımlanabilir.
Örneğin, modern tarayıcılarda% 50 alfa siyahı ayarlamak için şunu yazın: rgb(0 0 0 / 50%)
veya rgb(0 0 0 / 0.5)
.
Daha kapsamlı destek için rgba()
işlevini kullanarak şunu yazın: rgba(0, 0, 0, 50%)
veya rgba(0, 0, 0, 0.5)
.
HSL (Ton, Doygunluk, Açıklık)
h1 {
color: hsl(344, 79%, 40%);
}
HSL; ton, doygunluk ve açıklık anlamına gelir. Ton, renk çemberindeki 0 ile 360 derece arasındaki değeri kırmızıyla (0 ve 360) başlar. Ton, 180 veya% 50 olarak mavi aralıkta yer alır. Gördüğümüz rengin kaynağıdır.
Doygunluk, seçilen tonun ne kadar canlı olduğunu gösterir.
Tamamen solmuş bir renk (doygunluk 0%
ile) gri tonlamalı görünür.
Son olarak, açıklık, eklenen ışığın beyazdan siyaha ölçeğini tanımlayan parametredir.
100%
açıklığı size her zaman beyaz renk verir.
hsl()
renk işlevini kullanarak hsl(0 0% 0%)
ve hatta hsl(0deg 0% 0%)
yazarak gerçek siyahı tanımlarsınız.
Bunun nedeni, hue parametresinin renk çemberindeki dereceyi tanımlamasıdır (sayı türünü kullanırsanız bu değer 0-360 olmalıdır).
(0deg
) veya (0turn)
olan açı türünü de kullanabilirsiniz.
Hem doygunluk hem de açıklık yüzdelerle tanımlanır.
Alfa, rgb()
ile aynı şekilde ton, doygunluk ve açıklık parametrelerinden sonra /
eklenerek veya hsla()
işlevi kullanılarak tanımlanır.hsl()
Alfa, 0 ile 1 arasında bir yüzde veya ondalık sayıyla tanımlanabilir.
Örneğin, %50 alfa siyahı ayarlamak için şunu kullanın: hsl(0 0% 0% / 50%)
veya hsl(0 0% 0% / 0.5)
.
hsla()
işlevini kullanarak şunu yazın: hsla(0, 0%, 0%, 50%)
veya hsla(0, 0%, 0%, 0.5)
.
Renkli Anahtar Kelimeler
CSS'de 148 adlandırılmış renk vardır. Bunlar mor, domates ve altınbaşak gibi sade İngilizce adlardır. Web Almanağı'na göre en popüler adlardan bazıları siyah, beyaz, kırmızı, mavi ve gridir. Favorilerimiz altınbaşak, aliceblue ve hotpink.
Standart renklerin yanı sıra, kullanılabilecek özel anahtar kelimeler de vardır:
transparent
tamamen şeffaf bir renktir. Bu, aynı zamandabackground-color
değerinin başlangıç değeridir.currentColor
,color
özelliğinin içeriğe dayalı olarak hesaplanan dinamik değeridir. Metin renginizred
ise ve ardındanborder-color
değerinicurrentColor
olarak ayarlarsanız bu renk de kırmızı olur.currentColor
tanımladığınız öğe tanımlanmışcolor
değerine sahip değilsecurrentColor
basamak yerine basamakla hesaplanır
CSS kurallarında renk kullanımı
Bir CSS mülkü <color>
veri türünü değer olarak kabul ederse yukarıdaki rengi ifade etme yöntemlerinden herhangi birini kabul eder.
Metni şekillendirmek için color
, text-shadow
ve text-decoration-color
özelliklerini kullanın. Bu özelliklerin tümü, değerin bir parçası olarak rengi değer veya renk olarak kabul eder.
Arka planlar için background
veya background-color
değeri olarak bir renk ayarlayabilirsiniz.
Renkler, linear-gradient
gibi gradyanlarda da kullanılabilir.
Renk geçişleri, CSS'de programlı olarak tanımlanabilen bir resim türüdür.
Gradyanlar, onaltılık, rgb veya hsl gibi herhangi bir renk biçimi kombinasyonunda iki veya daha fazla rengi kabul eder.
Son olarak border-color
ve outline-color
, kutularınızdaki kenarlıkların ve dış çizgilerin rengini ayarlayın.
box-shadow
özelliği, değerlerden biri olarak rengi de kabul eder.
Öğrendiklerinizi sınayın
Renk bilginizi test edin
Aşağıdakilerden hangileri geçerli renklerdir?
rbga(400 0 1)
#0f08
#OOFZ2
rgb(255, 0, 0)
hsl(180deg 50% 50%)
hotpink
Geçersiz hsl rengini tespit eder.
hsl(5, 0%, 90%)
hsl(.5turn 40% 60%)
hsl(0, 0, 0)
hsl(2rad 50% 50%)
hsl(0 0% 0% / 20%)