CSS İpucu 19: Tüm Tarayıcılar İçin CSS İle Saydamlık(Opacity)

Daha önce birçok kez bu konuda bana e-posta geldi. Buraya yazmanın mantıklı olacağını düşündüm.

1
secici {

2
 opacity:  .75; /* Standard: FF gt 1.5, Opera, Safari */

3
 filter:  alpha(opacity=75); /* IE lt 8 */

4
 -ms-filter: "alpha(opacity=75)"; /* IE 8 */

5
 -khtml-opacity:  .75; /* Safari 1.x */

6
 -moz-opacity:  .75; /* FF lt 1.5, Netscape */

7
}

Örneği görmek için tıklayınız.

Kod aslında tek satır olması gerekir ki CSS 3 ile birlikte bu tek satır olacaktır. opacity: değer; tanımı ile halledeceğiz. Ama şu an yürürlükte olan tarayıcılar için yukarıdaki 5 satır kodu yazmalıyız.

Bu kodu yazmak o kadar da sorun değil, ama eğer bu kodu yazdığınız sayfanızı W3C doğrulamasından geçirirseniz aşağıdaki gibi bir hata alacaksınız.

Bence W3C doğrulması çok önemli olmasada bazen şartlar doğrulama gerektirdiğinde(mesela müşteri istediğinde) bu sorunu çözmek için bir kaç yöntem var.

Bu yöntemlerden biri javascript fonksiyonu hazırlayıp bu fonksiyon yardımı ile elemanlarımızı saydamlaştırma;

1
function donuklastirma(element,  donukDeger){

2
 var oe =  document.getElementById(element);

3
 // donuklastirma degeri

4
 oe.setAttribute("style", "opacity:"+ donukDeger +";")

5
 if (oe.style.setAttribute) // IE icin

6
 oe.style.setAttribute("filter", "alpha(opacity="+ donukDeger*100 +");")

7
}

Örneği görmek için tıklayınız.

Diğer bir yöntemde ise ayrı bir css kodu yazıp bu kodu javascript ile ekleyebiliriz

`1`	`<script` `type="text/javascript">`

`2`	`document.write('<link` `rel="stylesheet"` `type="text/css"` `media="screen"` `href="style/donuklastirma.css"` `/>');`

`3`	`</script>`

Kaynaklar

Kaynak : CSS Dersleri, Fatih HAYRİOĞLU