CSS Ä°le Efekt OluÅŸturmak – Resimler Ãœzerine Transparan Katman
CSS ( Cascade Style Sheet ) hangi web sayfası kodlama dilini kullanırsanız kullanın pek çok açıdan büyük rahatlık saÄŸlamakta.Pek çok tasarımcı CSS kodlarını oluÅŸan html kod yumağının çerçevesini daraltmak amacıyla da kullansa da aslında çok yetenekli efektler de hazırlamak mümkün.Bu yazı da bir resim üzerine transparan bir katman atarak ” hover ” metodu ile interaktif bir görüntü oluÅŸturacağız.
Bir html dosyası yapalım ve bu dosyanın içerisine şu kodları kullanarak bir tablo ve hücreler oluşturalım :
SPONSOR REKLAMLARI
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <title>CSS Efekt Örneği -1</title> </head> <body> <table><td><a class='transparan' href="#"><img border='0' src="test.jpg" alt="Test Resmi"></a></td></table> </body> </html>
 Basit sayfamızı oluşturduktan sonra sıra css kodlarımızı hazırlamaya geldi.Bunun için transparan adında bir sınıf hazılayacağız ve içerisine resmin üzerine mouse oku geldiği anda görünürlülüğünü arttıran fonksiyonu yazacağız.Dikkat ederseniz ikinci satır da FF için atamış olduğumuz bir bölüm mevcut. :
.transparan img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
}
İkinci aşamada mouse oku üzerinde olmadığı sırada yani durağan haldeyken sayfa içerisinde ki görünümünü ayarlayacağımız kodu yazıyoruz.Aynı şekilde FF içinde bir satır hazırlamamız gerekiyor.
.transparan:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}
Aslında hazırladığımız stil kodlarını baÅŸka bir css sayfası üzerine kayıt ederek html dosyamıza eklesek daha saÄŸlıklı bir iÅŸ yapmış olurduk fakat çok fazla satır olmadığından ÅŸimdilik bu ÅŸekilde çalışabiliriz.” Transparan ” adını verdiÄŸimiz sınıfımız için hedef aldığımız tek nokta ” img ” etiketleridir.Fakat sınıfın çalışacağı yer link <a> etiketinin sonrasıdır.Åžimdi kodu tamamlayalım :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<title>CSS Efekt Örneği -1</title>
<style type="text/css">
.transparan img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
}
.transparan:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}
</style>
</head>
<body>
<table><td><a class='transparan' href="#"><
img border='0' src="test.jpg" alt="Test Resmi"></a></td></table>
</body>
</html>
Opacity değerinin arttırıp azaltarak istediğiniz transparan değerini elde edebilirsiniz.Çalışan örneği görmek için tıklayın.
Kolay gelsin.
Bu durumu çözmenin en kolay yolu Display kullanmaktan geçiyor.Burada sana yardımcı olabilecek bir yazı var.Tabi kendi koduna göre tekrar şekillendirmek için Hover ile ilişkilendirmen gerekiyor.
Çok işime yaradı yarayacak nerdeyse
Teşekkürler.
Ben resimin üstüne gelince başka bir resim göstermeye çalışıyorum.Fakat fare ile üstüne gelince resim arka planda kalıyor.Ön plana nasıl alabilirim ?