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 , , ve ayarlayabilir, hatta iki veya daha fazla rengi birbirine karıştırabilirsiniz. tonunu doygunluğunu açıklığını opaklığını Birden fazla CSS İşlevi mevcut, bazılarına bakalım: - 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: kırmızı renkle sonuçlanır. rgb() color: rgb(255, 0, 0) - 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: yarı saydam bir kırmızı renkle sonuçlanır. rgba() rgb() color: rgba(255, 0, 0, 0.5) - Ton, doygunluk ve açıklığı temsil eden üç değer alır ve bir renk döndürür. Örnek: kırmızı renkle sonuçlanır. hsl() color: hsl(0, 100%, 50%) - işlevine benzer, ancak aynı zamanda rengin opaklığını ayarlamanıza da olanak tanır. Örnek: yarı saydam bir kırmızı renkle sonuçlanır. hsla() hsl() color: hsla(0, 100%, 50%, 0.5) - İsteğe bağlı bir ağırlık parametresiyle iki rengi birlikte karıştırmanıza olanak tanır. Örnek: mor bir tonla sonuçlanır. mix() color: mix(red, blue) 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 temsil eder. rengin kendisini 0 kırmızıyı, 120 renk tonu değeri yeşili ve 240 renk tonu değeri maviyi temsil eder. renk tonu değeri HSL işlevindeki , %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. doygunluk değeri HSL işlevindeki , %0 ile %100 arasında değişen değerlerle rengin parlaklığını temsil eder. açıklık değeri rengin olduğu, değeri rengin değeri ise rengin olduğu anlamına gelir. açıklık değeri 50% nötr gri 100% tamamen açık olduğu, 0% tamamen koyu 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 belirtmenize olanak tanır. opaklığını Öğeleriniz için oluşturmak istediğinizde (örneğin, arka plan renginin kısmen şeffaf olmasını istediğinizde) bu kullanışlı olabilir. yarı saydam bir efekt 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 oluşturmak istediğinizde (örneğin, arka plan renginin kısmen şeffaf olmasını istediğinizde) bu kullanışlı olabilir. yarı saydam bir efekt 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. ve esnek. modüler Ö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 adında değerine sahip özel bir özellik oluşturduk. --primary-color blue Artık bu özel özelliği kullanmak için CSS seçicilerinizde işlevini kullanabilirsiniz. var() button { background-color: var(--primary-color); } Yukarıdaki kod, özel özelliğini kullandığımız için tüm öğelerinin arka plan rengini maviye ayarlar. --primary-color <button> 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. . --primary-color stil sayfası Özel özellikleri kullanmanın avantajları şunlardır: : Değerleri stil sayfanız boyunca tekrarlamak yerine, değerleri özel özelliklerde saklayabilir ve gerektiğinde yeniden kullanabilirsiniz. Kodun yeniden kullanımı : Özel özellikler stillerinizi korumanızı kolaylaştırır çünkü değerleri yalnızca tek bir yerde güncellemeniz gerekir. Sürdürülebilirlik : Ö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. Esneklik 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. Web siteniz için renklerinizin tüm kullanıcılar tarafından okunabilir ve erişilebilir olduğundan emin olun. Renk paleti 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ı ve elemanlarımıza stil vermek için kullandık. h1 button 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 ( ayarladık ve butonun üzerine gelindiğinde rengin düzgün bir şekilde değişmesini sağlayacak bir geçiş ekledik. hsl(120, 100%, 50%) Fareyle üzerine gelme durumu için rengi mavi ton ( ) olarak değiştirdik. hsl(240, 100%, 50%) 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!
