CSS ile web sitelerimize albeni katmaya devam ediyoruz. Bu seferki tekniğimiz ise basit ama kullanışlı olduğu kadar tarayıcılar ile arasında birçok problem olan transparency.

Nerede Kullanalım?
Transparanlık özelliğini kullanabileceğiniz başlıca yer arkaplanında büyük resimler bulunan sitelerdir. Arkaplanda bulunan resimlerin tam olmasada flu bir şekilde görünmesini istiyorsanız transparanlık değeriyle oynayarak bu işlemi gerçekleştirebilirsiniz. Üstelik her div için ayrı ayrı tanımlayabilir, hepsinin transparanlığına ayrı değer verebilirsiniz.

Nasıl Kullanırım?
Transparanlık özelliği birçok tarayıcıda var fakat o kadar uyumsuz ki her tarayıcı için ayru bir özellik tanımlamanız gerekmekte. Çok bir kod fazlalığı yaratmıyor korkmayın. En fazla 3 satır kaybınız olacak.

#transparan {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

İşte bu kadar basit. Buradaki filter:alpha IE ile uyumu, -moz-opacity eski nesil mozilla tarayıcıları ile uyumu, -khtml safarinin eski versyonları ile uyumu sağlayan kodlar. opacity ise tüm tarayıcıların ortak olarak benimsediği transparency kodudur. 0.5 transparanlığın koyuluğunu belirtir. 0.0 ile 1.0 arasında olmalıdır. filter:alpha(opacity=50) kodunda ise yüzde cinsinden belirtilmiştir. 0 ile 100 arasında olmalıdır.

Artık siz de sitelerinize transparanlık kazandırabilirsiniz.

Not: Bu yazıda CSS-Tricks kaynak olarak kullanılmıştır.