2023'te CSS Renk İşlevleri - Başlamak için Bilmeniz Gereken Her Şey

Merhaba geliştirici arkadaşlar! Bugün CSS renk fonksiyonları dünyasına dalacağız.

Bir web sayfasındaki bir öğenin rengini değiştirmek için CSS'yi kullanmış olabilirsiniz, ancak CSS renk işlevlerini hiç duydunuz mu? Değilse emniyet kemerlerinizi sıkın çünkü yeni ve son derece faydalı bir şey öğrenmek üzeresiniz!

Dün okuduğum bir alıntıyla başlayalım İyi Okumalar .

Renk klavyedir, gözler armonidir, ruh ise çok telli piyanodur. Sanatçı, ruhta titreşimler yaratmak için şu ya da bu tuşa dokunarak oynayan eldir.

CSS Renk İşlevleri Tam Olarak Nelerdir?

CSS renk işlevleri, yalnızca basit bir renk kodu yerine matematiksel işlevleri kullanarak CSS'deki renkleri belirtmenin bir yoludur.

İşlevler, stil sayfanızda kullanılan renkler üzerinde daha fazla kontrol ve esneklik sağlar.

Renk işlevleriyle bir rengin tonunu , doygunluğunu , açıklığını ve opaklığını ayarlayabilir, hatta iki veya daha fazla rengi birbirine karıştırabilirsiniz.

Birden fazla CSS İşlevi mevcut, bazılarına bakalım:

1. rgb() - Sırasıyla kırmızı, yeşil ve maviyi temsil eden üç değer alır ve bir renk döndürür. Değerler 0 ila 255 arasında değişebilir. Örnek: color: rgb(255, 0, 0) kırmızı renkle sonuçlanır.

   
   

2. rgba() - rgb() a benzer, ancak aynı zamanda rengin opaklığını ayarlamanıza da olanak tanır. Dördüncü değer olan alpha, 0 ile 1 arasında değişebilir. Örnek: color: rgba(255, 0, 0, 0.5) yarı saydam bir kırmızı renkle sonuçlanır.

   
   

3. hsl() - Ton, doygunluk ve açıklığı temsil eden üç değer alır ve bir renk döndürür. Örnek: color: hsl(0, 100%, 50%) kırmızı renkle sonuçlanır.

   
   

4. hsla() - hsl() işlevine benzer, ancak aynı zamanda rengin opaklığını ayarlamanıza da olanak tanır. Örnek: color: hsla(0, 100%, 50%, 0.5) yarı saydam bir kırmızı renkle sonuçlanır.

   
   

5. mix() - İsteğe bağlı bir ağırlık parametresiyle iki rengi birlikte karıştırmanıza olanak tanır. Örnek: color: mix(red, blue) mor bir tonla sonuçlanır.

Bunları ayrıntılı olarak öğrenelim.

RGB()

Pekala, CSS renk işlevleri dünyasına doğru yolculuğumuza devam edelim ve RGB işlevine dalalım. RGB işlevi CSS'de en sık kullanılan renk işlevlerinden biridir ve bunun iyi bir nedeni vardır!

Anlaşılması kolaydır ve web sitenizde kullandığınız renkler üzerinde size çok fazla kontrol sağlar.

RGB işlevi, her biri yoğunluğu temsil eden üç değer alır.

• kırmızı,

• yeşil ve

• sırasıyla mavi.

Bu değerler 0 ila 255 arasında değişebilir. Kırmızı, yeşil ve mavinin farklı yoğunluklarını karıştırarak istediğiniz rengi oluşturabilirsiniz.

Örnek:

• Kırmızı renk için - rgb(255, 0, 0)

• Yeşil renk için - rgb(0, 255, 0)

• Mavi renk için - rgb(0, 0, 255)

  
  

 div { background-color: rgb(0, 255, 0); } /*this sets all th div element with green color*/

HSL()

Pekala, CSS'deki başka bir kullanışlı renk fonksiyonuna geçelim: HSL fonksiyonu!

HSL işlevi RGB işlevine benzer ancak kırmızı, yeşil ve mavi değerlerini kullanmak yerine aşağıdaki değerleri kullanır:

• renk tonu,

• doygunluk ve

• hafiflik.

  
  

  Bu, özellikle yeni başlayanlar için anlaşılmasını ve kullanılmasını biraz kolaylaştırır. renk teorisi .

  
  

HSL işlevindeki renk tonu değeri, 0 ile 360 arasında değişen değerlerle rengin kendisini temsil eder.

• 0 renk tonu değeri kırmızıyı, 120 renk tonu değeri yeşili ve 240 renk tonu değeri maviyi temsil eder.

  
  

• HSL işlevindeki doygunluk değeri , %0 ile %100 arasında değişen değerlerle rengin yoğunluğunu temsil eder. %100 doygunluk değeri rengin tamamen doygun olduğu, %0 değeri ise rengin gri olduğu anlamına gelir.

  
  

