Stil Sayfaları (CSS) 10 - Renk Kullanımı
4.3. Renk Kullanımı
Web sitelerinde tasarım için renk seçimi önemlidir. Renkler sitenin içeriğiyle uyumlu olmalıdır.
Web sayfasındaki görüntülenen elemanlar için arka plan, çerçeve veya gölge rengi verilebilir. Ayrıca
birçok elemana yazı rengi de verilebilir.
Dijital ortamlarda üç ana renk vardır. Bunlar; kırmızı (red), yeşil (green), mavidir (blue) (Görsel
4.29).
 |
| Görsel 4.29: Dijital ortamda kullanılan ana renkler |
4.3.1. Klasik Renk Tanımlama Çeşitleri
Kullanılacak renkleri belirlemek için renk isimleri, renk fonksiyonları, renk kodları kullanılabilir.
Renk fonksiyonları ve renk kodlarıyla 16 milyonun üzerinde farklı tonlarda renk tanımlanabilir.
Renk İsimleri: Renkler CSS tarafından önceden tanımlanmış isimleriyle kullanılabilir. Renk
isimleri için genellikle renklerin İngilizce karşılıkları kullanılmaktadır. Ayrıca bir rengin açık tonları
için “light”, koyu tonları için “dark” sözcüğü kullanılmaktadır.
RGB Fonksiyonu: Kırmızı, yeşil ve mavi renklerinin her birisi için 0-255 arasında değer belirlenip
RGB fonksiyonuna yazılmasıyla istenilen renk elde edilir.
RGB( 0 - 2 5 5 a r a s ı d e ğ e r , 0 - 2 5 5 a r a s ı d e ğ e r , 0 - 2 5 5 a r a s ı d e ğ e r
RGB(0,0,255))
RGBA Fonksiyonu: RGB fonksiyonundan farklı olarak RGBA fonksiyonuna bir de alpha (saydamlık)
değeri girilir. Saydamlık değeri en az “0” en fazla “1” değerini alır. Örneğin, renklerin yarı saydam
görünmesi isteniyorsa alpha değeri “0.5” olmalıdır.
RGB( 0 - 2 5 5 a r a s ı d e ğ e r , 0 - 2 5 5 a r a s ı d e ğ e r , 0 - 2 5 5 a r a s ı d e ğ e r , 0-1 arası değer
RGB(0,0,255,0.5))
Renk Kodları: #(diyez) işaretinden sonra kırmızı, yeşil, mavi renklerin her birisi için iki basamaklı
olacak şekilde onaltılık (Hexadecimal) sayı tabanında değer girilerek renk elde edilir. Renkler
için onaltılık sayı tabanında verilebilecek en küçük değer “00”, en büyük değer “FF” değeridir
(Tablo 4.14).
0 0 0 0 0 0 Siyah renk F F F F F F Siyah renk
|
Renk isimleri |
RGB Fonksiyonu |
Renk Kodları |
Ekran Görüntüsü |
|
red |
rgb(255,0,0) |
#FF0000 |
Kırmızı |
|
green |
rgb(0,255,0) |
#00FF00 |
Yeşil |
|
blue |
rgb(0,0,255) |
#0000FF |
Mavi |
|
pink |
rgb(255,192,203) |
#FFC0CB |
Pembe |
|
yellow |
rgb(255,255,0) |
#FFFF00 |
Sarı |
|
purple |
rgb(128,0,128) |
#800080 |
Mor |
|
black |
rgb(0,0,0) |
#000000 |
Siyah |
|
lightblue |
rgb(173,216,230) |
#ADD8E6 |
Açık Mavi |
|
darkorange |
rgb(255,140,0) |
#FF8C00 |
Koyu Turuncu |
4.3.2. Geçişli Renk Tanımlama
Faklı renk tonlarının doğrusal veya radyal bir şekilde birbirine karıştığı renkler geçişli renklerdir.
Geçişli renkler elemanların “background” stil özelliğine uygulanır.
Doğrusal Renk Geçişi: Renk tonlarının belirtilen yönlere (soldan sağa, yukarıdan aşağıya vb.)
göre doğrusal bir şekilde geçiş yapması için “linear-gradient” komutu kullanılır. En az iki renk arasında
geçiş yapılır.
background:linear-gradient(red,white);
background:linear-gradient(red,white,blue);
background:linear-gradient(red,white,blue,black);
En basit kullanımı sadece renklerin belirlendiği yukarıdaki örnek kodlarda olduğu gibidir. Hiçbir
yön verilmediği için yukarıdan aşağıya doğrusal bir geçiş gerçekleşir.
background:linear-gradient(to top,red,white); /* Aşağıdan yukarıya geçiş */
background:linear-gradient(to right,red,white); /* Soldan sağa geçiş */
background:linear-gradient(to bottom,red,white); /* Yukarıdan aşağıya geçiş */
background:linear-gradient(to left,red,white); /* Sağdan sola geçiş */
background:linear-gradient(to top right,red,white); /*Sağ üst çapraza geçiş */
background:linear-gradient(to top left,red,white); /* Sol üst çapraza geçiş */
background:linear-gradient(to bottom right,red,white); /* Sağ alt çapraza geçiş */
background:linear-gradient(to bottom left,red,white); /* Sol alt çapraza geçiş */
Renkler arası geçişler, yukarıdaki örnek kodlarda görüldüğü gibi geçiş yönü belirterek de yapılabilir.
Renk sayısı ikiden fazla olabilir.
background:linear-gradient(0deg,red,white);
background:linear-gradient(90deg,red,white);
background:linear-gradient(180deg,red,white);
Renkler arası geçişlerin yönü, yukarıdaki örnek kodlarda görüldüğü gibi “0-180” arasında herhangi
bir açı değeri ile de belirlenebilir.
Not
Web sayfasına en uygun renk geçiş kodları, çevrim içi olarak hizmet veren web sitelerinden
kolayca üretilebilir.
Uygulama
CSS ile klasik ve geçişli renk tanımlayarak kutu renklendirme işlemlerini Görsel
4.30’da görüldüğü şekilde yönergeler doğrultusunda gerçekleştiriniz (Kutuların üzerine
fare ile gelindiğinde kutunun genişliğini 0,5 saniyede animasyonlu bir şekilde
1000 piksel yapınız.).
 |
