Selamlar arkadaşlar yeni kategorilerimizin ilk konularında temelden başlayarak sizinle paylaşımlarda bulunacağım.
Web tasarım sırasında CSS’de kullanılabilen çeşitli renkler vardır. Yaygın olanlar arasında onaltılık (onaltılık) kodlar, RGB (kırmızı, yeşil, mavi), RGBA (kırmızı, yeşil, mavi, alfa) ve HSL (ton, doygunluk, hafiflik) bulunur. Bu makalede, onaltılık renk kodlarını inceleyecek ve şeffaflık için alfa değerleri kullanmayı keşfedeceksiniz.
Ön koşullar;
- CSS ile biraz aşinalık gereklidir.
- #rrggbbaa onaltılık renk gösterimini destekleyen modern bir web tarayıcısı.
Renk Anahtar Kelimeleri Kullanma
Öncelikle CSS, renk anahtar kelimelerini destekler. Çoğu tarayıcı ve cihaz, bu adlandırılmış renkleri renk değerlerine dönüştürebilir. CSS’de yaklaşık 140 adlandırılmış renk vardır (kırmızı, mavi, lavanta vb.). Örneğin, metninizin kırmızı renkte olmasını istiyorsanız, red anahtar kelimesini kullanabilirsiniz:
div {
color: red;
}
Onaltılık Değerleri Anlamak
Muhtemelen en çok ondalık değerlerle (veya 10 tabanında) saymaya alışkınsınız:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Diğer bir deyişle, tek bir rakamın yalnızca 10 olası değeri vardır (0 ila 9) ve bundan sonra iki rakama (10) çıkması gerekir.
Onaltılık değerler, 10 tabanı yerine 16 tabanıdır:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
Ek değerleri temsil etmek için A, B, C, D, E ve F harflerini kullanır.
Örneğin, şunların tümü geçerli onaltılık değerlerdir:
00, 01, 99, 9D, 1D, CC, E4, F5
Ardından, CSS stillerinde onaltılık değerlerin nasıl kullanılacağını öğrenelim.
CSS’de Onaltılık Değerleri Kullanma
CSS ile bir öğenin stilini belirlerken, genellikle yazı tipi rengi, arka plan rengi, kenarlık rengi vb. özellikler için renk değerlerini değiştirirsiniz.
Özel renkler oluşturmak için, belirli renkleri temsil eden onaltılık kodlar oluşturmak için yukarıda açıklanan onaltılık sayı kombinasyonlarını kullanabilirsiniz.
CSS onaltılık kodları bir “sayı işareti” (#) ile başlamalıdır (kare işareti veya karma simgesi olarak da bilinir). Ardından, altı basamaklı onaltılık değerler gelir. Her iki basamak çifti kırmızı, yeşil ve maviyi temsil eder. Desen #RRGGBB’ye benziyor (burada kırmızı R, yeşil G ve mavi B’dir).
Renkler, kırmızı, yeşil ve mavi değerlerin bir kombinasyonuyla temsil edilir. En düşük değer (00) rengin en koyu versiyonu (siyaha en yakın) ve en yüksek değer (FF) rengin en açık versiyonu (beyaza en yakın) olacaktır.
Üç çiftin de en düşük değere (00) ayarlanması düz siyah bir renk üretecektir:
div {
color: #000000;
}
Üç çiftin de en yüksek değere (FF) ayarlanması, düz beyaz bir renk üretecektir:
div {
color: #FFFFFF;
}
Başlık metni renginin parlak kırmızı olmasını istediğinizi varsayalım. Bunu başarmak için, kırmızı (RR) değerini mümkün olan en yüksek değere (FF) ayarlayabilirsiniz. Yeşil veya mavi istemediğiniz için, yeşil (GG) ve mavi (BB) değerlerinin her birini mümkün olan en düşük değere (00) ayarlayabilirsiniz.
div {
color: #FF0000;
}
Kırmızı, mavi ve yeşil miktarını değiştirerek çeşitli renkler üretebilirsiniz. #DC143C’de yüksek miktarda kırmızı (DC) vardır - bu, “Kızıl” bir renk üretecektir. #EE82EE yüksek miktarda kırmızı (EE) ve mavi (EE) içerir - bu “Mor” bir renk üretecektir. #40E0D0, yüksek miktarda yeşil (E0) ve mavi (D0) içerir - bu, “Turkuaz” bir renk üretecektir.
CSS onaltılık kodları büyük/küçük harfe duyarlı değildir. Bu, alfabetik karakterlerin büyük veya küçük harf olabileceği anlamına gelir - yani #ff0000, #FF0000 ile eşdeğerdir. CSS ayrıca steno değerleri de destekler. Bu, #F00’ın #FF0000 ile eşdeğer olduğu anlamına gelir.
Benimsediğiniz yaklaşım, projeniz tarafından kullanılan kodlama standartlarına uygun olmalıdır.
Ardından, CSS onaltılık kodlarla alfa değerlerinin nasıl kullanılacağını öğrenelim.
CSS Hex Kodlarına Alfa Değeri Ekleme
Bir rengin saydamlığını güncellemek için bir alfa değeri kullanmak, onaltılık kod biçimini #RRGGBB’den #RRGGBBAA’ya (burada alfa A’dır) değiştirir. İlk altı değer (kırmızı, yeşil ve mavi olanlar) aynı kalır.
#RRGGBBAA’daki AA değeri, mümkün olan en düşük değerden (00) mümkün olan en yüksek değere (FF) kadar değişebilir. Değerin düşürülmesi, görünürlüğün şeffaf hale gelene kadar soluk ve daha soluk olmasına neden olacaktır. Değeri yükseltmek, görünürlüğün giderek opak ve daha opak olmasına neden olacaktır.
Oldukça şeffaf bir mavi renk istediğinizi varsayalım.
İlk olarak, mavi rengin onaltılık koduyla başlayın:
div {
background-color: #0080FF;
}
Ardından, onaltılık koda iki değer daha ekleyerek saydamlığı değiştirebilirsiniz. Bu örnekte, alfa değeri 80 olarak ayarlanmıştır:
div {
background-color: #0080FF80;
}
Onaltılık formattaki alfa değeri biraz kafa karıştırıcı olabilir, çünkü saydamlık için temel 16 değerinin gerçekte nasıl görüneceğini kavramsallaştırmak zordur. Ancak bunun faydası, kod tabanınızda halihazırda onaltılık kodlar kullanıyorsanız, şimdi şeffaflığı değiştirmek için bunları da güncelleyebilirsiniz! Renk formatı değişikliği gerekmeyecektir.
Renk Seçmek İçin Chrome DevTools Aracını Kullanma
Renklerinizi farklı biçimlerde görmek için hızlı bir araç ise Chrome DevTools’dur. DevTools paneliniz açıldığında, stiller bölümünde kontrol ettiğiniz rengi arayın. Bulduğunuzda, değerleri doğrudan ayarlamak için rengin solundaki kutuyu tıklayabilirsiniz. Doğru şekilde dönüştürülmüş değerler ile çeşitli biçim seçenekleriniz arasında geçiş yapmak için SHIFT tuşunu basılı tutabilirsiniz.
Aşağıdaki örnekte, alfa değerini ve renk değerini ayarlayoruz. Renk seçiciyi kullanıyoruz. Ardından onaltılık kod formatı, RGBA formatı ve HSLA formatı arasında geçiş yapıyoruz.