• HSL işlevindeki açıklık değeri , %0 ile %100 arasında değişen değerlerle rengin parlaklığını temsil eder. 50% açıklık değeri rengin nötr gri olduğu, 100% değeri rengin tamamen açık olduğu, 0% değeri ise rengin tamamen koyu olduğu anlamına gelir.

  
  

 div { background-color: hsl(120, 100%, 50%); } /* All `<div>` elements to green, fully saturated, and with a neutral lightness. */

RGBA()

Pekala millet, RGBA işlevi hakkında konuşalım!

RGBA işlevi tıpkı RGB işlevi gibidir ancak bir avantajı vardır:

• bir rengin opaklığını belirtmenize olanak tanır.

Öğeleriniz için yarı saydam bir efekt oluşturmak istediğinizde (örneğin, arka plan renginin kısmen şeffaf olmasını istediğinizde) bu kullanışlı olabilir.

RGBA işlevi dört değer alır; ilk üçü tıpkı RGB işlevi gibi kırmızı, yeşil ve mavi değerlerdir.

Dördüncü değer, rengin opaklığını temsil eden ve 0 ile 1 arasında değişen alfa değeridir .

0 değeri rengin tamamen şeffaf olduğu, 1 değeri ise rengin tamamen opak olduğu anlamına gelir.

 div { color: rgba(0, 0, 255, 0.75); } /* all `<div>` elements to blue with an opacity of 75%. */

HSLA()

Pekala millet, HSLA işlevi hakkında konuşalım!

HSLA işlevi tıpkı HSL işlevi gibidir, ancak bir avantajı daha vardır: bir rengin opaklığını belirlemenize olanak tanır.

Öğeleriniz için yarı saydam bir efekt oluşturmak istediğinizde (örneğin, arka plan renginin kısmen şeffaf olmasını istediğinizde) bu kullanışlı olabilir.

HSLA işlevi dört değer alır; ilk üçü, tıpkı HSL işlevi gibi renk tonu, doygunluk ve açıklık değerleridir.

Dördüncü değer, rengin opaklığını temsil eden ve 0 ile 1 arasında değişen alfa değeridir.

0 değeri rengin tamamen şeffaf olduğu, 1 değeri ise rengin tamamen opak olduğu anlamına gelir.

 div { color: hsla(240, 100%, 50%, 0.75); } /* all `<div>` elements to blue with an opacity of 75%. */

Her iki fonksiyonda da yarı saydam etki için kullanılan A, Alfa anlamına gelir (alfa değeri 0,75) ile aynıdır, basit.

Özel Özellikler veya CSS Değişkenleri

Şimdi CSS değişkenleri olarak da bilinen CSS'deki özel özelliklerden bahsedelim. Özel özellikler, stil sayfanızda yeniden kullanabileceğiniz değerleri saklamanıza olanak tanıyarak stillerinizi korumanızı kolaylaştırır ve kodunuzu daha verimli hale getirir. modüler ve esnek.

Özel bir özellik oluşturmak için -- sözdizimini, ardından özellik adını ve ardından bir değeri kullanmanız yeterlidir

 :root { --primary-color: blue; }

Burada --primary-color adında blue değerine sahip özel bir özellik oluşturduk.

Artık bu özel özelliği kullanmak için CSS seçicilerinizde var() işlevini kullanabilirsiniz.

 button { background-color: var(--primary-color); }

Yukarıdaki kod, --primary-color özel özelliğini kullandığımız için tüm <button> öğelerinin arka plan rengini maviye ayarlar.

--primary-color değerini değiştirmek istersek, onu yalnızca tek bir yerde değiştirmemiz gerekir ve bu, tüm süre boyunca otomatik olarak güncellenecektir. stil sayfası .

Özel özellikleri kullanmanın avantajları şunlardır:

• Kodun yeniden kullanımı : Değerleri stil sayfanız boyunca tekrarlamak yerine, değerleri özel özelliklerde saklayabilir ve gerektiğinde yeniden kullanabilirsiniz.

• Sürdürülebilirlik : Özel özellikler stillerinizi korumanızı kolaylaştırır çünkü değerleri yalnızca tek bir yerde güncellemeniz gerekir.

• Esneklik : Özel özellikler, birden fazla seçicide değişiklik yapmak yerine değerleri tek bir yerden değiştirerek sitenizin görünümünü değiştirmenize olanak tanır.

CSS Renk İşlevleri İçin En İyi Uygulamalar

Pekala, projelerinizde CSS renk işlevlerini kullanmaya yönelik en iyi uygulamalardan bahsedelim.

Bu ipuçları tutarlı ve görsel olarak çekici bir tasarım oluşturmanıza yardımcı olacaktır. Renk paleti Web siteniz için renklerinizin tüm kullanıcılar tarafından okunabilir ve erişilebilir olduğundan emin olun.

Web Siteniz için Renk Paleti Oluşturma:

CSS renkleriyle çalışırken yapmanız gereken ilk şeylerden biri web siteniz için bir renk paleti oluşturmaktır. Bu, beğendiğiniz ve birlikte iyi uyum sağlayan birkaç rengi seçmek kadar basit olabilir.

Renklerinizi tanımlamak için RGB, HSL, RGBA veya HSLA işlevlerini kullanabilirsiniz.