| Görsel 4.30: Renkli kutular |
1. Adım: Index.html isimli dosya oluşturunuz ve oluşturduğunuz dosyaya Stil.css
dosyasını bağlayınız.
2. Adım: Üç adet <div> elemanı ekleyiniz ve içlerine “Renkli Kutu” yazınız.
<div class="gecisli1"> Renkli Kutu 1 </div>
<div class="gecisli2"> Renkli Kutu 2 </div>
<div class="gecisli3"> Renkli Kutu 3 </div>
3. Adım: <div> elemanlarının arka plan renkleri için Stil.css dosyasına aşağıdaki kodları
ekleyiniz.
.gecisli1{
width: 20%; background: linear-gradient(to right, skyblue , #23538A);}
.gecisli2{
width: 30%; background: linear-gradient(to left, red,black);}
.gecisli3{
width: 40%;
background: linear-gradient(to right top, #0cbaba, #380036, darksalmon); }
4. Adım: <div> elemanlarının genel özellikleri; yükseklik 100 piksel, yazı rengi beyaz,
yazı boyutu 20 piksel, kenar yuvarlaklığı 10 piksel olacak şekilde ayarlayınız.
div{ height: 100px; color:white; font-size:20px; border-radius: 10px; }
5. Adım: Kutuların üzerine fare ile gelindiğinde 0.5 saniyede kutu genişliğini 1000
piksel olacak şekilde ayarlayınız.
div:hover{
width: 1000px; cursor:hand;
transition-property: width; transition-duration:0.5s; transition-delay:0.1s;}
Hiç yorum yok