Css’de Opacity komutu

AycanB

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;filter:alpha(opacity=40); background-color:#e2e2e2;}
.resim a:hover{margin:0px auto;width:561px;height:563px;opacity:1;filter:alpha(opacity=100); background-color:#e2e2e2;}

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:
Aycan.Net - Aycan BÜLBÜL

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

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
———————————————————

AycanB · 16 Mayıs 2010

Güncellenme tarihi: 16 mayıs 2010

Kod:

.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)";}

Demo :

Demo sayfası arkadaşlar:
Atatürk Üniversitesi portal beta sürümü