Başlamak için iyi bir nokta, bir ana renk seçmek ve ardından onu tamamlayacak 2-3 vurgu rengi seçmektir.

 :root { --primary-color: hsl(180, 100%, 50%); --secondary-color: hsl(120, 100%, 50%); --tertiary-color: hsl(60, 100%, 50%); }

Kontrast ve Hiyerarşi için CSS Renk İşlevlerini Kullanma:

Tasarımlarınızda kontrast ve hiyerarşi oluşturmak için renk kullanmak önemlidir. Örneğin, arka planınız için daha açık bir renk, metniniz için ise daha koyu bir renk kullanarak metnin kolayca okunabilmesini sağlayabilirsiniz.

Düğmeler veya bağlantılar gibi belirli öğelere dikkat çekmek için de rengi kullanabilirsiniz.

 body { background-color: var(--secondary-color); color: var(--primary-color); } a { color: var(--tertiary-color); }

Okunabilirlik ve Erişilebilirlik Açısından Renk İşlevlerinin Test Edilmesi:

Son olarak renklerinizi okunabilirlik ve erişilebilirlik açısından test etmeniz önemlidir. Özellikle renk görme bozukluğu olan kullanıcılar için renklerinizin kolayca okunabilmesi için yeterli kontrasta sahip olduğundan emin olun.

Renklerinizin kontrastını kontrol etmek ve erişilebilirlik standartlarını karşıladığından emin olmak için çevrimiçi araçları kullanabilirsiniz.

• WebAIM Kontrast Denetleyicisi

• Müzli Renk Paleti Oluşturucu

• Experte - Kontrast Denetleyicisi

• soğutucular - Palet Oluşturucu

• Canva Palet Oluşturucu

CSS Renk Fonksiyonları İleri Teknikler

Bu bölümde CSS renk fonksiyonlarıyla ilgili bazı gelişmiş teknikleri inceleyeceğiz.

Dinamik Renk Şemaları için CSS Değişkenlerini Kullanma

Hiç web sitenizin renk düzenini yalnızca birkaç satır kodla değiştirmek istediniz mi? Özel özellikler olarak da bilinen CSS değişkenleriyle bunu yapabilirsiniz!

Renk paletinizi saklamak için bir dizi değişken oluşturabilir ve bunları stil sayfanızda kullanabilirsiniz.

Bu şekilde, renk düzeninizi değiştirmek isterseniz yalnızca değişkenlerinizdeki değerleri güncellemeniz gerekir.

 :root { --primary-color: #00b0ff; --secondary-color: #00cc99; } h1 { color: var(--primary-color); } button { background-color: var(--secondary-color); }

Bu örnekte birincil ve ikincil renklerimiz için iki özel özellik oluşturduk. Daha sonra bunları h1 ve button elemanlarımıza stil vermek için kullandık.

CSS Renk Fonksiyonlarıyla Animasyonlar Oluşturma

CSS renk işlevleriyle yapabileceğiniz harika şeylerden biri onları canlandırmak! Web sitenize biraz dinamizm katmak için renkler arasında yumuşak geçişler oluşturabilirsiniz. Örneğin, kullanıcı fareyle düğmenin üzerine geldiğinde düğmenin renginin değişmesini sağlayabilirsiniz.

 button { background-color: hsl(120, 100%, 50%); transition: background-color 0.5s ease; } button:hover { background-color: hsl(240, 100%, 50%); }

Burada butonumuzun varsayılan arka plan rengini yeşil renk tonuna ( hsl(120, 100%, 50%) ayarladık ve butonun üzerine gelindiğinde rengin düzgün bir şekilde değişmesini sağlayacak bir geçiş ekledik.

Fareyle üzerine gelme durumu için rengi mavi ton ( hsl(240, 100%, 50%) ) olarak değiştirdik.

Degradeler ve Saydamlık için CSS Renk İşlevlerini Kullanma

CSS renk işlevleriyle yapabileceğiniz bir diğer eğlenceli şey de degradeler ve şeffaflıktır. Yarı saydam renkler oluşturmak için RGBA ve HSLA renk işlevlerini kullanabilir ve ardından degradeler oluşturmak için bunları birleştirebilirsiniz.

 .gradient { background: linear-gradient(to right, rgba(255, 0, 0, 0.5), hsla(120, 100%, 50%, 0.5)); }

Burada kırmızı RGBA renginden yeşil HSLA rengine giden doğrusal bir degrade oluşturduk. Her iki rengin de alfa değeri 0,5'tir, bu da onları yarı saydam yapar.

İşte buyur!

CSS renk işlevleriyle bazı ileri teknikler. Bu teknikleri deneyerek eğlenin ve yaratıcılığınızın çılgına dönmesine izin verin!

Kaynaklar

• caniuse.com [HTML5, CSS3 için destek tabloları]

• https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl

• https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

Çözüm

Sonuç olarak, bu girişin CSS renk işlevlerine ve özel özelliklerine başlamanıza yardımcı olacağını umuyorum.

Bunlar, CSS kodunuzu daha esnek, bakımı kolay ve çalışmayı daha kolay hale getirebilecek güçlü araçlardır. Mutlu kodlama!