Aycan.net

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 <a>  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 :

Opacity

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.

http://www.aycan.net/blog/css/cssde-opacity-komutu.html

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