CSS3 RGBA renk tanımı kullanımı

CSS3 ile RGBA renk tanımı nedir? Nasıl kullanılır?

CSS ile renk değeri ataması yapılırken çeşitli yöntemler kullanılmaktadır.

background-color:blue;

tanımı mavi renkli bir arkaplan elde etmemizi sağlar.

RGB(Red-Green-Blue) yani Kırmızı-Yeşil-Mavi renklerin baz alındığı renk standardıdır.

background-color:#0000ff;

Tanımı mavi renkte arkaplan elde etmemizi sağlar. Bu tanımın kısa hali ise;

background-color:#00f;

Yukarıdaki tanımda bize mavi rengi verecektir.

CSS3 ile gelen renk tanımlarına göre RGBA ve HSLA tanımları yukarıdaki renk tanımlarına ek olarak gelmiştir. RGBA ve HSLA kullanımı aynı olduğu için sadece RGBA kullanımından bahsedeceğim.

CSS3 ile birlikte RGBA renk tanımıdaki A harfi Alfa’ya karşılık gelmektedir. Alfa değeri renk tanımımıza saydamlık etkisi katmaktadır. 0.0 ile 1 arasında değer alır. 0 değeri etkisiz kılarken 1 değeri de katı bir renk ortaya çıkaracaktır. Ara değerler bize saydamlık etkisi tanımlamamızı sağlar.

RGBA Tanımı

Normalde css ile renk tanımı yaparken

background-color:#757D8A;

tanımı kullanıyorum. Benzer şekilde

background-color:rgb(117, 125, 138);

Tanımıda bize aynı sonucu verir. RGBA ile dördüncü değer olarak alfa saydamlık derecesini ekleriz.

background-color:rgba(117, 125, 138, 0.5);

Şeklinde bir tanım yapıyoruz. 0.5 değeri bize % 50’lık bir saydamlık sağlar.

Renklerin RGBA değerlerine aşağıdaki linkten kolayca öğrenebilirsiniz.

http://hex2rgba.devoth.com/

Bu özelliğinde tek sorunu diğer CSS3 özelliklerindeki sorunumuz olan İnternet Explorer desteğinin olmaması.  İE9 hariç hiç bir İnternet Explorer sürümü bu özelliği desteklememektedir.

İnternet Explorer için Çözüm Önerisi

div.uzmanim{
  background: rgb(117, 125, 138); /* desteklemeyenler ie sürümleri için ie6,ie8 */
  background: rgba(117, 125, 138, 0.5);
}