Popüler Aramalar:  TLS Nedir?  MyBB SSL Ayarları  MyBB 1.8 Linkleri Gizleme Eklentisi  Wordpress LiteSpeed Cache Ayarları  Wordpress Eklentisiz Breadcrumb  Yandex Webmaster
CSS Dersleri 3: Renklerin Kullanımı

CSS Dersleri 3: Renklerin Kullanımı

CSS Dersleri 3: Renklerin Kullanımı

Merhaba,

CSS derslerimize css’de kullanılan renkler ile devam ediyoruz. Bu dersimizde ise CSS’de Renklerin Kullanımı sizlere anlatmaya çalışacağım.

Daha önce CSS ders yazılarına aşağıda ki bağlantılarla ulaşabilirsiniz.

  1. CSS Dersleri 1: CSS Nedir ?
  2. CSS Dersleri 2: Söz Dizim Kuralları ve Seçiciler

CSS’de Renk Özellikleri

HTML elementlerine renk vermek için, element özelliklerine göre CSS’de kullanılan bazı renk tanımlayıcı özellikler vardır.Örneğin yazılara renk vermek için color özelliği kullanılır.Elementlere arka plan rengi vermek için background-color veya background özelliği kullanılır.Elementlerin kenarlıklarına renk vermek için border-color veya border özelliği kullanılır.

Renk tanımlaması yapmak için kullandığımız bu özellikler kullanılacağı yere göre değişiklik göstermektedir.Ama alabildikleri değerler hemen hemen aynıdır.Bu aldıkları değerlere CSS renk atama yöntemidenir.CSS de genel olarak renk tanımlaması için 3 yöntem vardır.

  1. Renk isimlerine göre
  2. Hex yöntemine göre
  3. RGB yöntemine göre

Tek tek bu 3 farklı renk tanımlaması yöntemini örnekler ile açıklamaya çalışacağım.

CSS’de Renklerin Kullanımı

Renklerin Kullanımı
Renklerin Kullanımı

1.Renk İsimlerine Göre

HTML ve CSS de isimlerine göre tanımlı 140 tane renk bulunur.Tanımlı renk isimleri renklerin ingilizce karşılığıdır.Color özelliğine bu isimlerden birini yazdığınızda o rengi oluşturursunuz.Mesela ingilizce de “blue” mavi demektir.

[syntax type=”css”]
p {
  color: blue;
}
[/syntax]

Bir metine mavi renk vermek isterseniz { color: blue; } yapmanız yeterlidir.Burada blue veya Blue ifadeleri de aynı işlemi yapar.

İsimlerine göre tanımlı bütün renkleri görmek için buraya bakabilirsiniz.

2.HEX Yöntemine Göre

Hexademical (on altılık) sayı sistemine göre renk oluşturma yöntemidir.Yazım kuralında Kırmızı,Mavi ve Yeşil renkler 2 basamakta temsil edilir. #KKYYMM, KK(Kırmızı renk alanı), YY(Yeşil renk alanı), MM(Mavi renk alanı).

Her renk 00 ile FF arasında temsil edilir.Rengin bulunduğu alana 0 verirseniz o renkten hiç bulunmaz, F verirseniz o rengi en yüksek derece kullanmış olursunuz.

[syntax type=”css”]
p {
  color: #FF0000;
}
[/syntax]

Burada kırmızı rengi F ile tanımlarken Yeşil ve Mavi renge 0 verip kullanmamış olduk.Hexademical yazım kuralı : 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F şeklindedir.

En sık ve en çok kullandığımız yöntem bu yöntemdir. HEX yöntemi en çok kullanılan vede bilinen yöntemlerden bir tanesidir.

Bir diğer yöntemimiz olan RGB yönteminide aşağıda açıkladım.

3. RGB Yöntemine Göre

Genelde renklerde opacity(şeffaflık) verileceği zaman bu yöntem kullanılır.Kırmızı(R),Yeşil(G) ve Mavi(B) renklerinin baş harflerinin kısaltmasıdır.HEX yönteminden farklı olarak burada renkler 0 ile 255 arasında değer alır.0 değeri yine o rengi yok sayar.255 değeri o rengin en fazla alabileceği değerdir.

[syntax type=”css”]
p {
  color: rgb(255, 0, 0);
}
[/syntax]

Birde şeffaflık vermek için sonuna alpha(a) değeri eklenebilir.Alpha değeri 0-1 arasında değer alır.

