Go Dilinde Concurrency

2,309 More

Projedeki Git Dosyaları Nasıl Silinir?

1 7,911 More

yTheme

4 2,689 More

Sunucu Güvenliği | SSH (Secure Shell) Kullanımı

2 2,167 More

Truemag

  • PHP
  • Golang
  • Laravel
  • Linux
  • SQL
  • SEO
  • WordPress
  • Diğer
    • Yazılım
    • Javascript
    • Css/XHtml/W3C
    • Genel
    • Tanıtım
    • Ajax
  • Home
  • ANASAYFA
  • HAKKIMDA
  • SPONSORLUK
  • ARŞİV
  • İLETİŞİM
  • BENİMLE ÇALIŞMAK İSTER MİSİNİZ?

CSS3 Color (Renk) Modülü

CSS3 Başlangıç yazısında CSS3 ile beraber artık modül kavramının geliştirildiğinden bahsetmiştim. Bu yazımda da Color yani renk özelliklerinden bahsederek modüllere yavaştan giriş yapalım istedim. Burada yazacaklarımdan bir kısmı CSS2 ve öncesinde de mevcuttu ancak hiç sürüm karmaşasına girmeye niyetim yok. Biz en güncel haliyle CSS3’ün renk özelliklerini nasıl kullanacağımızı inceleyelim.

CSS3 Renk Modülü

Css ile nesnelerin rengini belirlemek için “color” özelliğini (attribute) kullanmaktayız. Mevzu bahis tasarım olduğundan renk konusunun sanırım ne kadar önemli ve temel bir konu olduğunu belirtmeme gerek yok. Bu nedenle “color”‘ın kullanımını anlatarak modül konusuna başlamayı uygun buldum.

CSS3 “color” modülünü nesnelere renk verirken kullanmaktayız. Mantık olarak kırmızı, mavi ve yeşil (Red, Green, Blue – RGB) renklerinin kombinasyonları kullanılarak, istenilen renkler üretili. Bu renklendirme işini 6 farklı şekilde yaparız. Bu kullanım şekillerinden hangisini kullanacağınız tamamen sizin tercihinize kalmıştır.

1. Heksadesimal (On Altılı Sayı Sistemi) Gösterimi

