CSS Saydam Görsel - Image Opacity / Transparency

Internet Explorer için saydam görsel özelliği filter:alpha(opacity=x) ile sağlanır, 0 ile 100 arası saydamlık değeri verilebilir. Diğer tarayıcılar için ise opacity:x ile sağlanır ve 0.0 ile 1.0 arası saydamlık değeri alabilir. Kodumuzun her tarayıcıda aynı sonucu vermesini istiyorsak her iki özelliği birden kullanmalıyız.

Görselimizin normal halini görelim...

Görselimizin saydam özelliği almış halini görelim...

Saydam örneğimizin CSS kodunu görelim...

img {
       opacity:0.5;
       filter:alpha(opacity=50);
}

Saydam örneğimizin HTML/XHTML kodunu görelim...

<img src="test.jpg" width="200" height="150" alt="yuklenemedi" />

CSS Mouseover Efekti - Mouseover Effect

Görselin üzerine fare işaretçisi ile birlikte geldiğimizde görselin saydam olmasını ya da saydam görselin üzerine fare işaretçisi ile birlikte geldiğimizde görselin normal olmasını mouseover efekti ile sağlayabiliriz. Aşağıda ki görsellerin üzerine fare işaretçisi ile gelerek efekti test edebilirsiniz.

Internet Explorer için mouseover ile saydam görsel özelliği this.filters.alpha.opacity=x ile sağlanır, 0 ile 100 arası saydamlık değeri verilebilir. Diğer tarayıcılar için ise this.style.opacity=x ile sağlanır ve 0.0 ile 1.0 arası saydamlık değeri alabilir. Kodumuzun her tarayıcıda aynı sonucu vermesini istiyorsak her iki özelliği birden kullanmalıyız.

Kodumuzda onmouseover ve onmouseout öznitelikleri yer alacak. Fare işaretçisi görsel üzerinde ise onmouseover özniteliğine verdiğimiz stil çalışacak, fare işaretçisi görsel üzerinde değil ise onmouseout özniteliğine verdiğimiz stil çalışacak.

Örnek olarak görelim...

İlk örneğin kodunu görelim...

<img src="test.jpg" width="200" height="150" alt="yuklenemedi" style="opacity:1.0; filter:alpha(opacity=100);" onmouseover="this.style.opacity=0.6; this.filters.alpha.opacity=60" onmouseout="this.style.opacity=1.0; this.filters.alpha.opacity=100" />

İkinci örneğin kodunu görelim...

<img src="test.jpg" width="200" height="150" alt="yuklenemedi" style="opacity:0.6; filter:alpha(opacity=60);" onmouseover="this.style.opacity=1.0; this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.6; this.filters.alpha.opacity=60" />

CSS Saydam Kutu - Transparent Box

Yukarıda ki örneğin CSS kodunu görelim.

.saydam_arkaplan {
       width:600px;
       height:300px;
       margin-left:50px;
       background:url('../../images/portakal_2.jpg');
       border:1px dotted black;
}

.saydam_kutu {
       width:500px;
       height:240px;
       margin: 30px 50px;
       border:1px solid black;
       background-color:#ffffff;
       filter:alpha(opacity=50);
       opacity:0.5;
}

.saydam_kutu p {
       margin:25px 50px;
       color:#000000;
       font-weight:bold;
}

Yukarıda ki örneğin HTML/XHTML kodunu görelim.

<div class="saydam_arkaplan">

       <div class="saydam_kutu">

             <h1>Saydam Kutu</h1>

             <p>Burada güzel okunması rahat bir içerik var. </p>

             <p>Burada güzel okunması rahat bir içerik var. </p>

             <p>Burada güzel okunması rahat bir içerik var. </p>

       </div>

</div>