Your Ad Here

Ardaşık Stil Sayfaları (CSS)

26 Ekim 2007

Donukluk (Opacity)

CSS kullanarak saydam resimler yaratmak çok kolaydır.
Burada önce saydam bir resmin nasıl yaratıldığını göstereceğiz:

Normal resim aşağıdaki gibidir:

Örnek1 - Saydam Resim yaratma



Aynı görüntü saydamlık eklendiğinde aşağıdaki gibi olur:
 klematis
Aşağıdaki kaynak kod saydamlığı sağlar:
 
<img src="img/klematis.jpg" width="150" height="113" alt="klematis"
style="-moz-opacity:0.4;filter:alpha(opacity=40)" />

Mozilla saydamlık için -moz-opacity:x kodunu kullanır. IE ise filter:alpha(opacity=x) kullanır.

İp ucu: CSS3 dil kuralında saydamlık opacity:x ile tanımlanmıştır. Ancak bu dil kuralı şu anda yalnız Safari tarayıcısı tarafından desteklenmektedir.

IE'nin (filter:alpha(opacity=x)) kodunda, x 0 - 100 arasında bir değer olabilir. Küçük değerler resmi daha saydam yapar.

Mozilla'nın (-moz-opacity:x) kodunda, x 0.0 - 1.0 arasında bir değerdir. Küçük değerler saydamlığı arttırır (Aynı şeyler CSS3-geçerli dil kurallarında da söylenebilir opacity:x).

Örnek2 - Resim donukluğunda fare üzeri (Mouseover) etkisi

Fare üzeri etkisinde resimlerin saydamlığı aşağıda gösterilmiştir (Olayı daha iyi kavramak için resmin üzerine fareyi götürün).
klematis klematis 
<img src="img/klematis.jpg" width="150" height="113" alt="klematis"
style="-moz-opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.MozOpacity=0.4;this.filters.alpha.opacity=40" />

<img src="img/klematis2.jpg" width="150" height="113" alt="klematis"
style="-moz-opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.MozOpacity=0.4;this.filters.alpha.opacity=40" />

Gördüğümüz kadarıyla kaynak kodun ilk iki satırı birinci örnektekine benzemektedir. Ayrıca fare üzeri (onmouseover) niteliği ve fare dışı (onmouseout) niteliği eklenmiştir. onmouseover niteliği fare imleçinin resim üzerine geldiğinde ne olacağını belirtir. Bu örnekte resmin saydamlığı kaldırılmıştır.

Mozilla'da dil kuralı: this.style.MozOpacity=1 ve IE'de: this.filters.alpha.opacity=100.

İmleç resimden uzaklaşınca resmin yine saydam olması istenmektedir. Bu olay (onmouseout) fare dışarı niteliğiyle sağlanır.