Css’de Opacity komutu

Sitelerimize görsellik ve güzellik katmak için artık opacity vazgeçilemez bir komut gibi geliyor bizlere sebebi ise her türlü tarayıcıda sorunsuz çalışması ve hiç uğraşmadan en ufak bi kare veya listelenen menulere saydamlık özelliğini katması.

Bu makalede opacity komutunun nasıl kullanıdğını göstereceğim herhangi bir resim üzerine gelince resim hareketlensin.

Aycanb.css dosyamızı yazıyoruz

.resim { margin:0px auto;width:561px;height:563px; background-color:#e2e2e2;}
.resim a{ margin:0px auto;width:561px;height:563px;
opacity:0.4;background: #fff; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";}
.resim a:hover{opacity:1;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";}

Burada margin:0px auto; komutu ile div’i ortalıyoruz
resim a{} divi ise resim divinin içindeki etiketinin özelliklerini belirtiyor
resim a:hover{} divi ise resim divindeki a tagının üstüne gelince olacakları gösteriyor.

opacity komutu ise 0.4 değerinde saydam iken a:hover class tanımlamasında 0.4 değerini 1 yaptık ve resimin orjinal tonmalasını gösterdik

#############################
Şimdi index.html sayfamızı düzenliyoruz

<div class="resim">

<a href="http://www.aycan.net/blog/" title="Aycan Bülbül ">
<img src="http://www.aycan.net/aycan-bulbul.jpg" border="0" alt="Aycan Bülbül" width="561" />
</a>

</div>

Demo :


Demo sayfası arkadaşlar:
http://aycan.net/Ek/Portal/
Güncellenme tarihi: 16 mayıs 2010

———————————————————

Bu makale Aycan.net tarafından yazılmıştır. Link göstermeden yayımlamak YASAKTIR.
Css’de Opacity komutu - Aycan.net | Kişisel bişiy
———————————————————

internet explorerda çalışmıyor sanırsam ?

.resim a{ margin:0px auto;width:561px;height:563px;opacity:0.4;filter:a lpha(opacity=40); background-color:#e2e2e2;} şeklinde olması lazım bu şeklide iedede sorun olmaz

.resim { 
margin:0px auto;
width:561px;height:563px; 
background-color:#e2e2e2;
}
.resim a
{ 
margin:0px auto;
width:561px;
height:563px;
opacity:0.4;
filter:alpha(opacity=40); 
background-color:#e2e2e2;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
}
.resim a:hover
{
margin:0px auto;
width:561px;
height:563px;
opacity:1;filter:alpha(opacity=100); 
background-color:#e2e2e2;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

Css olarak bu kodları eklerseniz ie 5,6,7,8 sorunsuz çalışır .

Makaleyi düzenledim direk c/p yatığım için gözümdem kaçmış.

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";

Bu kodlarıda eklemelisin yoksa ie8 de sorun yaşanır .

ie8'de bu kodları eklemeden sorunsuz şekilde çalışıyor.

Ellerine sağlık Aycan , 2 defadır makalelerini okuyorum r10'da , bence başarılısın , teşekkürler güzel paylaşımların için.

Teşekkürler MehmetAlp.