CSS’de kullanılabilecek birkaç renk formatı bulunmaktadır. Yaygın olanlar arasında onaltılık (hexadecimal) kodlar, RGB (kırmızı, yeşil, mavi), RGBA (kırmızı, yeşil, mavi, alfa) ve HSL (ton, doygunluk, aydınlık) bulunmaktadır.
Bu makalede, hex renk kodlarına göz atacak ve şeffaflık için alfa değerlerini kullanmayı keşfedeceksiniz.
Bu makaleyi takip etmek istiyorsanız, ihtiyacınız olanlar:
CSS ile bazı tanıdıklık düzeyleri gereklidir. Eğer bir hatırlatıcıya ihtiyacınız varsa, CSS ile Bir Websitesi Nasıl Oluşturulur adlı eğitim serisinden faydalanabilirsiniz. #rrggbbaa hex renk gösterimini destekleyen modern bir web tarayıcısı. Renk Anahtar Kelimelerini Kullanma İlk olarak, 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 adet renk anahtar kelimesi bulunmaktadır (örneğin, red, blue, lavender vb.).
Örneğin, metninizi kırmızı renkte yapmak istiyorsanız, kırmızı kelimesini kullanabilirsiniz:
1 2 3 4 5 | div { color: red; } |
Farklı değer formatları, hex kodları gibi, size 140 renk sınırlamasının ötesinde özelleştirme imkanı sağlar.
Onaltılık(Hexadecimal) Değerleri Anlama
Muhtemelen en çok ondalık değerlerle sayma alışkanlığına sahipsiniz (veya 10 tabanında).
1 2 3 | 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 |
Diğer bir deyişle, tek haneli bir sayının sadece 10 olası değeri vardır (0 ila 9), bundan sonra iki haneli olmak zorundadır (10).
Onaltılık değerler, 10 tabanı yerine 16 tabanında kullanılır:
1 2 3 | 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F |
Ek değerleri temsil etmek için harf A, B, C, D, E ve F kullanır.
Örneğin, bunlar tüm geçerli onaltılık değerlerdir:
1 2 3 | 00, 01, 99, 9D, 1D, CC, E4, F5 |
Sonraki adım, onaltılık değerleri CSS stillerinde nasıl kullanacağınızı öğrenmektir.
CSS’de Onaltılık Değerleri Kullanma CSS ile bir öğeyi stilize ederken genellikle font rengi, arka plan rengi, kenarlık rengi vb. gibi özelliklerin renk değerlerini değiştirirsiniz.
Özel renkler oluşturmak için yukarıda açıklanan onaltılık sayıların kombinasyonlarını kullanarak belirli renkleri temsil eden hex kodları oluşturabilirsiniz.
Özel renkler oluşturmak için yukarıda açıklanan onaltılık sayıların kombinasyonlarını kullanarak belirli renkleri temsil eden hex kodları oluşturabilirsiniz.
CSS hex kodları, bir “numara işareti” (#) (aynı zamanda bir pound işareti veya bir diğer adıyla hashtag sembolü) ile başlamalıdır. Daha sonra altı onaltılık değer. İkişerli ikişerli her iki rakam, kırmızıyı, yeşili ve maviyi temsil eder. Desen şu şekildedir: #RRGGBB (burada kırmızı R, yeşil G ve mavi B’dir).
1 2 3 4 5 | div { color: #FFFFFF; } |
CSS Hex Kodlarına Alfa Değeri Eklemek
Bir rengin şeffaflığını güncellemek için bir alfa değeri kullanmak, hex kodu formatını #RRGGBB’den #RRGGBBAA’ya (burada alfa A’dır) değiştirecektir. İlk altı değer (kırmızı, yeşil ve mavi olanlar) aynı kalır.
#RRGGBBAA’daki AA değeri, en düşük değerden (00) en yüksek değere (FF) kadar değişebilir. Değeri düşürmek, görünürlüğün giderek soluklaşmasına neden olacak ve şeffaf hale gelene kadar devam edecektir. Değeri artırmak, görünürlüğün giderek daha opak hale gelmesine neden olacaktır.
Diyelim ki oldukça şeffaf bir mavi renk istiyorsunuz.
İlk olarak, mavi rengin hex kodu ile başlayın:
1 2 3 4 5 | div { background-color: #0080FF; } |
Sonraki adımda, şeffaflığı değiştirmek için hex koduna iki değer daha ekleyebilirsiniz. Bu örnekte alfa değeri 80 olarak ayarlanmıştır:
1 2 3 4 5 | div { background-color: #0080FF80; } |
Onaltılık formattaki alfa değeri biraz kafa karıştırıcı olabilir çünkü şeffaflık için 16 tabanlı bir değeri gerçekten nasıl hayal edeceğinizi anlamak zordur. Ancak avantajı, zaten kod tabanınızda hex kodlarını kullanıyorsanız, şeffaflığı da değiştirmek için bunları güncelleyebilirsiniz! Renk formatı değişiklikleri gerekmez.
Yorum Yap