En bilinen şekliyle CSS3’te renkler heksadesimal yani on altılı sayı sistemi ile gösterilir. Bu gösterimde her değerin başına diyez (#) işareti konulur. Bu sistemin kullanılışı aşağıdaki gibidir:

CSS
1
2
3
.metin {color:#FF0000} - Kırmızı
.metin {color:#00FF00} - Yeşil
.metin {color:#0000FF} - Mavi

Renk listesi

En çok kullanılan renklerin heksadesimal sistemdeki değerlerine şuradan ulaşabilirsiniz.

2. Ön Tanımlı Renkler

CSS3’te tüm tarayıcılar tarafından kabul edilen 147 adet ön tanımlı renk vardır. Diğer bir deyişle rengin heksadesimal ya da RGB kodunu kullanmak yerine doğrudan renk için tanımlanmış ismi kullanabilirsiniz. Kullanımı şu şekildedir:

CSS
1
2
3
.metin {color:red} - Kırmızı
.metin {color:green} - Yeşil
.metin {color:blue} - Mavi

CSS3’te ön tanımlı tüm renklerin isimlerine şuradan ulaşabilirsiniz.

3. RGB Gösterimi

CSS3’te renklerin kırmızı, yeşil ve mavinin karışımı ile üretildiğini değinmiştim. İşte bu gösterimde kısaca ne kadar kırmızı, ne kadar yeşil ve ne kadar mavi kullanacağımızı doğrudan belirtiyoruz. Her bir değer 0 ile 255 arası toplam 256 değer alır. Matematik hesabı ile de ortaya çıkacak renk miktarı 256x256x256’dan yaklaşık 16 milyondur. RGB gösterimin kullanımı şu şekildedir:

CSS
1
2
3
.metin {color:rgb(255,0,0)} - Kırmızı
.metin {color:rgb(0,255,0)} - Yeşil
.metin {color:rgb(0,0,255)} - Mavi

RGB gösterimde doğrudan renk miktarı yerine rengin kullanılacağı yüzdeyi de girebilirsiniz. Mesela şu iki gösterim birbirine eşittir.

CSS
1
2
.metin {color:rgb(255,0,0)} - Kırmızı
.metin {color:rgb(100%, 0%, 0%)} - Kırmızı

500’den fazla rengin RGB gösterimdeki değerlerinin listesine şuradan ulaşabilirsiniz.

4. RGBA Gösterimi

CSS3 ile gelen yeniliklerden birisi RGBA gösterimidir. Renk (color) özelliğine RGBA’daki A harfi ile Alpha yani saydamlık yeteneği kazandırılmıştır. Saydamlık değeri olarak 0.0 ile 1 arasında bir rakam girebiliriz ve bu değer yüzde (%) olarak yorumlanacaktır. Bir örnekle anlatmak gerekirse:

CSS
1
2
3
4
5
6
p {float:left;width:60px;height:60px;}
.metin1 {background-color:rgba(255,0,0, 0.1);}
.metin2 {background-color:rgba(255,0,0, 0.3);}
.metin3 {background-color:rgba(255,0,0, 0.5);}
.metin4 {background-color:rgba(255,0,0, 0.7);}
.metin5 {background-color:rgba(255,0,0, 0.9);}

Sonuç:
Renk testi sonucu
Burada değerli Fatih Hayrioğlu ile aynı şekilde bir örnekle konuyu anlattım çünkü bu konu bundan daha iyi örneklendirilemez kanımca ;)

5. HSL Gösterimi

HSL gösterimi aslında mantık olarak RGB ile aynıdır. RGB’nin bir takım kısıtlamaları olduğu düşünülerek bu gösterim üretilmiştir. HSL gösterimde renkler Kırmızı, Yeşil ve Mavi karışımından ziyade Hue, Saturation ve Lightness yani Renk, Koyuluk ve Işık miktarı ile belirlenir. Hue yani renk, renk çemberinde 0 ile 360 arasındaki renklere karşılık gelir. 0 kırmızı, 120 yeşil ve 240 mavidir. Saturation yani koyuluk, gri gölge ve tam renk arasında bir yüzde değerdir. Aynı şekilde Lightness yani ışık için de beyaz ve siyah arasında bir yüzde değer girilir. HSL kullanımı şu şekildedir:

CSS
1
2
3
.metin {color:hsl(0,65%,75%)} - Kırmızı tonu
.metin {color:hsl(120,35%,65%)} - Yeşil tonu
.metin {color:hsl(240,55%,35%)} - Mavi tonu

6. HSLA Gösterimi

HSL gösterimi kullanım açısından nasıl RGB gösterime benziyorsa HSLA gösterim de aynı şekilde RGBA gösterimine benzer ve en sondaki A harfi Alpha yani saydamlığı ifade eder. Saydamlık mantığı da RGBA’daki gibidir. Örnek kullanım ise şu şekildedir:

CSS
1
2
3
.metin {color:hsla(0,65%,75%, 0.3)} - Saydam kırmızı tonu
.metin {color:hsla(120,35%,65%, 0.5)} - Saydam yeşil tonu
.metin {color:hsla(240,55%,35%, 0.6)} - Saydam mavi tonu

Notlar

Yukarıda bahsettiğim tüm kullanımlar color için olduğu kadar background-color özelliği için de geçerlidir.

RGBA ve HSLA’daki Alpha ile opacity arasındaki fark, Alpha kullanımında sadece kullanılan elemana saydamlık verilirken opacity kullanımında elemanın içinde tüm alt elemanlara saydamlık özelliği kazandırılır.

RGBA ve HSLA’nın desteklenmediği Internet Explorer sürümlerinde (8 ve öncesi) aşağıdaki koddan faydalanabilirsiniz:

CSS
1
2
3
4
5
6
7
8
9
<!--[if IE]>
    <style type="text/css">
    .color-block {
        background:transparent;
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
        zoom: 1;
    }
    </style>
<![endif]-->

Renk modülünün veya daha net konuşmak gerekirse HSLA ve RGBA’nın hangi tarayıcılarda desteklendiğini şuradan görebilirsiniz.

Sonuç

Bu yazımda CSS3 ile elemanlara nasıl renk verebileceğinizi ve saydamlık katabileceğinizi anlatmaya çalıştım. Yukarıdakilerden hangisini kullanacağınız tamamen size kalmış, tamamı geçerli ve uygun kullanımdır. Bol renkli tasarımlarda buluşmak üzere diyeceğim ama lütfen renkleri abartmayalım :)

Kaynaklar

  • CSS3 RGBA Renk Tanımı
  • CSS Birimleri
  • CSS Legal Color Values
  • CSS3 Module Status
  • CSS Color Module Level 3
  • CSS Color Names
  • CSS Colors
  • CSS3 Modülleri Tarayıcı Desteği
  • 500+ Colours
Jun 8, 2013Erhan Yakut
Cloud Sunucu


hosting

CSS3 BaşlangıçCSS3 Yuvarlak Köşeler
You Might Also Like
 
CSS Dersi | Css İle Siteyi Ortalama
 
Programcının Alet Çantası
Erhan Yakut
7 years ago 2 Comments Css/XHtml/W3Ccolor, Css/XHtml/W3C, CSS3, CSS3 Modülleri, CSS3 Renk Modülü, HSL, HSLA, RGB, RGBA7,827
Sponsorlar

sponsor

sponsor

sponsor

sponsor
Bağlantılar
  • Beyazıt Kölemen
  • Domatessuyu
  • Lezzetli Robot Tarifleri
  • Ofizzo
  • PHP Dersleri
  • Wordpress Hosting
Random Posts
İdeal Form Kontrolü
19 Mayıs Atatürk’ü Anma Gençlik Ve Spor Bayramı
Varsın Kopyalasınlar
Linux Şenliği Değerlendirmesi
Javascript HTML Liste (ul, li) Fonksiyonu
sdafasdf
Hakkımda

Bilişim Teknolojileri alanında içerik üretmek üzere oluşturulmuş olan Yakuter.com 2006 yılında Erhan Yakut tarafından hayata geçirilmiştir. devamını okuyun…

CLOUD SUNUCU DESTEĞİ
2006-2020 © Yakuter