Topluluk Bloglarımız

1. 

   Yazarlar

   belgeport, Genel kategorisinde yazdı.

   • 2
     madde
   • 0
     yorum
   • 35
     görünüm

   Son Maddeler

   • CSS Renk Kodları
   • Nikos Kazancakis

   

   Son Giriş
   

   CSS Renk Kodları

   Well-Known Color Values #

   CSS'DE renkleri tanımlamanın birçok farklı yolu vardır. CSS adlı renkler, bir öğeyi renklendirmenin en basit yollarından biridir:

   .my-element {
     background-color: red;
   }

    

   Bunlar çok sınırlı ve nadiren inşa ettiğimiz tasarımlara uyuyor! Renkli onaltılık (onaltılık) değerleri de kullanabiliriz. Bu kod öğemize kırmızı bir arka plan rengi verir:

   .my-element {
     background-color: #ff0000;
   }

   Renk uzmanı değilseniz, onaltılık değerleri okumak çok zordur. Onaltılık değeri okuyarak bir öğenin rengini tahmin etmeniz pek olası değildir. Bir web sitesi oluştururken bir tasarımcı tarafından bize onaltılık renk değeri verilebilir, ancak bizden bunu yapmamızı isteselerdi, %20 daha koyu diyelim, görsel bir kılavuz veya renk seçici olmadan onaltılık değeri ayarlayarak bunu yapmakta zorlanırdık.

   RGB #

   RGB (kırmızı, yeşil, mavi) gösterimi, renkleri yazmanın alternatif bir yoludur ve bize onaltılık değerlerle aynı renk aralığına çok daha okunabilir bir biçimde erişmemizi sağlar. Bunun için css'de bir rgb () işlevimiz var. Ağdaki renkler katkı maddesidir, yani kırmızı, yeşil ve mavi oranı ne kadar yüksek olursa, ortaya çıkan renk o kadar açık olur. Sadece kırmızı kanalı kullanırsak, sonuç kırmızıdır:

   .my-element {
     background-color: rgb(255, 0, 0);
   }

   Kırmızı, yeşil ve mavi kanalların en yüksek değere ayarlanması beyaza neden olur:

   .my-element {
     background-color: rgb(255, 255, 255);
   }

   rgba () işlevini kullanarak bir alfa kanalı da (saydamlık için) ekleyebiliriz:

   .my-element {
     background-color: rgba(255, 0, 0, 0.5); // transparency of 50%
   }
   
   .my-element {
     background-color: rgba(255, 0, 0, 1); // fully opaque
   }

   rgb () ve rgba (), kodumuzdaki renkleri bir dereceye kadar “karıştırmamıza” izin verir, ancak sonuçlar biraz tahmin edilemez olabilir.

    

   HSL #

   Daha yakın zamanlarda, hsl () ve hsla() renk işlevleriyle HSL (ton, doygunluk, açıklık) değerlerini kullanabildik. Bir geliştirici olarak, renk değerlerini ayarlama söz konusu olduğunda bunlar çok daha sezgiseldir. Örneğin, açıklık parametresini ayarlayarak aynı rengin daha koyu ve daha açık varyantlarını elde edebiliriz:

   .my-element {
     background-color: hsl(0deg, 100%, 20%); // dark red
   }
   
   .my-element {
     background-color: hsl(0deg, 100%, 50%); // medium red
   }
   
   .my-element {
     background-color: hsl(0deg, 100%, 80%); // light red
   }

   

   Hue parametresi, bir renk tekerleğindeki konumu temsil eder ve 0 ile 360 derece arasında herhangi bir değer olabilir. İşlev ayrıca dönüş birimlerini (örneğin 0,5 dönüş) ve birimsiz değerleri de kabul eder.

   Aşağıdakilerin hepsi geçerlidir:

   .my-element {
     background-color: hsl(180deg, 50%, 50%);
   }
   
   .my-element {
     background-color: hsl(0.5turn, 50%, 50%);
   }
   
   .my-element {
     background-color: hsl(180, 50%, 50%);
   }

   İpucu: Chrome ve Firefox geliştirme araçlarındaki denetçide SHİFT tuşunu basılı tutup renk örneğini tıklamak, renk değerini hex, RGB ve HSL arasında değiştirir!

   hsl() ve hsla (), kısa bir süre sonra göreceğimiz gibi, özel özelliklerle manipülasyona kendilerini iyi borç verir.

    

   currentColor #

   currentColor anahtar sözcüğü, bir süredir var olan bir öğeye renk ayarlamanın başka bir yolu olarak bahsetmeye değer. Bir öğenin geçerli metin rengini değişken olarak kullanmamıza etkili bir şekilde izin verir. Özel özelliklerle karşılaştırıldığında oldukça sınırlıdır, ancak genellikle üst öğelerinin metin rengiyle eşleşmelerini sağlamak için SVG simgelerinin dolgu rengini ayarlamak için kullanılır. Buradan okuyun.

   Modern Color Syntax #

   CSS Renk Modülü Seviye 4, tarayıcılarda yaygın olarak desteklenen renk işlevlerimiz için bize daha uygun bir sözdizimi sağlar. Artık virgülle ayrılacak değerlere ihtiyacımız yok ve rgb () ve hsl() işlevleri, eğik çizgi ile ayrılmış isteğe bağlı bir alfa parametresi alabilir:

   .my-element {
     /* optional alpha value gives us 50% opacity */
     background-color: hsl(0 100% 50% / 0.5);
   }
   
   .my-element {
     /* With no alpha value the background is fully opaque*/
     background-color: hsl(0 100% 50%);
   }

    

   Yeni CSS Renk İşlevleri #

   HWB #

   HWB renk tonu, beyazlık ve siyahlık anlamına gelir. HSL gibi, renk tonu da 0 ila 360 aralığında herhangi bir yerde olabilir. Diğer iki argüman, bu renk tonuna ne kadar beyaz veya siyahın karıştırıldığını %100'e kadar kontrol eder (bu, tamamen beyaz veya tamamen siyah bir renkle sonuçlanır). Eşit miktarda beyaz ve siyah karıştırılırsa, renk giderek grileşir. Bunu boyayı karıştırmaya benzer olarak düşünebiliriz. Tek renkli renk paletleri oluşturmak için özellikle yararlı olabilir.

   

   Bu demo ile deneyin (yalnızca Safari'de çalışır):
    

   LAB #

   LAB ve LCH, spesifikasyonda cihazdan bağımsız renkler olarak tanımlanmıştır. LAB, Photoshop gibi yazılımlarda erişilebilen bir renk alanıdır ve bir rengin ekranda bir tişörtün üzerine basılanla aynı görünmesini istiyorsanız önerilir. Üç eksen kullanır: açıklık, ardından a ekseni (yeşilden kırmızıya) ve b ekseni (maviden sarıya).

   Açıklık, hsl'ye çok benzeyen bir yüzde olarak ifade edilir, ancak lab() renk işleviyle kullanıldığında aslında %100'ü aşabilir. Ekstra parlak beyazlar %400'e varan bir yüzdeyi kullanabilir. A ve b eksenleri için değerler pozitiften negatife değişebilir. İki negatif değer, spektrumun yeşil/mavi ucuna doğru bir renkle sonuçlanırken, iki pozitif değer daha turuncu / kırmızı bir renk tonu verebilir.

   .my-element {
     background-color: lab(80% 100 50); // reddish pink
   }
   
   .my-element {
     background-color: lab(80% -80 -100); // blue/turquoise
   }

   

   LCH #

   LCH, hafiflik, renk ve renk tonu anlamına gelir. Laboratuarda olduğu gibi, hafiflik %100'ü aşan bir yüzde olabilir. Hsl'ye benzer şekilde, renk tonu 0 ile 360 arasında bir aralık olabilir. Kroma, renk miktarını temsil eder ve bunu hsl'deki doygunluğa benzer olarak düşünebiliriz. Ancak kroma 100'ü geçebilir-aslında teorik olarak sınırsızdır. Örnek kullanım:

   .my-element {
     background-color: lch(80% 100 50);
   }
   
   .my-element {
     background-color: lch(80% 240 50); // this color would be outside of the displayable range of today’s browsers
   }

   Bununla birlikte, günümüzde tarayıcıların ve monitörlerin kaç renk görüntüleyebileceği konusunda bir sınır vardır (kısaca bununla ilgili daha fazlası), bu nedenle 230'un üzerindeki değerlerin bir fark yaratması olası değildir — Renk, menzile girene kadar azalır.

   

   HSL varken neden laboratuvara ve lch'ye ihtiyacımız var? Bunun bir nedeni, LAB veya LCH kullanmanın bize çok daha geniş bir renk yelpazesine erişim sağlamasıdır. LCH ve LAB, insan görüşünün tüm spektrumuna erişmemizi sağlamak için tasarlanmıştır. Ayrıca, HSL ve rgb'nin birkaç dezavantajı vardır: algısal olarak tekdüze değildirler ve hsl'de hafifliği artırmak veya azaltmak, renk tonuna bağlı olarak oldukça farklı bir etkiye sahiptir.

   Bu demo'da, gri tonlama geçişine basarak LCH ve HSL arasında keskin bir kontrast görebiliriz. HSL renk tonu ve doygunluk şeritleri için, HSL işlevinin “hafiflik” bileşeni aynı olmasına rağmen, her karenin algısal hafifliğinde açık farklılıklar vardır! Bu arada, LCH tarafındaki kroma ve ton şeritleri neredeyse tekdüze bir algısal hafifliğe sahiptir.

   

   Degradeler için LCH rengini kullanırken de büyük bir fark görebiliriz. Bu degradelerin her ikisi de aynı renkle başlar ve biter (bu dönüştürücü kullanılarak HSL eşdeğerlerine dönüştürülen LCH değerleri ile). Ancak LCH gradyanı ortadaki canlı mavi ve mor tonlarından geçerken, HSL gradyanı karşılaştırıldığında daha çamurlu ve bulanık görünüyor.

   

    

   Demoya bakın →

   LAB ve LCH, belki sözdizimsel olarak biraz daha az sezgisel olsalar da, insan gözüne daha mantıklı gelecek şekilde davranırlar. Makalesinde, CSS'DE LCH rengi: ne, neden ve nasıl?, Lea Verou, LCH renginin avantajlarını ayrıntılı olarak açıklıyor. Ayrıca bu LCH renk seçiciyi de yaptı.

   Diğer renk işlevlerinde olduğu gibi, hwb (), lab() ve lch () isteğe bağlı bir alfa parametresi de alabilir.

   .my-element {
     background-color: lch(80% 240 50 / 0.5); // Resulting color has 50% opacity
   }

   Örnek çalışma

   HTML:

   <div class="lch">LCH</div>
   <div class="hsl">HSL</div>
   <div class="rgb">RGB (P3 color)</div>

   CSS: 

   * {
   	box-sizing: border-box;
   }
   
   body {
   	font-family: 'Helvetica', sans-serif;
   	font-size: 1.6rem;
   	color: #ffffff;
   	min-height: 100vh;
   	margin: 0;
   }
   
   body > div {
   	width: 100%;
   	min-height: 50vh;
   	display: flex;
   	justify-content: center;
   	align-items: center;
   }
   
   .lch {
   	background: linear-gradient(
   		to right,
   		lch(50% 100 200),
   		lch(50% 100 0)
   	);
   }
   
   .hsl {
   	background: linear-gradient(
   		to right,
   		hsl(188 100% 34%),
   		hsl(331 100% 50%)
   	);
   }
   
   .rgb {
   	background: linear-gradient(
   		to right,
   		color(display-p3 0 0.5188 0.631),
   		color(display-p3 0.8596 0 0.4786)
   	);
   }

   Tarayıcı Desteği ve Renk Uzayları #

   hwb (), lab() ve lch () şu anda yalnızca Safari'de desteklenmektedir. Desteklemeyen tarayıcılar için bir geri dönüş sağlayarak bunları hemen kullanmaya başlamak mümkündür. Renk işlevini desteklemeyen tarayıcılar, ikinci kuralı göz ardı eder:

   .my-element {
     background-color: lch(55% 102 360);
   
     /* LCH color converted to RGB using Lea Verou’s tool: https://css.land/lch/ */
     background-color: rgb(98.38% 0% 53.33%);
   }

   Diğer stiller desteklenmekte olan yeni renk işlevlerine bağlıysa, bir özellik sorgusu kullanabiliriz:

   .my-element {
     display: none;
   }
   
   /* Only display this element if the browser supports lch() */
   @supports (background-color: lch(55% 102 360)) {
     .my-element {
       display: block;
       background-color: lch(55% 102 360);
     }
   }

   Lea'nın makalesinde açıkladığı gibi, modern ekranların renkleri rgb'nin ötesinde görüntüleyebilmesine rağmen, çoğu tarayıcının şu anda yalnızca sRGB renk uzayındaki renkleri desteklediğini belirtmekte fayda var. LAB color demosunda, kaydırıcıları belirli bir noktanın ötesine taşımanın, lab() ve lch () ' nin desteklendiği Safari'de bile rengi gerçekten etkilemediğini fark edebilirsiniz. sRGB aralığının dışındaki değerlerin kullanılması, yalnızca donanım ve tarayıcılar yeterince ilerlediğinde etkili olacaktır.

   Safari artık P3 alanında renkleri görüntülememizi sağlayan color() işlevini destekliyor, ancak bunlar şimdilik RGB renkleriyle sınırlı ve henüz bize LAB ve lch'nin tüm avantajlarını sunmuyor.

   .my-element {
     background: rgb(98.38% 0% 53.33%); // bright pink
     background: color(display-p3 0.947 0 0.5295); // equivalent in P3 color space
   }

    

   • Daha fazlasını oku...
   • 0 yorum