[syntax type=”css”]
p {
  color: rgba(255, 0, 0, 0.5);
}
[/syntax]

Son olarak pek kullanılmasada ihtiyaç durumunda ya da özel durumlarda kullanılan bir yöntem daha mevcuttur. Buna HSL yöntemi deniyor. Ders yazısını bitirmeden önce bu yöntemide kısaca açıklayıp bu CSS dersimizide noktalayalım.

4. HSL Yöntemine Göre

Hue (renk),Saturation(doygunluk) ve Lightness(parlaklık) ifadelerin kısaltması olan bu yöntem de ise bir rengin parlaklık ve doygunluğunu değiştirebiliriz.

[syntax type=”css”]
p {
  color: hsl(360, 50%, 50%);
}[/syntax]
Kısa ve öz olarak CSS’de Renklerin Kullanımı nasıl olduğunu, hangi yöntemlerin kullanıldığını ve amaçlarının ne olduğunu örnek vererek açıklamaya çalıştım. Umarım faydalı olmuştur, esen kalın 🙂

Trackback: CSS’de Renklerin Kullanımı

 Yazı Bağlantısını Kopyala & Paylaş

Benzer Yazılar

  • Sık Kullanılan CSS Ölçü Birimleri

    Sık Kullanılan CSS Ölçü Birimleri

    Yaklaşık 2 hafta önce bir start-up projesinde front end developer olarak işe başladım. Bu başladığım yeni proje tamamen özel yazılmış bir yazılım olduğu için tasarım yapısını, kodlama yapısını çözmem zamanımı aldı. Bir web arayüzü geliştiricisi için CSS'de ki "px" değeri can damarıdır tasarımın. Oluşturulmuş bir yapıyı alıp, ete kemiğe büründüren…
  • CSS Dersleri 10: CSS’de Font Özellikleri ve Kullanımı

    CSS Dersleri 10: CSS’de Font Özellikleri ve Kullanımı

    Selamlar, Daha önce ki CSS ders yazımda CSS'in text özelliğini, yazı özelliğini anlatmıştım. Önceki dersimizde yazılara biçim vermiştik, işte üstü çizili,altı çizili gibi bir takım text özellikleri anlatmıştım. Bu yazımda ise CSS'de Font Özellikleri ve Kullanımı anlatacağım. Daha önce ki css derslerim için buraya tıklayınız. CSS, font özellikleri metinlerin yazı tipi,kalınlık,boyut gibi…
  • CSS Dersleri 9: CSS’de Text (Metin) Özellikleri

    CSS Dersleri 9: CSS’de Text (Metin) Özellikleri

    Selamlar, Daha önce ki CSS yazımda sizlere width ve height değerlerinin kullanımını göstermiştim. Bu yazımda ise CSS'de Text (Metin) Özellikleri konusunu anlatacağım. Yazı olmadan bir website olmaz arkadaşlar, yazılar websitelerin yapı taşlarından bir tanesi ama önemli olan bir yapı taşıdır. Bu yüzden websitelerimizi hazırlerken dikkat etmemiz gereken husus text (metin)'lerdir.…
  • CSS Dersleri 8: CSS’de Yükseklik ve Genişlik Değerleri (Width – Height)

    CSS Dersleri 8: CSS’de Yükseklik ve Genişlik Değerleri (Width – Height)

    Selamlar, CSS derslerimize kaldığımız yerden devam ediyoruz. Bu dersimizde CSS'de Yükseklik ve Genişlik Değerleri ni nasıl kullanacağımızı, html elemenlerimize nasıl yükseklik ve genişlik vereceğimizi öğreneceğiz. Daha önce ki css derslerime göz atarak eksikleriniz var ise tamamlayabilirsiniz. [mks_icon icon="fa-folder-open" color="#1e73be" type="fa"] Diğer CSS Dersleri: CSS Dersleri 1: CSS Nedir ? CSS…
CSS Dersleri 3: Renklerin Kullanımı için Yorum'da Bulun

Bir Cevap Yaz

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

 Lütfen, en az 15 karakterli bir yorum belirtiniz.

 Lütfen,isminizi belirtiniz.
 Lütfen, kullanmakta olduğunuz bir e-mail adresi giriniz.
 Yukarıda ki alanı işaretlemeniz zorunludur.Aksi takdirde yorumunuz gönderilemeyecektir.