Renk

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:

  1. B, 11'e eşittir. Bu sayı 16 ile çarpıldığında 176'ya eşittir
  2. F eşittir
  3. 176 + 15 = 191
  4. Alfa değeri 191—255'in% 75'idir
ziyaret edin.

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

ziyaret edin.

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.

Her bir açı değerinin temsil ettiği görsellere yardımcı olmak için 60 derecelik artışlarla derece değerleri etiketleri içeren bir renk çemberi

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.

HSL renk işlevi görsel olarak ayrıntılandırılmıştır. Ton için renk çemberi kullanılır. Doygunluk, gri rengin turkuaz rengine karıştığını gösterir. Açıklık siyahtan beyaza dönüyor.

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ı zamanda background-color öğesinin başlangıç değeridir
  • currentColor, color özelliğinin içeriğe dayalı hesaplanan dinamik değeridir. Metin renginiz red ise ve border-color değerini currentColor olarak ayarladıysanız bu renk de kırmızı olacaktır. currentColor öğesini tanımladığınız öğede tanımlanmış bir color değeri yoksa currentColor bunun yerine şelale tarafından hesaplanacak
ziyaret edin.

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?

rbga(400 0 1)
rbga, rgba'nın bir yazım hatasıdır ve 400, zaten kabul edeceğinden daha büyüktür, bu nedenle geçersizdir.
#0f08
🎉
#OOFZ2
Bu, onaltılık bir değer değil, yalnızca 5 rakamdan oluşuyor ve Z içerdiğinden geçersiz.
rgb(255, 0, 0)
🎉
hsl(180deg 50% 50%)
🎉
hotpink
🎉

Geçersiz Hsl rengini bulun.

hsl(5, 0%, 90%)
Bu geçerli bir hsl değeridir.
hsl(.5turn 40% 60%)
Bu geçerli bir hsl değeridir.
hsl(0, 0, 0)
🎉 Buldunuz. 2. ve 3. değerler yüzde olmalıdır.
hsl(2rad 50% 50%)
Bu geçerli bir hsl değeridir.
hsl(0 0% 0% / 20%)
Bu geçerli bir hsl değeridir.

Kaynaklar