div css olarak etiketli yazılar

Ara ara CSS ile ufak ama kilit niteliğinde ipucuları burdan sizlerle paylaşıyorum. DIV’e can veren Clearfix metodunu “Clearfix Metodu nedir? Nasıl kullanılır?” adlı yazımda paylaşmıştım. Bu sefer anlatmak istediğim nokta ise web’de transparanlık üzerine.

HTML yetersiz ve basiretsiz kaldığı bir çok noktada CSS ile hızlı ve pratik çözümler bulunmakta. Ayrıca tabii CSS’in geniş hakimiyet gücü zaten neler neler yapılabildiği bir başka yazının konusu. Şimdi bu geniş hakimiyet gücü ile tüm browser’larda çalışacak bir CSS bloğu hazırlayalım.

Transpanlık işlemleri her zaman dertli ve zahmetli olmuştur. Ayrıca klasik durum tekrar tecelli eder ve bir browser’da harika çalışan transparan elementler diğerinde kapkara görünür.

Aşağıdaki CSS bloğu ile 4 satırla tüm browser’larda çalışan bir transparanlık elde edebilirsiniz.

.transparent_class {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

Şimdi CSS bloğunu açıklayalım;

opacity: 0.5; Bu özellik muhakkak kullanılması gereken bir satırdır. Transparanlığın seviyesi bu özellik sayesinde ayarlanmakta ve bu işlem için en temel özelliktir. Ayrıca Firefox, Safari, and Opera browser’larında sorunsuz çalışır.

filter:alpha(opacity=50); Sadece Internet Explorer için gerekli olan bir tanımdır. Opacity’nin aynı işlemi yapar ama sadece IE için geçerlidir.

-moz-opacity:0.5; Netscape Navigator ve Mozilla’nın ilk sürümleri için gerekli olan özel tanımdır.

-khtml-opacity: 0.5; KTML browser motorunu kullanan Safari (1.x) için gerekli olan tanımdır.

Transparanlığın seviyesini ayarlamak için opacity değerini ayarlamanız yeterlidir.

Ayrıca bu işlemi arşivleyebilmeniz için örnek bir dosya da hazırladım. Afiyet olsun.