CSS Podcast'i - 006: Renk Bölüm Birinci
'nı inceleyin.
Renk, tüm web sitelerinin önemli bir parçasıdır. CSS'de renk türleri için pek çok seçenek bulunur. fonksiyonları ve tedavileridir.
Hangi renk türünü kullanacağınıza nasıl karar vereceksiniz? Renklerinizi nasıl yarı şeffaf yaparsınız? Bu derste projeniz ve ekibiniz için doğru kararları almanıza yardımcı olabilecek seçenekleri öğreneceksiniz.
CSS'de çeşitli farklı veri türleri vardır. kullanabilirsiniz. Renk bu türlerden biridir ve diğer türleri kullanır, örneğin, kendi tanımlarına uygun olan sayılardır.
Sayısal renkler
CSS'de renklerle ilk kez karşılaşmanız büyük olasılıkla sayısal renklerle gerçekleşir. Sayısal renk değerleriyle birkaç farklı biçimde çalışabiliriz.
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 kısaltmadır. Bu renk, kırmızı yeşil ve mavi renklere sayısal bir değer atar. Bunlar, üç ana renk olmasıdır.
Onaltılık aralıklar 0-9 ve A-F'dir. Altı haneli bir dizide kullanıldığında, 0-255 arasındaki RGB sayısal aralıklarına dönüştürülürler. renk kanallarına karşılık gelir.
Ayrıca, herhangi bir sayısal renkle bir alfa değeri de tanımlayabilirsiniz.
Alfa değeri, şeffaflık yüzdesidir.
Onaltılık kodda, altı basamaklı diziye bir iki basamak daha eklersiniz.
bir dizi hazırlıyoruz.
Örneğin, onaltılık kodda siyahı ayarlamak için #000000
yazın.
%50 şeffaflık eklemek için ayarı #00000080
olarak değiştirin.
Onaltılık ölçek 0-9 ve A-F olduğu için şeffaflık değerleri büyük olasılıkla beklediğiniz gibi değildir.
Siyah onaltılık koda (#000000
) eklenen bazı anahtar ve yaygın değerler şunlardır:
- Tamamen şeffaf olan% 0 alfa değeri 00'dır:
#00000000
- %50 alfa 80'dir:
#00000080
- %75 alfa BF'dir:
#000000BF
İki basamaklı onaltılık bir sayıyı ondalık sayıya dönüştürmek için, ilk basamağı alıp 16 ile çarpın (onaltılık sayı 16 tabanında olduğundan), sonra ikinci basamağı ekleyin. %75 alfa için örnek olarak BF'yi kullanma:
- B, 11'e eşittir. Bu sayı 16 ile çarpıldığında 176'ya eşittir
- F eşittir
- 176 + 15 = 191
- Alfa değeri 191—255'in% 75'idir
RGB (Kırmızı, Yeşil, Mavi)
h1 {
color: rgb(183, 21, 64);
}
RGB renkleri
rgb()
renk işlevi,
parametre olarak sayılar ya da yüzdeler kullanın.
Sayıların 0-255 aralığında, yüzdelerin ise % 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 rgb(0 0 0)
olarak tanımlayın,
sıfır kırmızı, sıfır yeşil ve sıfır mavi.
Siyah, rgb(0%, 0%, 0%)
olarak da tanımlanabilir.
Beyaz, bunun tam tersi: rgb(255, 255, 255)
veya rgb(100%, 100%, 100%)
.
Alfa, rgb()
uygulamasında iki yöntemden biriyle ayarlanır.
Kırmızı, yeşil ve mavi parametrelerin sonrasına bir /
ekleyin.
veya rgba()
işlevini kullanın.
Alfa, 0 ile 1 arasında bir yüzde değeri veya ondalık bir sayıyla tanımlanabilir.
Örneğin, modern tarayıcılarda% 50 alfa siyahı ayarlamak için şu ifadeyi yazın: rgb(0 0 0 / 50%)
veya rgb(0 0 0 / 0.5)
.
Daha geniş kapsamlı destek için rgba()
işlevini kullanarak
yaz: 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 değeri tanımlar. 0 ile 360 derece arasında kırmızıyla başlar (hem 0 hem de 360). 180 veya% 50'lik bir ton mavi aralıkta yer alır. Gördüğümüz rengin kaynağıdır.
Doygunluk, seçilen tonun ne kadar canlı olduğunu belirtir.
Tamamen doygunluğu kaldırılmış bir renk (0%
doygunluğuyla) gri tonlamalı görünür.
Son olarak, eklenen ışığın beyazdan siyaha olan ölçeğini açıklayan parametre hafifliktir.
100%
parlaklığı sizi her zaman beyaz verir.
hsl()
renk işlevini kullanarak
hsl(0 0% 0%)
veya hsl(0deg 0% 0%)
yazarak gerçek siyahi tanımlarsınız.
Bunun nedeni, ton parametresinin renk çemberindeki dereceyi tanımlamasıdır.
Bu, sayı türünü kullanırsanız 0-360 olur.
Açı türünü de (0deg
) veya (0turn)
kullanabilirsiniz.
Doygunluk ve hafiflik yüzdelerle tanımlanır.
Alfa, hsl()
dilinde tanımlanmıştır.
rgb()
ile aynı şekilde ton, doygunluk ve açıklık parametrelerinden sonra bir /
ekleyerek veya
hsla()
işlevini kullanın.
Alfa, 0 ile 1 arasında bir yüzde değeri veya ondalık bir sayıyla tanımlanabilir.
Örneğin, %50 alfa siyahı ayarlamak için şu değeri 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 goldenrod gibi yalın İngilizce adlardır. En popüler adlardan bazıları, Web Almanağı'na göre, siyah, beyaz, kırmızı, mavi ve gri. En sevdiklerimiz altınbaşak, aliceblue ve hotpink.
Standart renklerin yanı sıra, özel anahtar kelimeler de mevcuttur:
transparent
tamamen şeffaf bir renktir. Aynı zamandabackground-color
öğesinin başlangıç değeridircurrentColor
,color
özelliğinin içeriğe dayalı hesaplanan dinamik değeridir. Metin renginizred
ise veborder-color
değerinicurrentColor
olarak ayarladıysanız bu renk de kırmızı olacaktır.currentColor
öğesini tanımladığınız öğede tanımlanmış bircolor
değeri yoksacurrentColor
bunun yerine şelale tarafından hesaplanacak
CSS kurallarında renk nerede kullanılır?
Bir CSS mülkü
<color>
veri türünü belirtmelisiniz.
yukarıdaki renk ifade etme yöntemlerinden herhangi birini kabul eder.
Metin stilini biçimlendirmek için color
, text-shadow
ve text-decoration-color
özelliklerini kullanın
Bunlar, rengin bir parçası olarak değer veya renk olarak kabul edilir.
Arka planlar için background
veya background-color
değeri olarak bir renk ayarlayabilirsiniz.
Renkler, linear-gradient
gibi renk geçişlerinde de kullanılabilir.
Renk geçişleri, CSS'de programlı olarak tanımlanabilen bir resim türüdür.
Renk gradyanları; hex, 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 ve dış çizgilerin rengini ayarlar.
box-shadow
özelliği, renk değerini de değerlerden biri olarak kabul eder.
Öğrendiklerinizi sınayın
Renk bilginizi test edin
Aşağıdakilerden hangileri geçerli renklerdir?
hotpink
#OOFZ2
rbga(400 0 1)
#0f08
hsl(180deg 50% 50%)
rgb(255, 0, 0)
Geçersiz Hsl rengini bulun.
hsl(.5turn 40% 60%)
hsl(0, 0, 0)
hsl(5, 0%, 90%)
hsl(2rad 50% 50%)
hsl(0 0% 0% / 20%)